介绍
一、Vue.js是什么
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
二、起步
尝试Vue.js最简单的方法是使用JSFiddle 上的 Hello World 例子。我们可以在浏览器新标签页中打开它，或者创建一个.html文件，然后通过如下方法引入Vue:
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
三、声明式渲染
1. Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <!--模板语法--> <h2>{{ msg }}</h2> <h3>{{ 'hhahda' }}</h3> <h3>{{ 1+1 }}</h3> <h4>{{ {'name':'alex'} }}</h4> <h5>{{ person.name }}</h5> <h2>{{ 1>2? '真的': '假的' }}</h2> <p>{{ msg2.split('').reverse().join('') }}</p> <div>{{ text }}</div> </div> <!--1.引包--> <script src='./vue.js'></script> <script> //2.实例化对象 new Vue({ el:'#app', //绑定那块地 data:{ //数据属性 种子 msg:'黄瓜', person:{ name:'wusir' }, msg2:'hello Vue', text:'<h2>日天</h2>' } }); </script> </body> </html> ----------------------- 结果 ----------------------------- 黄瓜 hhahda 2 { "name": "alex" } wusir 假的 euV olleh <h2>日天</h2>
上面就是我们创建的一个Vue应用，看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有的东西都是响应式的。要怎么确认呢，打开浏览器的JavaScript控制台，并修改app.message的值，我们将看到上例相应的更新。
2. 指令系统之 v-bind
作用：用来绑定元素特性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> <script src="vue.js"></script> <script> new Vue({ el:"#app-2", data() { return { message:"页面加载于" + new Date().toLocaleString() } }, }) </script> </body> </html>
结果：
说明：
我们看到的 v-bind 特性被称为指令。指令带有前缀 v- ,以表示它们是Vue提供的特殊特性。可能已经猜到，它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是：将这个元素节点的 title 特性和 Vue实例的 message 属性保持一致。
如果我们再次打开浏览器的JavaScript控制台，输入 app2.message = '新消息' ,就会再一次看到这个绑定了 title 特性的HTML已经进行了更新。
四、条件与循环
1. 指令系统 v-if
作用：用于判断，返回值为布尔值
例如：
控制切换一个元素是否显示也相当简单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app-3"> <p v-if="seen"> 现在你看到我了 </p> </div> <script src="vue.js"></script> <script> var app3 = new Vue({ el:"#app-3", data() { return { seen:true, } }, }) </script> </body> </html> ----------------------- 结果 ----------------------------- 现在你看到我了
继续在控制台输入 app3.seen = false，就会发现之前显示的消息消失了。
这个例子演示了我们不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。此外，Vue也提供了一个强大的过度效果系统，可以在Vue插入、更新、移除元素时自动应用过渡效果。
2. 指令系统之 v-for
作用：v-for指令可以绑定数组的数据来渲染一个项目列表。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script src="vue.js"></script> <script> var app4 = new Vue({ el:"#app-4", data() { return { todos:[ { text:"linux" }, { text:"python" }, { text:"go" }, ] } }, }) </script> </body> </html>
结果：
1.linux
2.python
3.go
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
五、处理用户输入
为了让用户和我们的应用进行交互，我们可以用 v-on 指令添加一个事件监听器。
1. 指令系统之 v-on
作用：添加一个事件监听器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转该消息</button> </div> <script src="vue.js"></script> <script> var app5 = new Vue({ el:"#app-5", data() { return { message:"Holle world" } }, methods:{ reverseMessage:function () { this.message = this.message.split("").reverse().join("") } } }) </script> </body> </html>
结果：
Holle world
dlrow elloH
注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，我们编写的代码只需要关注逻辑层面即可。
Vue还提供了 v-model 指令，它能够轻松实现表单输入和应用状态之间的双向绑定。
2. 指令系统之 v-model
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <script src="vue.js"></script> <script> var app5 = new Vue({ el:"#app-6", data() { return { message:"Holle world" } }, }) </script> </body> </html>
结果：
六、组件化应用构建
组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组件很简单：