一。v-once
v-once指令赋值给标签后，这个标签中的所有变量都不能被更改，只能被渲染一次。之后的改动不能改变该标签中的值：
<div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值，只可主动更改 --> <input type="text" v-model="msg" v-once> <p>{{ msg }}</p> <!-- 一旦赋值，便不可更改 --> <p v-once>{{ msg }}</p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '初始值' } }) </script>
如果被赋值的是一个input表单，使用了v-model定义值，则这个表单中的默认值不可被改变，但是可以主动改变，其他的值会改变。
二。v-cloak指令
在vue修饰的页面中，所有的变量会事先加载{{}}，再使用script对其进行修饰，而vue中提供了一个v-cloak的属性，这个属性会在该标签所有元素加载完后消失，所以可以给它指定一些style：
<style> [v-cloak] { display: none; } </style> <!-- 不处理的情况下，每次新价值该页面，都会先渲染{{}}，
当vue环境加载成功，{{}}有会被解析消失 --> <!-- 处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，
会依次#app的v-cloak属性，就不会出现{{}}渲染闪烁问题 --> <div id="app" v-cloak> {{ }} {{ }} {{ }} </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', }) </script>
可以解决页面闪烁问题。
三。条件指令。
对于一些诸如v-if v-show的指令，可以决定该标签是否显示，其用法是不同的：
v-show
v-show修饰了一个标签之后，其值可以是一个布尔类型，也可以是一个变量（变量代表布尔类型）：
<p v-show="isShow">show条件指令</p>
v-if
v-if表面上和v-show的用法是一样的：
<p v-if="isShow">if条件指令</p>
不同点：他们的不同在于，当使用v-show隐藏修饰的标签，是定义了一个style将其隐藏，而使用v-if不会显示任何东西。
v-if v-else-if v-else
这些if的用法和python的用法是一样的，前两个需要更布尔类型，最后一个不需要。
当有一个分支成立后会显示该分支，而其他的分支不会再显示。当所有条件都不满足时运行。
例子：
<!-- 1) 两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时 v-if是不渲染标签 v-show以 display:none 方式渲染 --> <div id="app"> <p v-if="isShow">if条件指令</p> <p v-show="isShow">show条件指令</p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { isShow: false, } }) </script> <!-- 2) v-if="变量" v-else-if="变量" v-else 一组分支，上成立分支会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示 --> <style> .box { width: 400px; height: 300px; } .r { background-color: red; } .y { background-color: yellow } .b { background-color: blue; } .active { background-color: pink; } </style> <div id="app"> <div class="em"> <p> <button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">红</button> <button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黄</button> <button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">蓝</button> </p> <p> <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">红</button> <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黄</button> <button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">蓝</button> </p> <div class="box r" v-if="showName == 'rBox'"></div> <div class="box y" v-else-if="showName == 'yBox'"></div> <div class="box b" v-else></div> </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { showName: 'rBox' }, methods: { changeBox(name) { this.showName = name; } } }) </script>
四。v-pre
这个指令可以再vue的控制范围内形成不受vue控制的区域
<div id="app"> <p>{{ msg }}</p> <!-- v-pre 指令可以在vue控制范围内，形成局部vue不控制区域 {{ }} 和 v-if 都会原样输出，不会被解析 --> <p v-pre> {{ }} <span v-if="hehe"></span> </p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'message' } }) </script>
五。循环指令
循环指令使用关键字v-for，其语法如下：
<span v-for="ch in str">{{ ch }}</span>
对于字符串，指定的字符串是字符串中的每个字符。
对于for循环也可以获取其index：
<span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span>
其中的key就是唯一标识标签的，加速渲染的。
也可以遍历列表：
<p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p>
遍历字典时，它所返回的一个是值，第二个键，第三个是index：
<p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p>
todolist例子：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> li:hover { color: red; cursor: pointer; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="userMsg"> <button type="button" @click="sendMsg">留言</button> </p> <ul> <li v-for="(msg, index) in msgs" @click="deleteMsg(index)"> {{ msg }} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [], // 所有留言 userMsg: '', // 用户留言 }, methods: { sendMsg() { // 留言事件 // 尾增 // this.msgs.push(this.userMsg); // 首增 // this.msgs.unshift(this.userMsg); let userMsg = this.userMsg; if (userMsg) { this.msgs.unshift(userMsg); // 渲染给页面 localStorage.msgs = JSON.stringify(this.msgs); // 同步到数据库 this.userMsg = ''; // 清空留言框 } }, deleteMsg(index) { // 开始索引 操作长度 操作的结果们 this.msgs.splice(index, 1) } } }) </script> <script> // localStorage['num'] = 10; // sessionStorage.num = 888; // console.log(localStorage.num); // localStorage.msgs = JSON.stringify(['1111', '2222']); // console.log(JSON.parse(localStorage.msgs)); // console.log(JSON.parse(localStorage.msgs)[0]); </script> </html>
其中的注意点是:
设置浏览器永久数据：
localStorage['num'] = 10;
设置浏览器窗口绑定数据：
sessionStorage.num = 888;
设置的数据都是以字符串的形式，如果需要以列表的方式正常操作，需要json序列化。
操作一个列表使用方法：
this.msgs.splice(index, 1)
六。修改符号
可以使用dilimiters来修改固定的关键符号{{}}：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> {{ msg }} {[ msg ]} </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '12345' }, // delimiters: ['{{', '}}'], delimiters: ['{[', ']}'], }) </script> </html>
七。计算属性。
在一个属性分为两个进行监听时，可以直接操作data：
<p @click="fn">{{ num }}</p> <p>十位：{{ parseInt(num / 10) }}</p> <p>个位：{{ num % 10 }}</p>
而如果需要对两个变量值进行操作成一个变量需要使用关键字computed：
十位:<input type="number" v-model="shi" min="0" max="9"> 个位:<input type="number" v-model="ge" min="0" max="9"> 结果：<b>{{ shi * 10 + +ge }}</b> 结果：<b>{{ result }}</b> computed: { result() { // console.log('该方法被调用了'); // this.shi; // this.ge; return this.shi * 10 + +this.ge } }
其中：
一个可转化成数字的字符串在前面添加+符号会转换成数字类型。
computed的定义规则：
1) computed是用来声明 方法属性 的。
2) 声明的方法属性不能在data中重复定义。
3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听。
4) 计算属性的值来源于监听方法的返回值。
八。属性监听：
watch。当多个属性依赖于一个值时，可以使用该关键字定义。
其规则如下：
1) watch为data中已存在的属性设置监听事件。
2) 监听的属性值发送改变，就会触发监听事件。
3) 监听事件的方法返回值没有任何意义。
例子：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!-- 多个变量的值依赖一个变量，该变量发生改变，所有依赖变量都会改变 --> <p @click="fn">{{ num }}</p> <p>十位：{{ shi }}</p> <p>个位：{{ ge }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 99, shi: 0, ge: 0, }, methods: { fn() { this.num -= 3; } }, // 1) watch为data中已存在的属性设置监听事件 // 2) 监听的属性值发送改变，就会触发监听事件 // 3) 监听事件的方法返回值没有任何意义 watch: { num () { // console.log('num改变了') this.shi = parseInt(this.num / 10); this.ge = this.num % 10; // return '12345' } } }) </script> </html>
九。组件。
组件分为三类：根组件，局部组件，全局组件。
组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用。
根组件的定义就是唯一的new出的实例。所有被new Vue产生的组件，在项目开发阶段，一个项目产生一个根组件。
全局组件就是不用注册，九可以称为任何一个组件的子组件。
局部组件就是必须在根组件进行注册的组件。
每个组件都有自身的html，css和js，都在一个template中。
根组件:
根组件中，有template，其中只能有一个根标签，如果有两个则只渲染第一个。
根组件之间不能进行信息交互。
如果根组件中有渲染了html标签后，原根标签中的元素可以覆盖。如果template中没有元素，就会显示原标签中的元素，而如果是空格则会留下一个div标签。
例子：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p>{{ msg }}</p> </div> <div id="main"> </div> </body> <script src="js/vue.js"></script> <script> // 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用 // 2) 分组分为根组件、全局组件与局部组件 // 根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件 // 全局组件：不用注册，就可以成为任何一个组件的子组件 // 局部组件：必须注册，才可以成为注册该局部组件的子组件 // 3) 每一个组件都有自身的html结构，css样式，js逻辑 // 每一个组件其实都有自己的template，就是用来标识自己html结构的 // template模板中有且只有一个根标签 // 根组件一般不提供template，就由挂载点的真实DOM提供html结构 new Vue({ el: '#app', data: { msg: 'message', c1: 'red' }, template: ` <div :style="{color: c1}" @click="fn">{{ msg }} {{ msg }}</div> `, methods: { fn() { alert(this.msg) } } }); new Vue({ el: '#main', data: { msg: 'message' } }) </script> </html>
局部组件：
局部组件的创建方法是：
let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤马叉虫</p> </div> ` };
其中localtag就是该组件可以被注册的名字，所以需要在根组件进行注册，注册需要使用关键字：components：
components: {
// mcc: localTag,
// localTag,
'local-tag': localTag,
}
script中的驼峰就是html中的-分法。
注册好之后就可以在根标签中使用：
<div id="app"> <!--<mcc></mcc>--> <local-tag></local-tag> <local-tag></local-tag> </div>
例子：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <!--<mcc></mcc>--> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 创建一个局部组件 // 1) 创建局部组件 // 2) 在父组件中注册该局部组件 // 3) 在父组件的template模板中渲染该局部组件 let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤马叉虫</p> </div> ` }; new Vue({ el: '#app', components: { // mcc: localTag, // localTag, 'local-tag': localTag, } }) </script> </html>
全局组件：
创建全局组件的方法是：
Vue.component('global-tag', { template: ` <div class="box" @click="action"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤{{ num }}</p> </div> `,
组件名字就是global-tag，这个组件就可以直接在html中使用：
<div id="app"> <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> </div>
在全局组件被多次调用时，会使用同一个数据，操作的也是同一个数据，为了实现数据的隔离，需要使用data方法进行设置：
data () {
return {
num: 0
}
},
设置的数据是以函数的方法进行反馈，即开辟一个新的空间。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> </div> </body> <script src="js/vue.js"></script> <script> // 1) 创建全局组件 // 2) 在父组件的template模板中直接渲染该全局组件 Vue.component('global-tag', { template: ` <div class="box" @click="action"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤{{ num }}</p> </div> `, data () { return { num: 0 } }, methods: { action() { this.num++; } } }); // 数据局部化分析导入 // a = function () { // return {num: 10} // }; // b1 = a(); // b2 = a(); // b3 = a(); new Vue({ el: '#app', }) </script> </html>
十。组件之间的交互：
在父组件中，需要传递信息给子组件，需要进行一系列的处理。
首先，在父组件中获取到了一组数据，而子组件需要对这一些列数据进行循环时，需要和子组件进行一一对应。
步骤如下：
1) 父组件提供数据
2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供
3) 在子组件实例中，通过props实例成员获得自定义属性
父组件中需要为子组件自定义属性，并传值:
<div id="app"> <info v-for="info in infos" :key="info.image" :myinfo="info"></info> </div>
子组件中需要使用props实例成员获取自定义属性值：
let info = { template: ` <div class="info"> <img :src="myinfo.image" alt=""> <p><b>{{ myinfo.title }}</b></p> </div> `, props: ['myinfo'] };
如从即可调用父组件中的值。例子：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .info { text-align: center; width: 200px; padding: 3px; box-shadow: 0 3px 5px 0 pink; float: left; margin: 5px; } .info img { width: 200px; } </style> </head> <body> <div id="app"> <info v-for="info in infos" :key="info.image" :myinfo="info"></info> </div> </body> <script src="js/vue.js"></script> <script> // 伪代码：模拟数据从后台请求 /* let infos = ''; document.onload = function () { $.ajax({ url: '/images/', type: 'get', success (response) { infos = response.data } }) }; */ let infos = [ { image: 'img/001.png', title: '小猫' }, { image: 'img/002.png', title: '蛋糕' }, { image: 'img/003.png', title: '蓝糕' }, { image: 'img/004.png', title: '恶犬' }, ]; let info = { template: ` <div class="info"> <img :src="myinfo.image" alt=""> <p><b>{{ myinfo.title }}</b></p> </div> `, props: ['myinfo'] }; // 数据交互 - 父传子 - 通过绑定属性的方式 // 1) 父组件提供数据 // 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供 // 3) 在子组件实例中，通过props实例成员获得自定义属性 new Vue({ el: '#app', components: { info, }, data: { infos, } }) </script> </html>
子传父：
当留言需要删除是，使用组件实现，需要在子组件中使用自定义事件将数据携带出来，传递给父组件进行真正的删除：
1) 数据由子组件提供
2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
自定义属性方式如下，要在原模板中定义：
<msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs"
:msg="msg" :index="i" :key="msg"></msg-li>
而在系统事件触发后，通过$emit('事件名'，数据)的方式触发自定义事件：
methods: {
// 系统的click事件
deleteMsg(i) {
// $emit('自定义事件名', 参数们)
this.$emit('remove_msg', i);
this.$emit('myclick', 1, 2, 3, 4, 5)
}
}
总例子如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .close:hover { cursor: pointer; color: red; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="userMsg"> <button @click="sendMsg">留言</button> </p> <ul> <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li> </ul> </div> </body> <script src="js/vue.js"></script> <script> let msgLi = { template: ` <li> <span class="close" @click="deleteMsg(index)">x </span> <span>第{{ index + 1 }}条：</span> <span>{{ msg }}</span> </li> `, props: ['msg', 'index'], methods: { // 系统的click事件 deleteMsg(i) { // $emit('自定义事件名', 参数们) this.$emit('remove_msg', i); this.$emit('myclick', 1, 2, 3, 4, 5) } } }; // 组件交互-子传父 // 1) 数据由子组件提供 // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数 new Vue({ el: '#app', data: { msgs: [], userMsg: '' }, methods: { sendMsg() { if (this.userMsg) { this.msgs.push(this.userMsg); this.userMsg = ""; } }, removeAction(i) { this.msgs.splice(i, 1) } }, components: { msgLi } }) </script> </html>