一分钟学会Vue
一、Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容ECMAScript5的浏览器。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
获取vue.js：
1)、去vue2官网或git下载，地址： https://github.com/vuejs/vue
2)、使用cdn
3)、安装node.js，使用npm获取，具体的安装细节： https://cn.vuejs.org/v2/guide/installation.html
二、使用例子
引入vue.js文件
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({ // 选项 })
vue定义data数据，进行声明式渲染：例子：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue2介绍</title> </head> <body> <div id="app1"> {{message}} </div> <div id="app2"> <span v-bind:title="message"> 把鼠标放到这里试试 </span> </div> <!--引入vue.js--> <script src="../js/common/vue.js"></script> <script type="text/javascript"> //vue应用对象 var app1 = new Vue({ el: "#app1",//绑定使用对象 data: { message: "Hello Vue2!" } }); // 我们的数据对象 var data = {message: "页面加载时间是：" + new Date().toLocaleDateString()} //vue应用对象 var app2 = new Vue({ el: "#app2", data: data // 该对象被加入到一个 Vue 实例中 }); </script> </body> </html>
vue在标签中加入不少的属性，其中我整理了一点，具体的看官方文档
v-text ：传递文本：
v-html：传递HTML标签
v-once：只渲染元素和组件一次，之后重新渲染，该元素和组件均会被视作静态内容跳过。
v-if：判断，条件为true
v-show：是否显示标签，为false时标签为display：none
v-else：判断，条件为false时
v-for：循环
v-on：绑定事件的 如：v-on:click 绑定点击事件
v-bind：传递属性值，绑定属性，也可以写为“:”
v-model：绑定value值
v-ref：获取到整个组件（component）的对象
v-el：获取到DOM对象
v-pre：跳过某元素和他的子元素的编译，可以用来显示原始Mustache标签
v-cloak：使某元素保持某种指定行为，直到与该元素相关的实例编译结束。
v-on:click：绑定点击事件
v-on:keyup.enter：监听回车事件
v-on:keyup：监听键盘事件
v-on:.delete：监听删除键
@click：@和v-on是一个意思，@click绑定点击事件
@change：绑定选择事件，一搬用于下拉框
number：输入值转为数值类型 v-model.number
debounce
transition
:is
v-bind:title：绑定标签的title属性
v-text：例子
<p id="test" v-text="'我叫'+student.name+'，今年'+student.age+'岁'"></p> <script type="text/javascript"> var app1= new Vue({ el : "#test", data : { student : { name : "小明", age : 18 } } }); </script>
结果：我叫小明，今年18岁
vue组件或者实例中，不管是生命周期钩子函数created还是自定义函数plus，他们中的this都是指当前vue实例。
三、Vue生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
比如 created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } })
也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.＄watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
Vue生命周期视图
1、beforeCreate
在vue实例初始化之后，还没有被创建成功，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2、created
vue实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，＄el 属性目前不可见。
可以在组件的这个期间请求数据，如果是keep-alive组件会被缓存起来，生命周期不会再次触发，如果需要更新数据可以watch当前router变化，如果router是当前组件所在的router则请求数据。
3、beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
4、mounted
vm.＄el已挂载在文档内，对已有dom节点的操作可以在这期间进行。
5、 beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
6、updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
7、activated
keep-alive 组件激活时调用。
8、deactivated
keep-alive 组件停用时调用。
9、beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
10、destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app1"> <input v-model="msg" /> {{msg}} </div> <button type="button" onclick="destroy()">销毁</button> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app1 = new Vue({ el: "#app1", data:{ msg:"我是data数据" }, beforeCreate:function(){ console.log("Vue实例创建前："+this.$el); console.log("data数据："+this.msg); }, created:function(){ console.log("Vue实例创建后："+this.msg); console.log("data数据："+this.msg); }, beforeMount:function(){ console.log("挂载前："+this.$el); console.log("data数据："+this.msg); }, mounted:function(){ console.log("挂载后："+this.$el); console.log("data数据："+this.msg); }, beforeUpdate:function(){ console.log("实例更新前："+this.$el); console.log("data数据："+this.msg); }, updated:function(){ console.log("实例更新后："+this.$el); console.log("data数据："+this.msg); }, beforeDestroy:function(){ console.log("实例销毁前："+this.$el); console.log("data数据："+this.msg); }, destroyed:function(){ console.log("实例销毁后："+this.$el); console.log("data数据："+this.msg); } }); function destroy(){ app1.$destroy(); } </script> </body> </html>
运行结果：
在文本框输入内容进行修改：
点击销毁按钮
四、方法、处理用户输入计算、监听data数据变化
一般我们用v-on进行对标签的绑定事件，实现用户进行交互。绑定事件的方法我们要写到一个集合里面：methods
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app1"> <input v-model="msg" /> {{msg}} <br/> <button type="button" v-on:click="show">调用方法</button> <button type="button" @click="upMsg">修改msg</button> </div> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app1 = new Vue({ el: "#app1", data:{ msg:"我是data数据" }, methods:{ show:function(){ console.log("我被执行了"); }, upMsg:function(){ this.msg = "我被修改了";
console.log(this.msg);
} } }); </script> </body> </html>
结果：
方便处理data数据的计算：computed
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> input{ width: 30px; height: 30px; padding: 5px; border: 1px solid #000; outline:none; text-align: center; } </style> </head> <body> <div id="app1"> <input type="text" v-model="i"/> + <input type="text" v-model="n"/> = <input type="text" v-model="sum" /> </div> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app1 = new Vue({ el: "#app1", data:{ i:0, n:0 }, computed:{ sum:function(){ return parseInt(this.i) + parseInt(this.n); //parseInt 数据类型转换 } } }); </script> </body> </html>
运行结果：
监听data数据变化：watch
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app1"> <input type="text" v-model="i"/> {{i}} <input type="text" v-model="n.name"/> {{n.name}} </div> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app1 = new Vue({ el: "#app1", data:{ i:0, n:{ name:"张三" } }, watch:{ //普通的watch监听 i(val,oldval){ console.log("新值"+val); console.log("旧值"+oldval); }, //深度监听，可监听到对象、数组的变化 n:{ handler(val, oldVal){ console.log("n.name: "+val.name, oldVal.name);
console.log(val.name === oldVal.name);//但是这两个值为true }, deep:true } } }); </script> </body> </html>
运行结果：
但是我们的深度监听好像出了问题，val值和oldVal值是一样的。
因为：这样就只能知道对象发生变化却不知道具体哪个值发生了变化
如果想监听对象某一个值得变化可以利用计算属性：computed
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app1"> <input type="text" v-model="i"/> {{i}} <input type="text" v-model="n.name"/> {{n.name}} </div> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app1 = new Vue({ el: "#app1", data:{ i:0, n:{ name:"张三" } }, watch:{ //普通的watch监听 i(val,oldval){ console.log("新值"+val); console.log("旧值"+oldval); }, //这里监听计算方法函数 newValue(val,oldval){ console.log("data数据对象的原值："+oldval); console.log("data数据对象的新值："+val); } }, computed:{ newValue() { return this.n.name } } }); </script> </body> </html>
运行结果：
小结：
computed是计算属性的，methods是计算方法的，最主要的区别是 computed计算属性可以对
属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值，只要值没有改变，它是不会重新渲染的，但是methods方法不同，每次调用该方法的时候，都会重新执行的。
