网站如何做词,网站建站公司订单多吗,做分销商城网站的,中国网站建设网0 ref属性#xff08;组件间通信#xff09;
# 1 ref属性放在普通标签上input typetext v-modelname refmyinput通过 this.$refs[myinput] 拿到的是 原生dom对象操作dom对象#xff1a;改值#xff0c;换属性。。。# 2 ref属…0 ref属性组件间通信
# 1 ref属性放在普通标签上input typetext v-modelname refmyinput通过 this.$refs[myinput] 拿到的是 原生dom对象操作dom对象改值换属性。。。# 2 ref属性放在 组件上Child refmychild/Child通过 this.$refs[mychild] 拿到的是 组件对象组件对象.属性组件对象.方法实现父子间通信
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptscript src./js/axios.js/script/head
body
div idapph1ref属性/h1input typetext v-modelname refmyinputimg src./img/3.png alt refmyimgbutton clickhandleClick点我执行代码/buttondiv stylebackground-color: aquamarineChild refmychild/Child/div/div
/bodyscriptVue.component(Child, {template: divimg :srcurl alt height300px width200pxbutton clickhandleClick(子组件传入的)点我弹窗/button/div,data() {return {url: ./img/1.png}},methods: {handleClick(name) {alert(name)}}})var vm new Vue({el: #app,data: {name: },methods: {handleClick() {console.log(this.$refs)// 1 根据ref指定的名字取出原生dom对象// var i this.$refs[myinput]// console.log(i)// i.value 你好// 2 改图片// var i this.$refs[myimg]// i.src./img/6.png// 3 操作组件对象--实现组件间通信var i this.$refs[mychild]console.log(i.url)// 改图片i.url ./img/2.png// 执行方法i.handleClick(lqz)}}})/script
/html1 动态组件
# 小案例---》点击按钮切换组件
1.1 使用v-if控制组件显示与否
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script/head
body
div idapph1点击按钮切换组件/h1button clickwhohome首页/buttonbutton clickwhogoods商品/buttonbutton clickwhoorder订单/buttonHome v-ifwhohome/HomeGoods v-else-ifwhogoods/GoodsOrder v-else/Order/div
/bodyscriptvar vm new Vue({el: #app,data: {who: home,},components: {Home: {template: divh3我是首页/h3/div},Goods: {template: divh3 stylebackground-color: aquamarine我是商品页面/h3/div},Order: {template: divh3 stylebackground-color: red我是订单/h3/div},}})/script
/html1.2 通过动态组件控制组件显示谁
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script/head
body
div idapph1点击按钮切换组件/h1button clickwhoHome首页/buttonbutton clickwhoGoods商品/buttonbutton clickwhoOrder订单/buttonkeep-alivecomponent :iswho/component/keep-alive
/div
/bodyscriptvar vm new Vue({el: #app,data: {who: Home,},components: {Home: {template: divh3我是首页/h3/div},Goods: {template: divh3 stylebackground-color: aquamarine我是商品页面/h3/div},Order: {template: divh3 stylebackground-color: red我是订单/h3input typetext v-modelsearch/div,data() {return {search: }}},}})/script
/html1.3 keep-alive的使用–组件缓存 keep-alivecomponent :iswho/component/keep-alive2 插槽
#一般情况下编写完1个组件之后组件的内容都是写死的需要加数据 只能去组件中修改扩展性很差
# 然后就出现了插槽这个概念只需在组件中添加slot/slot就可以在的组件标签中添加内容2.1 基本使用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script/head
body
div idapph1插槽使用/h1div stylebackground-color: aquamarineHomedivimg src./img/1.png alt width200px height300px/div/Home/divhrdiv stylebackground-color: pinkHomea href点我看美女/a/Home/div/div
/bodyscriptvar vm new Vue({el: #app,data: {who: Home,},components: {Home: {template: divh3我是首页/h3slot/sloth3结束了/h3/div},}})/script
/html2.2 具名插槽
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script/head
body
div idapph1具名插槽使用/h1div stylebackground-color: aquamarineHomediv slotfootimg src./img/1.png alt width200px height300px/divdiv slotmiddlea href点我看美女/a/div/Home/divhr/div
/bodyscriptvar vm new Vue({el: #app,data: {who: Home,},components: {Home: {template: divh3我是首页/h3slot namemiddle/sloth3结束了/h3slot namefoot/slot/div},}})/script
/html3 vue-cli创建项目
# 创建vue项目需要借助于几个东西- nodejs-javascript只能运行在浏览器中-把谷歌浏览器的js解释环境---》使用c重写--》能够运行在操作之上-使用js的语法就可以写后端了c写了网络文件操作数据库操作-js的语法运行在操作系统上的一个解释型后端语言- vue-clivue脚手架 是node的一个模块# 安装node环境-官网下载安装包node-v18.16.1-x64.msi 一路下一步安装-node---》python的python命令-npm---》python的pip命令-下载模块去国外很慢-加速下载第三方模块用来替换npm命令的)npm install -g cnpm --registryhttps://registry.npm.taobao.org-安装模块使用npm install -现在使用 cnpm install 速度快# 安装vue脚手架
cnpm install -g vue/cli
安装完就会释放 vue 令 #装完django 释放了django-admin一样用来创建项目# 使用vue脚手架创建vue项目
vue create 项目名
操作如下图# 另一种创建vue项目方式图形化界面 4 vue项目目录介绍
# 使用pycharm开发# 运行vue项目的两种方式-使用名npm run dev-使用pycharm运行绿色箭头# 目录结构
first_vue #项目名-node_modules # 项目有很多依赖都放在这等同python的 .venv文件夹可以删掉非常多小文件复制很慢如果没了执行 cnpm install 就可以在装上装完项目可以运行-public # 文件夹一般不动favicon.ico # 网站小图标index.html # spa单页面应用---》整个vue项目其实就这一个html页面以后都是组件切换-src # 开发重点以后代码几乎都是写在这里-assets # 放一些静态资源图片cssjs-logo.png # 组件中使用的图片-components # 放组件小组件-HelloWorld.vue # 默认提供给咱们的-views # 放组件页面组件HomeView.vue # 首页AboutView.vue#关于-router # 装了vue-router就会有这个文件夹后面讲-index.js-store # 装 vuex 就会有这个文件夹后面讲-index.js-main.js # 整个项目的入口-App.vue #根组件-.gitignore # 使用了git忽略文件-babel.config.js #装了bable就会生成它---》语法转换--》可以写es高版本语法-package.json # 放了项目的依赖-package-lock.json # 锁定文件--》锁定依赖的版本-README.md #介绍文件-vue.config.js # vue配置文件 一般不动4.1 大致看一下文件中写了什么内容
# index.html 单页面应用全局只有一个html-不能禁用js否则vue项目执行不力-div id是app跟咱们之前写的一样# HelloWorld.vue 组件化开发开发阶段以后再vue项目中写组件 写 xx.vuetemplate在这里写 html内容script在这里写jsstyle在这里写样式之前写组件#组件名字就是HelloWorld 文件名# templatetemplate内写的内容# data(){} :在script中scriptexport default {data(){return {}},methods:{}}/script# 之前不能写独立的css以后都写在 style中#总结之前定义组件写起来很麻烦现在定义组件只要创建一个 xx.vue,在固定的位置写固定的代码即可# main.js--》控制 index.html 使用哪个跟组件 ---App.vue-import store from ./store # 导入语法- 在这里 new 了vue实例new Vue({render: h h(App)}).$mount(#app)# package.json 里面有项目依赖
5 vue项目开发规范
# 以后做vue开发只需要创建 组件 xx.vue# 会有三部分
##第一部分### 写html插值事件绑定
template
/template##第二部分### datamethodswatchcreated
script
export default {
}
/script##第三部分### 写样式
style scoped
/style6 es6导入导出语法
# 以后做了项目开发肯定要导入某些模块使用-之前是使用script src/script-以后再项目中import App from ./App.vue 语法引入# 默认导出和默认导入的使用#在utils.js中 导出var NAME 彭于晏function add(a, b) {return a b}export default { #导出add,NAME}# 在想用的位置导入import lqz from ./lqz/utils # 以后使用lqz代指就是导出的对象
