文章目录
前言
vue是一款用于构建用户界面的 JavaScript 框架,有以下两个主要核心功能
- 声明式渲染:Vue 通过自己的模板语法扩展了标准 HTML,使得我们可以声明式地描述基于 JavaScript 状态输出的 HTML。
- 响应性:Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。
提示:具体内容可参照官网
vue3官方文档
vue2官方文档
一、概念介绍
1.el:挂载点
-
Vue实例的作用范围:管理el选项命中的元素及其内部的后代元素
-
可以使用其他选择器,但是建议使用id选择器
-
可以设置其他双标签 dom元素,但不能使用html和body
2.data:数据对象
- 数据给el所指定的容器使用
- 容器中使用data时一般使用插值表达式{{xxx}}
二、使用步骤
1.引入vue
下载官网中的开发版,然后再引入本地文件
<script src="./js/vue.js"></script>
2.准备好一个容器
<div id="root">
<h1>{{name.toUpperCase()}}</h1>
<h2>{{add}}</h2>
</div>
3.创建vue实例,传入配置对象
//创建Vue实例
<script>
//el两种写法
new Vue({
el:'#root', //第一种写法
data:{
name:'ppp'
}
})
//第二种写法
const v = new Vue({
data:{
name:"ppp"
}
})
v.$mount("#root") //第二种写法
//data的两种写法
new Vue({
el:"#root",
//第一种:对象式
// data:{
// name:"ppp"
// }
//第二种:函数式(不能使用箭头函数,一旦使用this变为window而不是vue实例)
data(){
return {
name:"ppp"
}
}
})
</script>
注意:
1.vue实例和容器是一一对应的
2.真实开发中只有一个vue实例,并且配合组件一起使用
3.插值表达式中的式子写js表达式,且可自动读取到data中所有属性
4.一旦data中数据改变,容器中用到该数据的地方也会自动更新
5.指定容器内代码称为vue模板
三、模板语法
1.插值语法
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式
代码如下(示例):
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr>
</div>
2.指令语法
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件。。)
写法:以v-开头,例如v-bind
代码如下(示例):
<div id="root">
<h1>指令语法</h1>
<!-- v-bind简写为: -->
<a v-bind:href="url">点我跳转</a>
<a :href="url">点我跳转哦2</a>
</div>
效果:
四、数据绑定
1.单向数据绑定v-bind
代码:
<div id="root">
单向数据绑定
<input type="text" v-bind:value="name">
</div>
<script>
new Vue({
el:'#root',
data:{
name:'ppp'
}
})
</script>
结果:
2.双向数据绑定v-model
代码:
<div id="root">
双向数据绑定:<input type="text" v-model="name">
</div>
//js内容与上相同
结果:
注意:v-model只能应用在表单类元素上(输入类元素),例如input,select
五、MVVM模型
Vue的设计参照了MVVM模型
1.M(Model):对应data中数据
2.V(View):模板
3.VM(ViewModel):Vue实例对象
代码对照理解如下:
注意:
1.data中所有属性最后都出现在vue实例vm身上
2.vm身上所有属性以及vue原型上所有属性,在vue模板中都可以直接使用
六、数据代理
定义:通过一个对象代理对另外一个对象中属性的操作(读/写)
简单示例:
let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},
set(value){
obj.x=value;
}
})
结果:
vue中的数据代理
通过vm对象来代理data对象中属性的操作,更加方便的操作了data中的数据
const vm = new Vue({
el:"#root",
data:{
name:"abcd",
address:"北京"
}
})
访问数据结果:
基本原理
- 通过Object.defineProperty()把data对象中所有属性添加到vm上。
- 为每一个添加到vm上的属性,都指定了一个getter、setter。
- 在getter/setter内部去操作(读/写)data中对应的属性。