本文目录：
一、实例中的成员
# 计算computed
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> 姓<input type="text" v-model="first_name"> <hr> 名<input type="text" v-model="last_name"> <hr> <p>{{ first_name + " " + last_name }}</p> <p>{{ full_name_fn() }}</p> <!-- 一个变量的值依赖于多个变量的值 --> <p>{{ full_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { first_name: "", last_name: "", }, methods: { // 声明的是函数, 该函数必须手动调用 full_name_fn: function () { return this.first_name + " " + this.last_name } }, computed: { // 声明变量full_name, 该变量的值等于后方函数的返回值 // 函数中包含的所有vue变量值只要有发生变化的系统就会调用该函数 full_name: function () { return this.first_name + " " + this.last_name } } }) </script> </html>
# watch监听
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> 姓名<input type="text" v-model="full_name"> <hr> <p>{{ first_name }}</p> <hr> <p>{{ last_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { full_name:"", first_name:"", last_name:"", }, watch:{ // watch只是对已有的变量进行值变化的监听，一旦发现值变化，系统自动回调监听变量后的函数 // 后方函数和前方变量只有数据变化的监听绑定关系，没有值相关的联系 full_name: function () { arr = this.full_name.split(" "); this.first_name = arr[0]; this.last_name = arr[1]; } } }) </script> </html>
二、高级指令
# 条件指令渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> <style> .wrap{ width: 300px; } .box{ width: 100px; height: 100px; } .red{ background-color: red; float: left; } .orange{ background-color: orange; float:right; } </style> </head> <body> <div id="app"> <button @click="rAction">red切换</button> <button @click="oAction">orange切换</button> <div class="wrap"> <!--v-if 值为false时，不会被渲染--> <!--了解：key由vue控制的属性key值需要唯一标识，因为key的值就是vue对该组件对内在中建立缓存的可以--> <div class="box red" v-if="r_show" :key="key"></div> <!--v-show 值为false时，以display：none被渲染--> <div class="box orange" v-show="o_show"></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { r_show:true, o_show:true, }, methods:{ rAction:function () { this.r_show = !this.r_show }, oAction:function () { this.o_show = !this.o_show } } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> <style> .box{ height:100px; } .r{background-color: red} .y{background-color: yellow} .b{background-color: blue} </style> </head> <body> <div id="app"> <ul> <li @click="rfn">红</li> <li @click="yfn">黄</li> <li @click="bfn">蓝</li> </ul> <div class="box r" v-if="tag==0" ></div> <div class="box y" v-else-if="tag==1"></div> <div class="box b" v-else></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { tag:0 }, methods:{ rfn:function () { this.tag = 0 }, yfn:function () { this.tag = 1 }, bfn:function () { this.tag = 2 }, } }) </script> </html>
#循环指令渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <ul> <li>{{ ls[0] }}</li> <li>{{ ls[1] }}</li> <li>{{ ls[2] }}</li> <li>{{ ls[3] }}</li> <li>{{ ls[4] }}</li> </ul> <ul> <li v-for="(ele,index) in ls">{{ ele }} {{ index }}</li> </ul> <ul> <li v-for="(value,key,index) in dic">{{ key }} {{ value }} {{ index }}</li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { ls: ['张三', '李四', '王五', '赵六', '钱七'], dic:{ name:'Richard.wu', age:31, gender:'man' } }, }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <form action=""> <input type="text" v-model="msg"> <button type="button" @click="fn">留言</button> </form> <ul> <li v-for="(m,i) in msgs" @click="deleteAction(i)">{{ m }}</li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { msg:"", msgs:["初始留言"] }, methods:{ fn:function(){ if(this.msg){ // this.msgs.push(this.msg)//在后添加 this.msgs.unshift(this.msg);//在前添加 this.msg=""; } }, deleteAction:function(index){ console.log(index); // 从什么索引开始，操作多少位，操作什么 this.msgs.splice(index,1) } } }) </script> </html>
三、组件初识
# 组件初识
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue.js"></script> <script> //每个组件均有自身的模板tempalate，根组件的模板就是挂载点 new Vue({ //根组件一定需要挂载点（否则无法渲染到页面中），一般情况下，根组件template就取挂载点，不需要自定义 el: "#app", data: { msg:"信息" }, //template就是组件的html架构 //每个组件模板只能拥有一个根标签 template:"<div><p>中午请客，师妹告诉我今晚不回去还想给我三个耳光，我当时就拒绝了，休想坑我第二顿</p></div>" }) </script> </html>
# 局部组件
<body> <div id="app"> <abc></abc> <abc></abc> <abc></abc> </div> <hr> <div id="main"> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 局部组件 var localTag = { // 子组件的数据具有作用域，以达到组件的复用, 每一个复用的组件具有自身独立的一套数据 data: function () { return { // 返回值是一个数据字典(一套数据) count: 0 } }, template: "<div @click='fn'>点击{{ count }}次</div>", methods: { fn: function () { this.count += 1; } } } // app根组件 new Vue({ el: "#app", // 注册 components: { 'abc': localTag } }) // main根组件 new Vue({ el: "#main", components: { // localTag 'local-tag': localTag } }) </script>