v-once指令
单独使用，限制的标签内容一旦赋值，便不可被动更改（如果是输入框，可以主动修改）
```html <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> ```
v-cloak指令
防止页面闪烁
```html <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> ```
条件指令
```html <!-- 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分支没有条件，在所有分支不成立后才显示 --> <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-for：遍历
字符串: v-for="(ch, index) in str"
数组：v-for="(ele, index) in arr"
对象：v-for="(value, key, index) in obj"
实例成员
computed：设置
方法属性，该方法属性在页面渲染后，绑定的方法中任意变量发送改变（都被监听），都会回调绑定的方法
——一个变量依赖多个变量
computed:{ fullName() { return this.firstName + this.lastName; } } watch: 设置已有属性的监听事件，监听的变量值改变就会回调绑定的方法 - 多个变量依赖一个变量 watch:{ fullName() { this.firstName = this.fullName.split('')[0]; this.lastName = this.fullName.split('')[1]; } } props：声明组件的自定义属性 emit：为组件自定义事件发送数据
组件
什么是组件：html、css、js的集合体
特点：每个组件都是一个vue实例；有根组件、全局组件、局部组件三种；
组件都有自己的template（根据组件可以省略采用挂载点）；
子组件可以复用，所以数据要做局部化处理data(){ return {} };
在哪个模板中出现的变量，就由当前组件提供变量对应的值
全局组件：
Vue.component("组件名"，{实例成员们})
局部组件：必须在使用该组件的父组件中注册
let 组件名 = {实例成员们}
nuw Vue（{
el: "#app",
components: {
组件标签名：组件名
}
组件信息交互
父传子：提供绑定自定义属性
子传父：提供自定义事件携带
}）