14.Vue基础巩固

发表于 更新于 分类于 ， 阅读次数： 本文字数： 3.1k 阅读时长 ≈ 3 分钟
引言：

这一节复习巩固这几节的内容，加强对经常出现的Vue语法的记忆

加油加油！

Vue

重新认识基本实例

当挂载点写为类，时默认会挂载到第一个此类上

1
2
3
4
5
6
<div class="bg">
你好{{msg}}
</div>
<div class="bg">
你好{{msg}}
</div>
1
2
3
4
5
6
new Vue({
	el:'.bg',
	data:{
		msg:'Vue'
	}
})

所以我们要用唯一的id来避免这种情况：

1
2
3
4
5
6
7
8
<div id="app">
	<div class="bg">
		你好{{msg}}
	</div>
	<div class="bg">
		你好{{msg}}
	</div>
</div>
1
2
3
4
5
6
new Vue({
	el:'#app',
	data:{
		msg:'Vue'
	}
})

模板语法

Vue的基本结构

一个Vue主要由三个部分构成

  1. 样式style
  2. 模板template
  3. 脚本script

例如我们的Demo

  1. 样式
    1
    2
    3
    .bg{
    	color: red
    }
  2. 模板
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="app">
    	<div class="bg">
    		你好{{msg}}
    	</div>
    	<div class="bg">
    		你好{{msg}}
    	</div>
    </div>
  3. 脚本
1
2
3
4
5
6
7
new Vue({
	el:'#app',
	data:{
		msg:'Vue'
	}

})

我们惯用的插入文本的方法就是用两个大括号
{{msg}}

这里面可以是表达式
{{count+1}}

还可以包含模板
{{template}}

当然如果template是一个标签语法，类似<div>hello</div>的话

会直接打印出整个代码的内容， 如果我们只是想要它显示div内部的内容

那么我们需要加一个v-html=

v-bind给页面的元素绑定一个值
v-on绑定某一个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
	{{msg}}

	{{count+1}}
	<!-- 表达式 -->

	{{template}}
	<!-- 这样会原样打出哦 -->

	<a :href='url'>百度</a>
	<!-- 链接到百度 -->

	<button @click='sum()'>加</button>

	<div v-html="template"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Vue({
	el:'#app',
	data:{
		msg:'Vue',
		count:0,
		template: '<div>你好啊</div>',
		url:'http://www.baidu.com'
	},
	methods:{
		sum(){
			return this.count++
		}
	}
})

计算属性与侦听器

计算属性computed

侦听器 watch

1
2
3
4
5
6
7
<div id="app">
	{{msg}}
	<br>
	{{msg1}}
	<br>
	{{another}}
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vm=new Vue({
	el:'#app',
	data:{
		msg:'hello',
		another:'另一个'
	},
	computed:{
		msg1(){
			return 'computed:  '+this.msg+this.another;
			//这两个值任意一个值发生了变化都会影响到msg1的值
		}
	},
	watch:{
		msg:function (newValue,oldValue) {
			console.log('新的值'+newValue);
			console.log('旧的值'+oldValue);
			console.log('另一个值'+this.another)
		}
		// 把监听的量写在这里，函数可以传两个值，一个是新的值一个是旧的值
		// 监听只能监听到本实例当中的变量
	}
})

区别：
watch经常用在异步场景中
compute数据联动

条件渲染，列表渲染，Class与Style绑定

v-if，v-else-if,v-else真值渲染

不再举例

v-for

1
2
3
4
5
6
7
8
9
10
<div id="app">
	<div
		v-for='(item,index) in list'
		:key="index"
		:style='msgStyle'
	>
		{{item.name}}
		{{item.age}}
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var vm=new Vue({
	el:'#app',
	data:{
		msg:'hello',
		list:[
		{
			name:'A',
			age:32
		},{
			name:'B',
			age:20
		}
		],
		msgStyle:{
			color:'red',
			fontSize: 20+'px'
		}
	},

})