Vue学习笔记|Vue基础02

Vue模板语法

上节学过：容器里的代码被称为Vue模板，Vue模板有自己的一些语法规则。

Vue模板语法有两大类：

插值语法

功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到Vue实例对象中的data对象中的所有属性。

1
2
3
4
5


<!-- 准备好一个容器-->
<div id="root">
	<h1>插值语法</h1>
	<h3>你好，{{name}}</h3>
</div>

1
2
3
4
5
6


new Vue({
	el:'#root',
	data:{
		name:'jack',
		}
})

指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）。
举例：v-bind:href="xxx" 可简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到Vue实例对象中的data对象中的所有属性
不光是href属性可以被v-bind指令绑定，任何属性都可以被绑定，例如，绑定src属性、class属性
由于使用频繁，通常将v-bind:属性名=" "的格式简写成:属性名=" "
备注：Vue中有很多的指令，且形式都是：v-????，此处的简写我们只是拿v-bind举个例子。

1
2
3
4
5
6


<!-- 准备好一个容器-->
<div id="root">
<h1>指令语法</h1>
	<a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1</a>
	<a :href="school.url">点我去{{school.name}}学习2</a>
</div>

1
2
3
4
5
6
7
8
9


new Vue({
	el:'#root',
	data:{
		school:{
			name:'xaut',
			url:'https://www.xaut.edu.cn/',
		}
	}
})

页面效果

tip：href是Hypertext Reference的缩写，意思是超文本引用。读音 /hīːˈref(ə)/

数据绑定

Vue中有2种数据绑定的方式：

单向绑定：v-bind:value，数据只能从data流向页面
- v-bind:value 可以简写为 :value，省略v-bind
双向绑定：v-model:value，数据不仅能从data流向页面，还可以从页面流向data
- v-model:value 可以简写为 v-model，省略:value，因为v-model默认收集的就是value值。
- 双向绑定一般应用在表单类元素上（如：input、select等）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<div id="root">
    <!-- 普通写法 -->
	<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
		 双向数据绑定：<input type="text" v-model:value="name"><br/> -->

	<!-- 简写 -->
    单向数据绑定：<input type="text" :value="name"><br/>
	双向数据绑定：<input type="text" v-model="name"><br/>
    
    <!-- 如下代码是错误的，因为v-model只能应用在输入类元素上 -->
	<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>   

1
2
3
4
5
6


new Vue({
	el:'#root',
	data:{
		name:'wyatt'
		}
})

页面效果

在双向数据绑定的输入框中修改值为wyatt.Wang，可以看到data中相应数据发生改变。

该数据的改变也引起单向数据绑定输入框中值改变。

相对的，在单向数据绑定的输入框中修改值为wyatt.Wang，data中相应数据不会发生改变，双向数据绑定的输入框中值也肯定不会发生改变。

el的两种写法

new Vue时配置el属性
通过v.$$mount('#root')指定el的值。

tip: mount有挂载的意思

1
2
3
4
5
6
7
8


const v = new Vue({
	//el:'#root', //第一种写法
	data:{
		name:'wyatt'
		}
})
console.log(v)
v.$$mount('#root')	//第二种写法

data的两种写法

对象式
函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

由Vue管理的函数（例如Vue实例的data()函数），一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

tip：什么是箭头函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


new Vue({
	el:'#root',
	//data的第一种写法：对象式
	/* data:{
			name:'wyatt'
			} */

	//data的第二种写法：函数式
	data(){
		console.log('@@@',this) //此处的this是Vue实例对象
		return{
			name:'wyatt'
			}
    }
})

控制台输出