一分钟学会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方法不同,每次调用该方法的时候,都会重新执行的。