Ŀ¼
获取自定义成员和methods时，用$options.成员来获取，
<div id="app"> <h1 @click="btnClick">{{ msg }}</h1> <p>{{$data}}</p> <p>{{$options}}</p> <p>{{$options.myarr}}</p> </div> <script> let app = new Vue({ el: '#app', data: { msg: '数据' }, methods: { btnClick() { console.log(this.msg) } }, myarr: [1, 2, 3, 4] }); console.log(app.msg); console.log(app.$data); console.log(app.$options.methods); console.log(app.$options.myarr) </script> <div class="app"> <p v-pre> <!--v-pre的内部解除vue控制，都是原义输出：插值表达式不是插值表达式，变量也不是变量，vue指令也只是普通的属性--> {{msg}} <span v-on="abc"></span> </p> </div> <script> new Vue({ el: '#app', data: { msg: 'msg' } }) </script> <div id="app"> <!--列表--> <p>{{arr}}</p> <div> <!--值遍历--> <p v-for="v in arr"> <span>{{ v }}</span> </p> <!--值、索引遍历--> <p v-for="(v,i) in arr"> <span>第{{ i+1 }}个值为：{{ v }}</span> </p> </div> <!--字典--> <p>{{ student }}</p> <div> <!--value遍历--> <p v-for="v in student"> <span>{{ v }}</span> </p> <!--value、key遍历--> <p v-for="(v,k) in student"> <span>{{ k }}:{{ v }}</span> </p> <!--value、key、索引遍历--> <p v-for="(v,k,i) in student"> <span>{{ k }}:{{ v }}({{i}})</span> </p> </div> </div> <script> let app = new Vue({ el: '#app', data: { arr: [1, 2, 3, 4, 5], student:{ 'name':'Bob', 'age':18, 'gender':'男' } } }) </script> <style> li:hover { color: red; cursor: pointer; } </style> <div id="app"> <input type="text" v-model="info"> <button @click="addMsg">留言</button> <ul> <li v-for="(msg,i) in msgs" @click="delMsg(i)">{{msg}}</li> </ul> </div> <script> new Vue({ el: '#app', data: { info: '', msgs: JSON.parse(sessionStorage.msgs || '[]'), }, methods: { addMsg() { if (this.info) { this.msgs.unshift(this.info); this.info = '' sessionStorage.msgs = JSON.stringify(this.msgs); // sessionStorage中不能直接存列表，需要先转成JSON字符串存入，在取得时候再解析回列表 } }, delMsg(i) { this.msgs.splice(i, 1) sessionStorage.msgs = JSON.stringify(this.msgs); } } }) </script> <div id="app">{{msg}}</div> <script> new Vue({ el:'#app', data:{ msg:'message' }, // 修改插值表达式符号.在Django中的模块渲染中也是用的{{ }}。这样导致在取变量时有冲突，所以可以用delimiters来修改插值表达式符号 delimiters:['[[','}}'], }) </script> <div id="app"> <input type="text" v-model="a"> <input type="text" v-model="b"> <span>{{xyz}}</span> </div> <script> new Vue({ el:'#app', data:{ a:'', b:'' }, // 1)计算后属性不需要再data中重复定义 // 2）计算后属性必须渲染后，绑定的方法才会生效 // 3）计算后属性绑定的方法中的任意变量值更新，方法都会被调用 // 4）计算后属性为只读属性（不可写） computed:{ xyz(){ this.a; this.b; console.log('我被调用了') } }, // 应用场景：一个计算后属性的值，可以来源于多个属性值 }) </script> <div id="app"> <input type="text" v-model="num_a"> <p>num_b:{{num_b}}</p> <p>num_c:{{num_c}}</p> </div> <script> // 1)监听绑定的属性，该属性可以get、set // 2)监听的属性一旦发生值更新，绑定的方法就会被调用 // 3)监听的属性是已定义的属性（必须在data中定义） new Vue({ el:'#app', data:{ num_a:'', num_b:'', num_c:'', }, watch:{ // 很多变量依赖同一个变量值，给这个变量设监听函数来处理这些变量 num_a(){ console.log('num_a更新时，我被调用了') this.num_b = this.num_a*10; this.num_c = this.num_a*20 } }, }) </script> 组件：由template + css + js 三部分组成（.vue文件）
- 1）组件具有复用性
- 2）复用组件时，数据要隔离
- 3）复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别
// 组件介绍： // 1）每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM（渲染） // 2）挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM,完成实例创建后再替换掉真实DOM // 3）挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位 // 4）所有new Vue()产生的组件都称之为根组件 -> 项目开发时，整个项目都只有一个根组件 // 5）template只能解析一个根标签，根标签里可以有多个标签 <div id="app"> <div> {{msg}} </div> </div> <script> new Vue({ el: '#app', data: { msg: 'message' }, template: ` <div class="main"> <p>{{msg}}</p> <p>{{msg}}</p> </div> ` }) </script> // 1) 创建组件 // 2) 注册组件 // 3) 渲染组件 <style> .ad { width: 200px; margin: 5px; padding: 5px; box-shadow: 0 0 5px 0 gold; float: left; } .ad img { width: 100%; } .ad h4 { text-align: center; font: normal 20px/30px '微软雅黑'; } </style> <div id="app"> <!-- 3) 渲染组件 --> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> </div> <script> // 1) 创建局部组件 let localTag = { template: ` <div class="ad"> <img src="img/dog.jpg" alt=""> <h4>可爱柯基</h4> </div> ` }; new Vue({ el: '#app', // 2) 注册组件 components:{ // localTag:localTag localTag } }) </script> // 1）创建组件 // 2）渲染组件 <div> <div id="app"> <global-tag></global-tag> </div> <div id="main"> <global-tag></global-tag> </div> </div> <script> // 创建全局组件 Vue.component('global-tag', { template: ` <div class="ad"> <img src="img/dog.jpg" alt=""> <h4>可爱柯基</h4> </div> ` }); new Vue({el: '#app',}); new Vue({el: '#main',}) </script> <div> <div id="app"> <global-tag></global-tag> <local-tag></local-tag> </div> <div id="main"> <global-tag></global-tag> <local-tag></local-tag> </div> </div> <script> let localTag = { template: ` <div class="ad" @click="click1"> <img src="img/dog.jpg" alt=""> <h4>局部组件柯基点{{num}}次</h4> </div> `, data() { return {num: 0,} }, methods: { click1() {this.num++} } }; Vue.component('global-tag', { template: ` <div class="ad" @click="click2"> <img src="img/dog.jpg" alt=""> <h4>全局组件柯基点{{count}}次</h4> </div> `, data() { return {count: 0,} }, methods: { click2() {this.count++}} }); new Vue({ el: '#app', components: {localTag} }); new Vue({ el: '#main', components: {localTag} }) </script> <div> <div id="app"> <local-tag :my_dic="ad" v-for="ad in ads" :key="ad.title"></local-tag> </div> </div> <script> let localTag = { props:['my_dic',], template: ` <div class="ad"> <img :src="my_dic.img" alt=""> <h4>{{my_dic.title}}</h4> </div> ` }; let ads = [ { img:'img/dog.jpg', title:'柯基1' }, { img:'img/dog.jpg', title:'柯基2' }, { img:'img/dog.jpg', title:'柯基3' }, ]; new Vue({ el: '#app', components:{localTag,}, data:{ ads:ads, } }) // 1）父级提供数据 // 2）在父级模板中，为子组件标签设置自定义属性绑定父级数据 // 3）在子级props成员中，接收自定义属性 // 4）在子组件模板和方法中，使用自定义属性名就可以访问父级数据 </script> <div id="app"> <p> <input type="text" v-model="info"> <button @click="add_msg">留言</button> <ul> <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag> </ul> </p> </div> <script> let msgTag = { props: ['msg', 'index'], template: ` <li> <span @click="del_fn" class="del">x</span> <span>{{ msg }}</span> </li> `, methods: { del_fn() { this.$emit('del_action', this.index) } } }; new Vue({ el: '#app', components: { msgTag }, data: { info: '', msgs: JSON.parse(sessionStorage.msgs || '[]'), }, methods: { add_msg() { let info = this.info; if (info) { this.msgs.unshift(this.info); this.info = ''; sessionStorage.msgs = JSON.stringify(this.msgs); } }, del_li(index) { console.log(index); this.msgs.splice(index, 1); sessionStorage.msgs = JSON.stringify(this.msgs); } } }); // 分析数据 子传父 // 1）子组件提供数据 // 2）子组件通过系统事件激活自己的绑定方法，发送一个自定义事件，携带自身数据 // 3）在父组件模板中的子组件标签中为自定义事件绑定父组件方法 // 4）父组件实现方法获取到子组件数据 </script> 来源：博客园
作者：Python家的小白
链接：https://www.cnblogs.com/863652104kai/p/11427454.html