10.9总结

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: {

　　　　　　　　组件标签名：组件名

　　　　　　}

　　组件信息交互

　　　　父传子：提供绑定自定义属性

　　　　子传父：提供自定义事件携带

　　　　}）