Vue知识点总结一
1.Vue实例
代码示例
<div id="app">
<h1>{{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
name: '祖冲之'
}
})
</script>
在script标签中new一个Vue实例,其构造参数为一个对象,对象中包含有options和每个option对应的数据,以上代码中的 el: 实例对应的是此Vue实例需要挂载的元素id,**data:**对应的是在元素中用到的数据。
几个常用的options:
- el:
- 类型:string|HTMLElement
- 作用:决定之后Vue实例会管理哪个DOM
- data:
- 类型:Object|Function
- 作用:Vue实例对应的数据对象
- methods:
- 类型:{[key:string]:Function}
- 作用:定义属于Vue的一些方法,可以在其它地方调用,也可以在指令中使用
- computed:
- 类型:{[key:string]:Function}
- 作用:定义属于Vue的一些计算属性,可以在其它地方调用,也可以在指令中使用
methods和computed区别:
methods是方法,每次调用时都会执行方法体,因此调用开销较大。
computed是计算属性,只有第一次调用时会执行方法体计算,再次调用时相当于调用一个变量。
2.插值语法
mustache语法
<h1>{{name}}</h1>
这里的name变量是Vue实例中定义的变量,在Vue实例挂载的DOM中,用{{}}将变量名包起来以显示变量的内容。这就是mustache语法。
v-once
在标签中加入v-once使标签内只显示变量初始定义的值,浏览器控制台对变量值的改变不会得到响应。
<h2>{{message}}</h2>
<!-- v-once只显示初始设置的值,页面中改动不会对其产生影响 -->
<h2 v-once>{{message}}</h2>
假设message中存放的是’hello’,在控制台输入
app.message='hi'
会发现第一行的hello变为hi,第二行的hello不变。
v-html
<h1 v-html="url"></h1>
在Vue实例中定义一个变量url: '<a href="http://baidu.com">百度一下</a>'
然后在Vue实例挂载的DOM中使用上面的v-html插值操作,元素会将这一变量中的文字以html标签的方式渲染出来。上述实例即渲染出一个百度一下的超链。
v-text
<h2 v-text="url"></h2>
v-text会将标签内容替换为v-text后赋值的内容,上述实例会展示url变量中的文字,即<a href="http://baidu.com">百度一下</a>
,而不是形成一个超链。
注意:用了v-text之后,标签内容就不会再显示
<h2 v-text="url">我想加点东西,但是因为前面的v-text指令导致加不了</h2>
以上代码不会显示我想加点东西,但是因为前面的v-text指令导致加不了部分
v-pre
v-pre不使用Vue定义的变量,就显示标签之间的实际内容,不做任何解析,比如:
<h2 v-pre>{{message}},大胡子语法不管用了哦</h2>
网页就不会再将message变量替换为Vue实例中定义的值显示,而是直接显示{{message}}
v-cloak
正常情况下,如果挂载Vue实例的组件中有mustache语句,那么在未完全加载完成时网页中会显示mustache语法的原型(即:{{变量名}}),在相应的标签中加入v-cloak之后就可以指定显示的样式。
<style>
[v-cloak] {
display: none;
}
</style>
<h2 v-cloak>{{message}}</h2>
在加载页面过程中,如果不加v-cloak以上示例会显示{{message}}
直到message变量解析成相应的字符串,但是加了之后就可以为它设定初始样式,示例中加载阶段不会显示任何东西。
v-bind
v-bind用来动态的绑定标签中的属性,就是将某个属性和Vue实例中的变量绑定到一起,能够做到变量发生改变时,标签实时响应。
首先我放一个Vue实例
<script>
const app = new Vue({
el: '#app',
data: {
message: 'i love you!',
imgURL: 'http://data.17jita.com/attachment/portal/201709/07/154428l66fm4ttcttmtbnt.png',
baidu: 'http://baidu.com',
active: 'active',
isActive: true,
isLine: true,
classes: ['active','line'],
font_size: '50px',
font_color: 'red',
style1: {backgroundColor: 'red'},
style2: {fontSize: '50px'}
},
methods: {
btnClick: function(){
this.isActive = !this.isActive
},
getClasses: function(){
return {active: this.isActive, line: this.isLine}
},
getStyles: function() {
return {fontSize: this.font_size, color: this.font_color}
}
}
})
</script>
v-bind绑定基本属性
<img v-bind:src="imgURL" alt="" width="300px" /><br>
<a v-bind:href="baidu">百度一下</a>
运行html代码之后会显示一张送别的吉他谱,和一个百度一下的超链接,可以通过在控制台输入以下语句使图片改变app.imgURL='http://data.17jita.com/attachment/portal/201509/15/225301pa658a6c6pvpav80.png'
这时候吉他谱会变成朴树版的送别。这就是动态绑定。
其它的像href等属性也都有这样的效果。
v-bind绑定属性时可以采用以下语法糖的形式替换:
<img :src="imgURL" alt="" width="300px" /><br>
<a :href="baidu">百度一下</a>
即:属性名
的形式。
v-bind动态绑定class属性
对象语法:<h2 :class="{active: !isActive, line: isLine}">{{message}}</h2>
其中class绑定的对象中key是类名,value是bool值,value决定了绑定哪个类。
可以用以下代码代替
<h2 :class="getClasses()">{{message}}</h2>
,将过多的对象放到一个函数中,然后在动态绑定中调用
数组语法:<h2 :class="['active','line']">{{message}}</h2>
其中class动态绑定了一个数组,通过数组的元素增删也可以实现动态效果。
当然数组也可以写在一个变量classes中
<h2 :class="classes">{{message}}</h2>
v-bind动态绑定style属性
这个与class属性一样也分为对象语法与数组语法,不同的是对象语法中style的key:value对应的是style中的各个属性和值。这里就不再细说。
计算属性
前文已经讲过计算属性与函数的差别,这里谈谈计算属性的本质
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James',
books: [
{id: 110, name: 'Unix编程艺术', price: 119},
{id: 111, name: '代码大全', price: 128},
{id: 112, name: '深入理解计算机原理', price: 110},
{id: 113, name: '现代操作系统', price: 89}
]
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
},
totalPrice() {
let result = 0;
for( let i = 0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
上面代码中的fullName实质上是以下代码
fullName: {
一般情况set方法缺省,不希望别人改变值
set: function() {
},
get: function() {
return this.firstName + ' ' + this.lastName
}
}
即一个包含set函数与get函数的对象,但是习惯上不提供修改计算属性的值,所以就简化成之前的代码中给出的形式,最后甚至把function也直接省略就变成totalPrice那种写法。
这里由起名字也可以看出还有个区别,习惯上计算属性是名词,函数是动词。