vue-指令

1 v-pre

跳过该元素及其子元素的后面的渲染，显示的初始值{{}}

 

	 

            

            {{ name }}
            
	 
 
 

当我们不使用 v-pre时页面显示的数据就是hwc 但是当我们使用v-pre后他就跳过了该元素及其子元素的后面的渲染，显示的初始值

2 v-once

只会渲染一次,vue是组件化的，每一块都是一个组件，vue会进行一次缓存，后面所用到的内容都是缓存中的值

{{ name }}
 
{{ name }}

此时页面显示的内容就是

但是当我们在控制台改变name时 上面的就不会改变

3 v-html

innerHTML 这个html片段一定是被处理过的，值得被信任的，公司中不会用，因为能够被信任代码很少 避免xss跨站脚本攻击

var vm = new Vue({
            el:"#app",
            data:{
                name : "xiaoqiang",
                dom : "
vue
",
            }
        })

页面显示结果

与他类似的还有一个v-text innerText他是加入文字

4 v-if

控制元素是否存在

            
hwc

var vm = new Vue({
            el:"#app",
            data:{
                name : "xiaoqiang",
                dom : "
vue
",
                flag : true
            }
        })

当flag为true时页面中就显示 该盒子

当设置为false就消失了
与他一起配对的还有 v-else 跟js中的if else 是相同的 一组必须是连续的，中间不能有插足者

    
hwc
 

    
18

当上面为false时才会显示下面盒子

template

模板可以减少dom的渲染次数

如果每次放入一个div像这样放入三次 就是渲染了三次 但是把它放在template中 之后渲染一次

v-show

这个跟v-if一样控制元素消失和现实 但是他俩有区别：
1.v-show是控制样式display:none,v-if是直接控制元素的是否存在
2.v-if如果初始条件为flase则连编译都没有
3.v-sho不支持template标签