模板

特别声明一： 本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，讲师汤小洋，跳转链接见文末。

特别声明二： 本文核心内容全部来自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，本人只是照着视频课程敲了一遍代码，所以本文定义为翻译。

---

模板的概念：

        Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。即：模板的主要用于将DOM与Vue实例之间进行数据绑定。

---

数据绑定的相关概念：

• 双向绑定：
          vue实例中的数据发生变化，对应DOM中的数据也会跟着变化；DOM中的数据发生变化，对应vue实例中的数据也会跟着变化。

• 单向绑定：
          vue实例中的数据发生变化，对应DOM中的数据也会跟着变化；而DOM中的数据发生变化，对应vue实例中的数据不会跟着变化。

---

数据绑定的实现方式：

双向绑定的实现：使用v-modle。

• 示例：
  
• 使用chrome打开，效果如图：
  

单向绑定的实现：使用{{}}或v-text或v-html。

• 使用{{}}：

  1. 提示：使用{{}}绑定数据时，可能会出现闪烁问题(即：在加载页面时，若vue编辑较慢，则会会直接将{{…}}显示出来，然后等vue编译完后，才会显示对应的信息)；为了解决:使用{{}}绑定时的闪烁问题，可以让{{}}配合用v-cloak和css样式一起使用。
     注：闪烁问题可见下面的操作示例，{{}}配合用v-cloak和css的使用方式可见下面的代码示例。
  2. 示例：
     
  3. 使用chrome打开，效果如图：
     

• 使用v-text：

  1. 示例：
     
  2. 使用chrome打开，效果如图：
     

• 使用v-html：

  1. 示例：
     
  2. 使用chrome打开，效果如图：
     

---

^_^ 如有不当之处，欢迎指正

^_^ 学习整理自
        51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师 汤小洋

^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng