一、创建第一个vue实例
1.引入vue.js
<script src="./vue.js"></script>
2.创建实例
a.通过el
属性确定挂载点(即页面dom对象)
b.data
属性设置数据
<head>
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">{{name}}</div>
<script>
var vm = new Vue({
el: '#root',
data: {
name: 'Schuyler'
}
});
</script>
</body>
二、模板
1.模板内容是指挂载点内部的内容
<div id="root"><h1>hello {{msg}}</h1></div>
2.模板也可以放在实例的tamplate
属性中,如
template: '<h1>hello {{msg}}</h1>'
此时不需要再在挂载点中读取数据
<div id="root"></div>
<script>
new Vue({
el: '#root',
template: '<h1>{{msg}}</h1>',
data: {
msg: 'hello vue'
}
});
</script>
三、数据的使用
1.插值表达式{{}}
:<div id="root">{{msg}}</div>
2.v-text
属性:<div v-text="msg"></div>
会将msg中的标签转义为字符串
3.v-html
属性:<div v-html="msg"></div>
将msg中的标签当正常标签使用
<div id="root">
<div v-html="msg"></div>
</div>
<script>
new Vue({
el: '#root',
data: {
msg: '<h1>hello vue</h1>'
}
});
</script>
四、方法与事件
vue中的方法写在实例的methods
属性中,如
methods: {
handleClick: function() {
this.msg= "world"';
}
}
事件的触发可以在标签中使用v-on
属性来绑定,如
<div id="root" >
<div v-on:click="handleClick">{{msg}}</div>
</div>
也可以用简略形式@click
<body>
<div id="root" >
<div @click="handleClick">{{msg}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
msg: 'hello vue'
},
methods: {
handleClick: function() {
this.msg= "world";
}
}
});
</script>
</body>
五、属性绑定与双向数据绑定
可以通过v-bind
指令进行属性的绑定,绑定后,属性的值相当于js的表达式,其对象为实例中data
属性的值,v-bind:
指令可简写为:
可以通过v-model
指令进行双向数据绑定
<div id="root">
<div :title="'标题:'+title">hello world</div>
<input type="text" v-model="msg"/><br/>
{{msg}}
</div>
<script>
new Vue({
el: '#root',
data: {
msg: 'model',
title: 'this is title'
}
});
</script>
六、计算属性与侦听器
1.通过在Vue实例中设置computed
属性,来得到计算属性,computed
属性的值是一个对象,对象中是一个返回计算值的函数。计算属性中有缓存的概念,经过第一次计算后,会将计算结果缓存起来,下次使用时,如果计算涉及的属性没有发生变化,就直接使用缓存的结果而不会再次进行计算,因此可以提高性能
在下面例子中可以看到,当第一次加载页面时控制台会打印出“经过一次计算”,然后刷新或者在控制台中输入vm.age = 27
时,不会再打印,当输入vm.firstName = "ok"
时则会再次打印
<body>
<div id="root">
{{fullName+" "+age}}
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
firstName: 'Schyler',
lastName: 'Cai',
age: 28
},
computed: {
fullName: function () {
console.log("经过一次计算");
return this.firstName+" "+this.lastName;
}
}
});
</script>
</body>
此外,计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter ,计算属性可以写成getter和setter的形式,当获取计算属性时会自动调用get
方法,当给计算属性赋值时会自动调用set
方法。在下述例子中,通过在控制台输入vm.fullName = "Cai Shunfeng"
则可以对fullName进行赋值
<body>
<div id="root">
{{fullName+" "+age}}
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
firstName: 'Schyler',
lastName: 'Cai',
age: 28
},
computed: {
fullName: {
get: function () {
return this.firstName+" "+this.lastName;
},
set: function (value) {
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
});
</script>
2.通过在Vue实例中设置watch
属性来监听目标属性的变化,watch
属性是一个object对象,其中定义了一个个函数,函数名是监听目标属性的名字
<div id="root">
firstName:<input type="text" v-model="firstName"/>
lastName:<input type="text" v-model="lastName"/>
<br/>
{{fullName}}
<br/>
{{count}}
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+" "+this.lastName;
}
},
watch: {
fullName: function(){
this.count ++;
}
}
});
</script>
七、条件渲染
1.v-if
:当值为true时才创建dom对象,false时会从dom树种删除该元素
<body>
<div id="root">
<div v-if="show == 'a'">A</div>
<div v-else-if="show == 'b'">B</div>
<div v-else>C</div>
</div>
<script>
var vm =new Vue({
el: '#root',
data: {
show: 'a'
}
});
</script>
</body>
需要注意的是,在使用条件渲染的时候,vue会尽量复用已存在的元素来提升效率,因此会出现以下情况,如下例中,当你在输入框输入信息后,在浏览器控制台改变show的值为’b’时,会发现之前在输入框中输入过的值依然存在
<body>
<div id="root">
<div v-if="show == 'a'">a:<input/></div>
<div v-else-if="show == 'b'">b:<input/></div>
</div>
<script>
var vm =new Vue({
el: '#root',
data: {
show: 'a'
}
});
</script>
</body>
解决这个问题需要为input标签添加一个key
属性,当vue检测到该标签有key
属性且其值唯一时,就会知道这两个标签是不同的,就不会进行复用
<body>
<div id="root">
<div v-if="show == 'a'">a:<input key="InputA"/></div>
<div v-else-if="show == 'b'">b:<input key="InputB"/></div>
</div>
<script>
var vm =new Vue({
el: '#root',
data: {
show: 'a'
}
});
</script>
</body>
2.v-show
:当值为true时显示dom值,false时会隐藏该元素,与v-if
的区别在于当值为false时,标签元素已经渲染到页面了,只是隐藏起来
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el: '#root',
data: {
show: true,
list: [1,2,3]
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
八、列表渲染
1.v-for
v-for
:遍历对象,遍历时添加:key
属性能提高遍历效率,但:key
值要求不可重复,例如当遍历对象为数组arr = [1,2,3]时,可以写成
<ul>
<li v-for="(item, index) of arr" :key="item">{{item}}<li>
<ul>
也可以利用遍历的index
属性来作为:key
的值,但会出现一些问题(自己查),建议可以在后台返回的数组中的每个数据中加上唯一编号来作为key值
2.数组操作
在Vue中当需要对数组数据进行操作时,如果直接对数组对应的下标进行操作,即使数组的数据修改成功,vue也不会将修改后的数据同步渲染到页面中
<body>
<div id="root">
<ul>
<li v-for="item of list">
{{item}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
list: [
"Schuyler",
"Cai"
]
}
});
</script>
</body>
在控制台中输入vm.list[1] = ['change'];
页面不会有变动
(1).想要将修改后的数组数据渲染到页面中,第一种方法是使用vue提供的数组变异方法
push()
:增加一项数据pop()
:删除最后一项shift()
:删除第一项unshift()
:往数组第一项加入内容splice(index, index, data)
:数组接出及插入sort()
:数组排序reverse()
:数组取反
在控制台中输入vm.list.pop()
页面会进行渲染
(2)第二种方法是改变数组的引用,既是直接将一个新的数组赋值给目标数组,例如在控制台中执行:vm.list = ['Cai','Schuyler'];
(3).第三种方法是使用Vue提供的全局或实例set
方法,例如在控制台中输入:
vm.$set(vm.list, 1, 'change');
Vue.set(vm.list, 1, 'change');
3.模板占位符template
在遍历时,我们可以使用template
占位符,这样可以使template
所在的标签不渲染到页面中,例如
<body>
<div id="root">
<ul>
<div v-for="item of list">
<li>{{item}}</li>
</div>
<template v-for="item of list">
<li>{{item}}</li>
</template>
</ul>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
list: [
"Schuyler",
"Cai"
]
}
});
</script>
</body>
代码中出现了两次遍历,而他们渲染到页面中的结果是
//前者
<div>
<li>Schuyler</li>
</div>
<div>
<li>Cai</li>
</div>
//后者
<li>Schuyler</li>
<li>Cai</li>
4.对象遍历
(1).在vue中对对象进行遍历时,可以使用三个遍历属性值,item
、key
、index
,分别为对象的值、键、下标,当然这里只是为了形象分别用了这三个属性名,不是固定使用的属性名,只要使用的时候位置对应就可以了
<body>
<div id="root">
<ul>
<li v-for="(item, key, index) of userInfo">
{{item}}-----{{key}}-----{{index}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
userInfo: {
name: 'Schuyler',
age: 25,
}
}
});
</script>
</body>
(2).在对遍历的对象进行数据操作时,直接对对象已存在的属性的值进行修改,修改后的数据会同步渲染到页面上,如在控制台中:vm.userInfo.name = 'Cai'
。但是如果想给对象新增一项属性时,需要使用Vue提供的全局或实例set
方法,或者改变对象的引用才可以使数据同步渲染到页面中,例如在控制台中:
vm.userInfo = { name = 'Schuyler', age: 25, sex: 'man'}
vm.$set(vm.userInfo, 'address', 'ShangHai');
Vue.set(vm.userInfo, 'address', 'Shanghai');
九、在vue实例之外操作vue实例的数据
有些时候需要在vue实例之外去操作vue实例中的数据,需要前缀 $
,以便与用户定义的属性区分开来,例如设置定时器指定时间对数据进行操作,这时可以通过vueName.$data.target
来对数据进行操作
<!DOCTYPE html>
<html>
<head>
<title>vue</title>
<meta charset="utf-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
{{content}}
</div>
<script>
var app = new Vue({
el: "#root",
data: {
content: 'NO'
}
});
setTimeout(function() {
app.$data.content = 'OK';
},2000);
</script>
</body>
</html>