程序员都必掌握的前端教程之VUE基础教程（一）
本篇文章成哥继续带大家来学习前端教程之VUE，它是一个前端框架具有高效、简单及易用等特点。下面我们就一起来学习内容吧！
01 VUE简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
该框架的作者是一位中国人叫尤雨溪，毕业于上海复旦附中，在美国完成大学学业，本科毕业于上 Colgate University，后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位，任职于纽约 Google Creative Lab。
目前作者以技术顾问的身份加入了阿里巴巴的 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。
02 VUE安装
VUE可以像我们之前jQuery教程一样将VUE.js下载下来进行引用，也可以通过CDN方式引用，还可以通过VUE-CLI来安装（VUE-CLI需要通过NPM安装，在后面的教程中成哥将专门推出一篇NPM入门教程，在这边就不详细讲解了），在这边我们登陆到VUE官网来下载VUE.js然后进行引用，具体操作如下：
1.登陆VUE官网下载vue.js文件
2.在HTML文件中引用vue.js文件
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset='UTF-8'> 5. <title>VUE基础教程</title> 6. <!-- 引用vue.js文件 --> 7. <script src='vue.js'></script> 8. </head> 9. <body> 10. 11. </body> 12. </html> 03 VUE使用
（1）VUE实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
1. var vm = new Vue({ 2. // 选项 3. })
当创建一个 Vue 实例时，你可以传入一个选项对象，下面我们就来看看怎么通过实例将选项对象渲染在页面的
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset='UTF-8'> 5. <title>VUE基础教程</title> 6. <!-- 引用vue.js文件 --> 7. <script src='vue.js'></script> 8. </head> 9. <body> 10. <!-- 这边的{{msg}}中的msg就是变量,vue会根据变量名到data数据对象中找到其对应的值然后渲染 --> 11. <div id='app'>{{msg}}</div> 12. <script> 13. var vm = new Vue({ 14. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 15. data: { // 数据对象 16. msg: 'hello vue' // 定义变量值 17. } 18. }) 19. </script> 20. </body> 21. </html> 上述代码渲染结果如下
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行代码
1. new Vue({ 2. data: { 3. a: 1 4. }, 5. created: function () { 6. // `this` 指向 vm 实例 7. console.log('a is: ' this.a) 8. } 9. }) 10. // 在实例创建后会输出'a is: 1'
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。VUE实例的整个生命周期如下图所示
（2）模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
1）插值
a.文本
数据绑定最常见的形式就是使用'Mustache'语法 (双大括号) 的文本插值：
1. <span>Message: {{ msg }}</span> Mustache 标签将会被替代为对应数据对象上 msg对应的值。无论何时，绑定的数据对象上 msg值发生了改变，插值处的内容都会更新。通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定
1. <span v-once>这个将不会改变: {{ msg }}</span>
b.原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令，示例如下
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset='UTF-8'> 5. <title>VUE基础教程</title> 6. <!-- 引用vue.js文件 --> 7. <script src='vue.js'></script> 8. </head> 9. <body> 10. <div id='app'> 11. <!-- 这边没有用v-html所以标签渲染出来直接是文本 --> 12. <p>{{msg}}</p> 13. <!-- 这边使用了v-html所以渲染初始是标签 --> 14. <p v-html='msg'></p> 15. </div> 16. <script> 17. var vm = new Vue({ 18. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 19. data: { // 数据对象 20. msg: '<h4>我是h4标签</h4>' // 定义变量值 21. } 22. }) 23. </script> 24. </body> 25. </html> c.属性
双大括号语法不能作用在 HTML标签属性上，需要对标签属性操作，应该使用 v-bind 指令
1. <div v-bind:id='dynamicId'></div>
现在通过v-bind来演示HTML标签属性的设置
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset='UTF-8'> 5. <title>VUE基础教程</title> 6. <!-- 引用vue.js文件 --> 7. <script src='vue.js'></script> 8. </head> 9. <body> 10. <div id='app'> 11. <!-- 这边将button的disabled属性值绑定到isButtonDisabled变量，如果为true那按钮将变灰禁止点击 --> 12. <button v-bind:disabled='isButtonDisabled'>点我</button> 13. </div> 14. <script> 15. var vm = new Vue({ 16. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 17. data: { // 数据对象 18. isButtonDisabled: true 19. } 20. }) 21. </script> 22. </body> 23. </html> d. javascript 表达式
上面，我们只进行了绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
1. {{ number 1 }} 2. 3. {{ ok ? 'YES' : 'NO' }} 4. 5. {{ message.split('').reverse().join('') }} 6. 7. <div v-bind:id=''list-' id'></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
1. <!-- 这是语句，不是表达式 --> 2. {{ var a = 1 }} 3. 4. <!-- 流控制也不会生效，请使用三元表达式 --> 5. {{ if (ok) { return message } }} 2）指令
指令 (Directives) 是带有v-前缀的特殊特性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
a.参数
一些指令能够接收一个'参数'，在指令名称之后以冒号表示，下面我们通过v-on指令来演示动态改变DOM中渲染的值
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset='UTF-8'>
5. <title>VUE基础教程</title>
6. <!-- 引用vue.js文件 -->
7. <script src='vue.js'></script>
8. </head>
9. <body>
10. <div id='app'>
11. <p>{{msg}}</p>
12. <button v-on:click='changeContent'>点我改变上面页面内容</button>
13. </div>
14. <script> 15. var vm = new Vue({ 16. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上 17. data: { // 数据对象 18. msg: '我还没变' 19. }, 20. methods: { 21. // v-on是绑定的方法所以在这边要创建一个click的方法事件changeContent 22. changeContent(){ 23. // 当被点击后对msg进行重新赋值 24. this.msg = '我被改变了' 25. } 26. } 27. }) 28. </script>
29. </body>
30. </html>
b. 动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
1. <a v-bind:[attributeName]='url'> ... </a> 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 'href'，那么这个绑定将等价于 v-bind:href。同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
1. <a v-on:[eventName]='doSomething'> ... </a>
在这个示例中，当 eventName的值为 'focus' 时，v-on:[eventName]将等价于 v-on:focus。
c. 修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定, 例如.prevent 修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()
1. <form v-on:submit.prevent='onSubmit'>...</form>
3）指令缩写
v- 是 Vue.js 中特定的标志，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助，但是频繁使用到，也会让人感觉不到代码的简洁之道，就会感到不是太人性化。同时，在构建由 Vue 管理所有模板的单页面应用程序时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写，具体如下
a.v-bind缩写
1. <!-- 完整语法 --> 2. <a v-bind:href='url'>...</a> 3. 4. <!-- 缩写 --> 5. <a :href='url'>...</a> 6. 7. <!-- 动态参数的缩写 (2.6.0 ) --> 8. <a :[key]='url'> ... </a> b.v-on缩写
1. <!-- 完整语法 --> 2. <a v-on:click='doSomething'>...</a> 3. 4. <!-- 缩写 --> 5. <a @click='doSomething'>...</a> 6. 7. <!-- 动态参数的缩写 (2.6.0 ) --> 8. <a @[event]='doSomething'> ... </a>
它们看起来可能与普通的 HTML 略有不同，但:与@对于attribute名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。
04 总结
至此我们《VUE基础教程一》就讲完了，下篇内容主要讲解VUE的计算属性与监听器等相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-