介绍
参考:Vue官方文档
什么是Vue?
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,即采用MVVM设计模式,可以参考我的另一篇博文:MVVM与MVP设计模式
兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
引入
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
=>或者下载vue.js后引入
当然也可以使用脚手架工具:
#全局安装vue-cli,参考官网:https://cli.vuejs.org/zh/guide/installation.html
$cnpm install webpack -g (建议安装时使用cnpm,成功率高)
$npm install -g @vue/cli-init(如果不加init就无法建立node_moduels文件夹)
#创建一个基于webpack模板的新项目
$ vue init webpack my-project
#安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm=new Vue({
el:'#app',
=>el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
=>可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
data:{
message:'I am Vue';
}
=>data是Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,
=>从而让 data 的属性能够响应数据变化
})
生命周期函数
生命周期函数就是Vue实例在某一个时间点会自动执行的函数
(可以查看官方文档的生命周期函数图示)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue生命周期函数</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm=new Vue({
el:'#app',
template:"<div>{{test}}</div>",
data:{
test:'hello'
},
=>生命周期函数并不放在methods里
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
=>此时实例的初始化完成
=>当Vue实例没有模板template时,会把el,即app的div整体当作模板来渲染
=>没有模板等价于:template:'<div>hello</div>'
beforeMount:function(){
console.log(this.$el);
console.log('beforeMount');
},
=>beforeMount执行时页面还没有被渲染
mounted:function(){
console.log(this.$el);
console.log('mounted');
},
=>mounted执行时页面被渲染
beforeDestroy:function(){
console.log('beforeDestroy');
},
=>组件即将被销毁时执行
destroyed:function(){
console.log('destroyed');
},
=>组件被完全销毁时执行
beforeUpdate:function(){
console.log(this.$el);
console.log('beforeUpdated');
},
=>数据发生改变,没有被渲染之前执行
updated:function(){
console.log(this.$el);
console.log('updated');
}
})
</script>
</body>
</html>
在创建此Vue实例后,在控制台会自动执行这些函数
模板语法
1. 插值
文本:使用 {{...}}(双大括号)的文本插值
<div>Message: {{ msg }}</div>
html:使用 v-html 指令。下面的例子渲染为<div> <div> <h1>hello</h1> </div> </div>
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>hello</h1>'
}
})
</script>
HTML 属性中的值应使用 v-bind 指令
<div v-bind:id="dynamicId"></div>
表达式:Vue.js支持JavaScript表达式
<div id="app">{{ ok ? 'YES' : 'NO' }}</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
}
})
</script>
2. 指令
本人太懒,直接学习了官方文档:Vue模板语法-指令
计算属性和侦听器
1. 计算属性
Eg:
<div id="app">{{fullName}} {{age}}</div>
var vm=new Vue({
el:'#app',
data:{
firstName:"Dell",
lastName:"Lee",
age:20
},
computed:{
fullName:function(){
console.log('执行计算功能');
=>可以像绑定普通属性一样在模板中绑定计算属性
return this.firstName+' '+this.lastName;
}
}
})
绑定属性:fullName
始终依赖于firstName,this.lastName
缓存机制:仅仅修改age
不会调用计算属性的function。而如果在methods中定义一个方法执行同样的功能后,即使仅修改age,也会重新执行该方法。
2. 侦听属性
观察和响应 Vue 实例上的数据变动。与计算属性一样,也存在缓存机制
var vm=new Vue({
el:'#app',
data:{
firstName:"Dell",
lastName:"Lee",
fullName:'Dell Lee',
age:20
},
=>当firstName和lastName有一个变化时,都要对fullName做出响应
watch:{
firstName: function () {
console.log('执行该方法');
return this.firstName+' '+this.lastName;
},
lastName: function () {
console.log('执行该方法');
return this.firstName+' '+this.lastName;
}
}
})
相对来说,侦听器方法实现起来较计算属性复杂,而且自定义方法不存在缓存机制,因此,当某个功能可以用自定义方法、计算属性、侦听器实现时,推荐使用计算属性,既简洁性能又好。
关于侦听器,也可以使用命令式的 vm.$watch API
,我的另外一篇博客:Vue之vm.$watch理解
3. getter与setter
计算属性默认只有 getter ,在需要时也可以提供一个 setter
computed:{
fullName: {
get:function () {
return this.firstName+' '+this.lastName;
},
set:function (value) {
var ary=value.split(' ');
this.firstName=ary[0];
this.lastName=ary[1];
}
}
}
当fullName所依赖的值改变时,都会调用get方法;而fullName自身改变时,会调用get和set方法,使其依赖项也发生变化