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

        组件标签名:组件名

      }

  组件信息交互

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

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

    })

    

02-13 20:39