一.简介
Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Anglar来说也更加易学，而且它的作者是国人，中文文档也很完善。
二.Vue基本概念
1.单文件
首先，我们来抛开那些复杂的框架配置，先从单文件开始学习Vue最基本的内容。这里引用了Vue框架的CDN，所以不需要任何配置即可使用Vue。
浏览器打开如下：
2.Vue实例
Vue框架中最重要的东西就是Vue实例，它是Vue框架的核心对象。在创建Vue实例时需要传入一些参数，el参数是Vue实例的作用范围；data参数是Vue实例使用的数据。在Vue实例对应的元素中，我们可以使用模板语法{{var}}来使用这些数据。
显示效果：
三.模板语法
1.文本插值
文本需要写在两对花括号之间。当然这里其实不止可以写单个变量，还可以写组合表达式，例如{{text + new Date()}}。
所有在构造Vue实例时传入的数据都是可响应的，也就是说只要数据发生改变，那么视图的数据也会发生改变。如果希望数据不发生改变，需要使用v-once指令。所有v-开头的都是Vue独有的指令，这些指令将在后面介绍。
效果如下：
2.HTML插值
有时候需要操作原始HTML，Vue也提供了支持。要插入的HTML代码需要使用v-html指令来指定，这个指令会将它所在的HTML代码块整个替换为要插入的HTML块。由于可能导致XSS攻击，所以最好不要随便替换HTML块。另外要替换HTML块的话只能使用v-html指令，如果使用前面的文本插值的话，插入的只是一段文本。
3.属性
文本插值只能插入文本，如果需要设置和修改HTML属性的话，需要使用v-bind指令。
效果：
4.计算属性
有时候程序逻辑比较复杂，可能需要对一个数据进行一些计算和处理。这时候就需要计算属性了。当然由于模板语法支持表达式，所以也可以直接在{{}}中编写表达式，但是不管从可读性还是可维护的角度来说，计算属性都是更好的选择。
计算属性需要在构造Vue实例的时候传入computed属性，然后在相应的函数中处理复杂逻辑。计算属性可以向普通属性那样在视图中使用。计算属性有个优点就是惰性求值，下面的例子中，toUpper计算属性依赖于words属性，只要words不发生改变，那么多次访问toUpper不会重新计算，而是会使用已有的结果。只有当words发生变化时，toUpper才会相应改变。
效果：
