Vue学习总结（一）

最新推荐文章于 2025-11-24 03:44:17 发布

原创最新推荐文章于 2025-11-24 03:44:17 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue笔记专栏收录该内容

3 篇文章

订阅专栏

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那种写法。
这里由起名字也可以看出还有个区别，习惯上计算属性是名词，函数是动词。