一、Vue.js是什么?
Vue.js是一套用于构建用户界面的渐进式JavaScript框架。
构建用户界面:使用某种方式拿到数据,将数据放到合适的位置。
渐进式:Vue可以自底而上逐层应用
二、Vue的特点
1.采用组件化开发,提高代码复用率,并且让代码更好维护
2.使用声明式编码,让程序员无需直接操作DOM,提高开发效率
3.使用虚拟DOM+Diff算法,尽量复用DOM节点
虚拟DOM:使用普通的js对象来描述DOM结构,因为不是真实的DOM,所以称为虚拟DOM,本质上是一个对象。
三、html中引入Vue并使用
步骤:
1.下载vue.js
Vue.js官网:https://cn.vuejs.org/v2/guide/installation.html
NPM:npm install vue
2.导入vue.js
<script src="../js/vue.min.js"></script>
3.创建容器
<div id="root">
</div>
4.创建Vue实例
const x=new Vue({
el:'#root',
data:{
name:'curry',
msg:'页面加载于 ' + new Date().toLocaleString(),
}
})
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<div id="root">
{{ message }} <!-- 插值语法-->
</div>
一个完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue实例</title>
<!-- 引入Vue -->
<script src="../js/vue.min.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="root">
<span :title="msg">{{name}}</span>
</div>
<script>
// Vue实例
new Vue({
el:'#root',
data:{
name:'curry',
msg:'页面加载于'+new Date().toLocaleString()
}
})
</script>
</body>
</html>
要注意的点:
1.想让vue工作,就必须创建一个vue实例,并且传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法;
3.root容器里的代码被称为【vue模版】;
4.vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,并且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
四、Vue相关
1.数据绑定
Vue有两种数据绑定方式,单向数据绑定和双向数据绑定
- 单向绑定(v-bind):数据只能从data流向页面
- 双向绑定(v-model):数据不仅能从data流向页面,还能从页面流向data
1.双向数据绑定一般都应用在表单元素上(如:input、select...,有value的元素)
2.v-model:value可以简写为v-model默认收集的就是value的值
单向数据绑定有两种形式
1.插值形式
插值形式也就是{{name}}
一旦data中的name改变了,那么页面中的name也随之发生了改变
2.v-bind形式
v-bind可以绑定标签的属性,如src、class、style等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单向数据绑定</title>
</head>
<body>
<div id="root">
<div v-bind:style="color">我是单向绑定</div>
<div>{{name}}</div>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#root',
data:{
color:'color:red',
name:'ning'
}
})
</script>
</html>
没有改变时
在控制台改变data中数据的值时,页面也随之改变
双向数据绑定
数据的双向绑定,是Vue实现的一大功能。
所谓双向绑定,也就是data中的数据和页面渲染的数据保持一致,无论谁被改变,另一方都会更新为相应的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双向数据绑定</title>
</head>
<body>
<div id="root">
<input type="text" v-model:value="name">{{name}}
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#root',
data:{
name:'curry'
}
})
</script>
</html>
当在Input框中改变name的值时,可以从插值语法中看出data中的name也发生了改变。
双向数据绑定的原理-Object.defineProperty()
vue是通过Object.defineProperty( )来实现数据的劫持的,之前了解到的Object.defineProperty的作用是添加一个对象的属性,以及对该属性的一些操作,比如是否可枚举、是否可读写等,在vue阶段我们主要研究它的两个描述属性getter和setter。
我们通过Object.defineProperty()设置了对象person的age属性,对其get和set进行重写操作,get就是在读取age属性的值时触发的函数,set就是设置age属性的值时触发的函数。
<script>
let number=10;
let person={
name:'curry',
gender:'男',
}
// defineProperty这个函数接受三个参数,1:对象,2:属性名,3:配置对象
Object.defineProperty(person,'age',{
get(){
console.log('有人读取age了!!');//当读取该属性时调用,并且返回值就是该属性的值。
return number;
},
set(value){ //set(setter)当修改该属性时调用,并且返回修改后的值
console.log('age被修改了');
number=value;
}
})
</script>