vue.js循环html文本,Vue.js 指令 v-html v-cloak v-pre v-once

指令(Directives)是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上

HTML：

Hello!

这里，v-if指令将根据表达式greeting值得真假  删除/插入p元素

JS：var vm1=new Vue({

el:'#test01',

data:{

greeting:false

}

});

当greeting取值为false时，查看页面效果和控制台

当greeting取值为true时，查看页面效果和控制台

这里需要注意的是，v-if="greeting"不能用于根元素之上，也就是说必须用于某一元素的子元素之上，否则，控制台就会报错"[Vue warn]: v-if="greeting" cannot be used on an instance root element."

查看错误示例：

HTML:

Hello!

JS:var vm=new Vue({

el:'p',

data:{

greeting:true

}

});

控制台错误提示：

有些指令可以在其名称后面带一个”参数“(Argument)，中间放一个冒号隔开。例如：v-bind指令用于响应地更新HTML特性

HTML：v-bind链接

这里href是参数，它告诉v-bind指令将元素的href特性跟表达式url的值绑定

JS：var vm2=new Vue({

el:'#test02',

data:{

url:'http://cn.vuejs.org/'

}

});

v-on指令用于监听DOM事件

HTML:

`message`

Reverse Message

JS:var vm3=new Vue({

el:'#test03',

data:{

message:'颠倒字体顺序'

},

methods:{

reverseMessage:function(){

//console.log(this)  this指代div#test03

this.message=this.message.split('').reverse().join('')

}

}

});

v-model指令实现双向数据绑定

这个指令只能用在, ,这些表单元素上，所谓双向数据绑定，指的就是在JS实例中的data与其渲染的dom元素上的内容保持一致，二者任何一个被改变，另一个也会相应的更新为相同的内容，这是通过属性访问器实现的。

HTML：

`message`

JS：var vm4=new Vue({

el:'#test04',

data:{

message:'双向数据绑定'

}

});

v-for列表渲染，用作循环遍历，类似ng中的ng-repeat

HTML：

• `todo`.`text`

JS：var vm5=new Vue({

el:'#test05',

data:{

todos:[

{text:'Learn JavaScript'},

{text:'Learn Vue.js'},

{text:'Learn Angular.js'}

]

}

});

再来两个综合的例子回顾下以上几个指令的用法

HTML：

• `todo`.`text`

  X

JS：var vm=new Vue({

el:'#zongHe',

data:{

newTodo:'',

todos:[

{text:'add some todos'}

]

},

methods:{

addTodo:function(){

var text=this.newTodo.trim();

if(text){

this.todos.push({text:text}),

this.newTodo=''

}

},

removeTodo:function(index){

this.todos.splice(index,1)

}

}

});

HTML:

`msg`

{{checked ? "yes" : "no"}}

`picked`

one

two

`selected`

one

two

three

`multiSelect`

data: {{$data | json 2}}

JS:var demoVm=new Vue({

el:'#demo',

data:{

msg:'hi!',

checked:true,

picked:'one',

selected:'two',

multiSelect:['one', 'three']

}

});

查看页面截图效果：

v-text

v-text 指令可以更新元素的文本内容，文本内容既可以放在 双大括号标签里面，也可以通过 v-text 放在标签内部。区别是放在 v-text 里面在页面加载时不会看到 双大括号 闪烁

示例代码：

`msg`

---

var vm = new Vue({

el:'#app',

data:{

msg:'页面上有双大括号闪烁吗？'

}

})

页面刚加载时：(用户会看到双大括号标签)

页面加载完毕：

v-html

v-html 指令可以更新元素的innerHTML，也就是说可以解析并执行HTML代码，与{` `}三大括号标签功能一致。

注意：不建议在网站上直接动态渲染任意HTML 片段，很容易导致XSS***。

var vm = new Vue({

el:'#app',

data:{

msg: 'Hello World!'

}

})

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

简单说，就是防止页面未加载完成时，显示双大括号标签，我们在打开Vue页面时，经常看到类似的界面

用户看到 `msg` 是非常不好的一种体验，因此，我们可以借助 v-cloak指令解决这个问题html>

[v-cloak]{

display:none;

}

`msg`

var vm = new Vue({

el:'#app',

data:{

msg: 'Hello World!'

}

})

页面刚刷新：(页面是一片空白，什么都没有，也看不到双大括号标签在页面闪烁)

页面加载完毕：

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

这个就完全类似 {{*msg}}标签，直接看一段官网提供的示例代码，此处不单独举例

This will never change: `msg`

comment

`msg`

• `i`

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

代码示例如下：

{{ this will not be compiled }} + `msg`

var vm = new Vue({

el:'#app',

data:{

msg: 'Hello World!'

}

})

注意看控制台，这个可没有报错哦