VUE基础知识3：基础指令

一、常用指令

v-text 等价于 {{ }}，但是 {{ }} 有缺点，页面的{{ }}会一闪而过。

怎么解决 {{ }} 一闪而过，我们使用 v-text 来代替。

<div v-text="msg"></div>

开发中还是使用 {{ }}，因为 {{ }} 比较方便。而且后面还有更好的方法，来解决 {{ }} 闪烁的问题。

v-cloak 解决闪烁（块级）问题，只要被v-cloak包裹起来的都不闪烁。

需要手动写个样式，把v-cloak 设置为 display: none;

但后期也用的不多。

<style>
   [v-cloak] {display: none;}
</style>

<div id="app" v-cloak>
    <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女
    {{gender}}
</div>

v-once ，希望这个值只用第一次的，只渲染一次。

当数据再次发生变化，也不会导致页面刷新。

<div v-once>
    {{msg}}
</div>

v-html，把html字符串当做html渲染。

<div v-html="p"></div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            p: '<p style="color:red;">hello</p>'
        }
    })
</script>

二、数据响应的变化

使用变量时，先要初始化。

否则新加的属性不会导致页面刷新。

<div id="app">
    {{a.school}}
</div>

<script>
    // vue会循环data中的数据(数据劫持)
    // 依次的增加getter 和 setter
    let vm = new Vue({
        el: '#app',
        data: {
            a: {school: ''}
        }
    })

    // 使用变量时，先要初始化，否则新加的属性不会导致页面刷新
</script>

控制台console

vm.a.school = '1'

vm.$set(); // 此方法可以给对象添加响应式的数据变化。可以给对象新增属性。

vm.$set(vm.a, 'school', 1);

另一种方法：

替换原来的对象

vm.a = {school:'zfpx', age:8, address: 'xxx'};

三、数组

取数组中的某一项

<div id="app">
    {{arr[1]}}
    {{arr}}
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            arr: [1,2,3,4,5]
        }
    });
</script>

如果要改数组

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4, 5]
        }
    });

    // 使用变异方法： pop push shift unshift sort reserve splice， 都可以
    vm.arr.reverse();

    // map 和 filter 也可以改变数组
    vm.arr = vm.arr.map(item => item *= 3);
</script>

VUE基础知识3：基础指令

猜你喜欢