Vue基础(上)

淋汐_

已于 2022-11-13 21:57:43 修改

阅读量238

点赞数 2

文章标签： vue.js javascript 前端 1024程序员节

于 2022-10-24 14:57:22 首次发布

本文链接：https://blog.csdn.net/m0_60600374/article/details/127488478

版权

1. 模板语法

1. 插值语法

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

即可以通过{{ }}来读取Vue中的属性，例如Vue实例对象中有name属性，给name赋值为 Web，在需要显示‘Web’的地方就可以通过{{name}}来表示。

<div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr>
</div>

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

控制台输出如下:

2. 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，

且可以直接读取到data中的所有属性。（指令语法有很多，在这里用v-bind举例）

<h1>指令语法</h1>
<!-- v-bind: 可以简写为 : -->
<a :href="school.url">{{school.name}}</a>

new Vue({
    el:'#root',
    data:{
        school:{
            name:'哔哩哔哩',   
            url:'https://www.bilibili.com/'
        }
    }
})

2. 数据绑定

1. 单向绑定(v-bind)：数据只能从data流向页面。

2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

注意：

1. 双向绑定一般都应用在表单类元素上（如：input、select等），因为这类元素要求用户有输入操作，故在用户输入时，数据也应该从页面流向数据。

2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

3. 写法举例

单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>

3. el与data的两种写法

1. el的2种写法

(1) new Vue时配置el属性

例如： el:'#root'

(2) 先创建Vue实例，随后再通过vm.$mount('root')指定el的值。

例如： v.$mount('#root')

2. data的2种写法：

(1) 对象式

data:{

name:'尚硅谷'

}

(2) 函数式

data(){

console.log('@',this) //此处的this是Vue实例对象

return{

name:'尚硅谷'

}

写法选择：两种写法都可以，推荐使用函数式，因为以后学习到组件时，data必须使用函数式，否则会报错。

3. 注意：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，就会是Window对象。

4. MVVM模型

1. M：模型(Model) ：data中的数据

2. V：视图(View) ：模板代码

3. VM：视图模型(ViewModel)：Vue实例

4.注意

1. data中所有的属性，最后都出现在了vm身上（即Vue实例对象）。

2. vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

3. 该模型可以把Model的数据同步到View显示出来，还可以把View的修改同步回Model ，实现自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。

5. 数据代理

1. 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

2. Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）

3. Vue中数据代理的好处：更加方便的操作data中的数据

4. 基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

5. 代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>     //插值语法
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'西安邮电大学',        //需要显示的vm属性
				address:'西安'
			}
		})
	</script>
</html>

6. 数据代理为vm添加的属性添加getter、setter(控制台查看)

6. 事件代理

1. 事件对象methods

<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

const vm = new Vue({
	el:'#root',
	methods:{
		showInfo1(event){
			alert('你好！')
		},
		showInfo2(event,number){
			console.log(event,number)
			alert('同学你好！')
		}
	}
})

2. 事件的基本使用（书写举例：@click=“shouInfo1”）：