v-text与{{ }}、v-html的区别、v-bind指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:

• v-text
• {{ }}
• v-html

1.v-text

 用法示例:

<!-- 把username 对应的值，渲染到第一个p标签中,username是对应data里的属性 -->
<p v-text= "username"></p>

<!--- 把gender 对应的值，渲染到第二个p标签中-->
<!--注意:第二个p标签中，默认的文本“性别”会被gender 的值覆盖掉
<p v-text="gender">性别</p>

注意: v-text 指令会覆盖元素内默认的值。

2. {{ }}语法

vue提供的{{ }}语法,专门用来解决v-text会覆盖默认文本内容的问题。这种{{ }}语法的专业名称是插值表达式(英文名为: Mustache) 。

<!--使用{{ }}插值表达式，将对应的值渲染到元素的内容节点中，--> 
<!-- 同时保留元素自身的默认值-->
<p>姓名: {{username}}</p> 
<p>性别: {{gender}}</p>

 页面渲染效果:

3. v-html 

 v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令:

<!-- 假设data 中定义了名为discription 的数据，数据的值为包含HTML 标签的字符串: -->
<!-- '<h5 style="color: red;">我在黑马程序员学习vue.js 课程。</h5>' -->

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

 例：

 页面渲染效果：

内容渲染指令总结：

1.  v-text指令的缺点:会覆盖元素内部原有的内容!
2. {{ }}插值表达式:在实际开发中用的最多，只是内容的占位符,不会覆盖原有的内容!
3. v-html指令的作用:可以把带有标签的字符串，渲染成真正的HTML内容!

属性绑定指令

 给属性动态绑定值，则使用v-bind 指令，使用如下：

 页面显示如下：

 v-bind 指令可以简写为 ： （冒号）

在属性和插值绑定中编写js语句

使用Javascript表达式
      在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript表达式的运算，例如: 

 在使用v-bind属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例：（下面结果是title标签的值是 box3,因为data里的index=3）

<div :title=" 'box'+ index">这是一个div</div>  

属性绑定指令总结：

注意:插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中!
在vue中，可以使用v-bind:指令，为元素的属性动态绑定值;|
简写是英文的 :(冒号)