1-简介
一套用于构建用户界面的渐进式JavaScript框架。
渐进式:vue可以自底向上逐层应用;简单应用:只需一个轻量小巧的核心库;复杂应用:可以引入各式各样的vue插件。
2-VUE特点
2-1采用组件化模式,提高代码复用率、且让代码更好的维护
2-2 声明式编码(原生js为命令式编码),使无需直接操作DOM,提高开发效率
2-3 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
比如新增赵六,vue的diff算法会比较虚拟DOM,一样的就复用
3-初识VUE
初识Vue:
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象:
2.root容器里的代码依然符合htm1规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为[Vue模板]
4- root容器的作用:为vue提供模板,存入vue数据,2者是一一对应的关系
5- {{ }} :插值表达式中间放的是 js 表达式。
6- data 中数据发生改变 页面上数据也会发生改变
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8"></mate>
<title > 初识VUE</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
<h1>
{{name}}
</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止VUE生产提示
//创建VUE实例
new Vue({
el:'#root', //el 指定当前vue实例为哪个容器服务,通常为css选着器字符
data:{ //date 封装数据对象,提供vue容器使用
name:"HELLOW,VUE 插值语法123"
}
});
</script>
</body>
</html>
4-VUE模板语法
4-1 插值语法 {{}} 上面已经看到过。
4-2 指令语法
v-bind :
功能:用于解析标签(包括: 标签属性、标签体内容、绑定事件.....)
举例:v-bind:href="xxx" 或简写为 : href="xxx," xxx同样要写js表达式,且可以直接读取到数据中的所有属性。
代码展示如下
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8"></mate>
<title > 初识VUE</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
<h1>
{{name}}
</h1>
<h1>
指令语法
</h1>
<a v-bind:href="school.url" v-bind:data="school.address">去百度</a>
<a v-bind:href="school.url" :data="school.address">去百度</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止VUE生产提示
//创建VUE实例
new Vue({
el:'#root', //el 指定当前vue实例为哪个容器服务,通常为css选着器字符
data:{ //date 封装数据对象,提供vue容器使用
name:"HELLOW,VUE 插值语法123" ,
school:{
url:"www.baidu.com",
address:"中国北京"
}
}
});
</script>
</body>
</html>
5- 数据绑定
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind): 数据只能从data流向页面。2.双向绑定(v-model): 数据不仅能从data流向页面,还可以从页面流向data。备注:
1.双向绑定一般都应用在表单类元素上(如: input、select等)2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8"></mate>
<title > 初识VUE</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
<!--单项数据绑定:<input type="text" v-bind:value="name"><br/>
双向数据绑定:<input type="text" v-model:value="name">-->
单项数据绑定:<input type="text" :value="name"><br/>
双向数据绑定:<input type="text" v-model="name">
<!--如下错误 v-model 只能用于表单类元素-->
<h1 v-model:x="name">
</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止VUE生产提示
//创建VUE实例
new Vue({
el:'#root', //el 指定当前vue实例为哪个容器服务,通常为css选着器字符
data:{ //date 封装数据对象,提供vue容器使用
name:"古力娜扎"
}
});
</script>
</body>
</html>
6- el和data 的2种写法
1.e1有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式如何选择: 目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
3.一个重要的原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8"></mate>
<title > 初识VUE</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
<h1>
{{name}}
</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止VUE生产提示
//创建VUE实例
const vm = new Vue({
//第一种 el 指定当前vue实例为哪个容器服务,通常为css选着器字符
//el:'#root',
/**
第一种 data 对象式封装数据对象
data:{ //date 封装数据对象,提供vue容器使用
name:"古力娜扎"
}**/
//第二种 data 函数式:指定data的写法
/**data:function(){
console.log("谁调用:",this);
return {
name:"古力娜扎"
}
}**/
//简写
data(){
console.log("谁调用:", this);
return {
name:"古力娜扎"
}
}
});
//第二种 el 指定容器,写法
vm.$mount('#root');
</script>
</body>
</html>
7-MVVM模型
5.1、MVVM模型
M:模型(Model) =====》 对应data中的数据
V:视图(View) =====》对应模板
VM:视图模型(ViewModel)=====》 对应Vue实例对象data(M)中多有属性最后都出现在了vm身上
vm身上所有属性及Vue原型上所有属性,在vue模板(V)中都可以直接使用
8-数据代理
8-1 Object.defineProperty方法
功能:给对象添加属性
语法:Object.defineProperty(对象名,新属性名,{value:新属性值[,其他配置]})
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8"></mate>
<title > 初识VUE</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
</div>
<script type="text/javascript">
let num = 18;
let person= {
name:"张三",
addr:"总理故乡"
}
// 案例一: 给person绑定age属性
// Object.defineProperty(person,'age',{
// value:18
// } )
// console.log(person)
// //输出 ['name', 'addr'] age这个添加的变量不可枚举
// console.log(Object.keys(person))
//案例二:属性介绍,getter 和 setter方法介绍
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true ,//控制属性可以枚举,默认不可枚举
// writable:true, //可以修改的,默认不可以修稿
// configurable:true, //可以删除掉,默认不可删除
//比如 : 当有人读取 person种age属性时候,getter函数就会被调用
get:function(){
console("有人获取age值")
return 19;
},
//比如 : 当有人修改 person种age属性时候,setter函数就会被调用
set:function(value){
console("有人修改age值:" , value)
}
} )
//打压key 输出 ['name', 'addr','age1'] age这个添加的变量不可枚举
console.log(Object.keys(person))
//属性对象 观察控制台
console.log(person)
</script>
</body>
</html>
控制台测试
8-2 数据代理
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8"></mate>
<title > 初识VUE</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
</div>
<script type="text/javascript">
<!--通过一个对象, 代理另外一个对象属性的操作 读写-->
let obj ={x:100};
let obj2 ={y:100};
//通过obj2 对象的getter,setter 设置obj对象的属性
Object.defineProperty(obj2, 'x',{
get(){
return obj.x
},
set(val){
obj.x = val;
}
}
)
</script>
</body>
</html>
8-3 VUE中单数据代理
模板中用的是name,而不是data.name(即data.name),这里就用到了数据代理,vue对象代理了data对象;通过vm.name就可以读写_data中的name。
这里vm.name和vm.data.name的值相同,修改vm.name的值,vm.data.name也会改变。
原理:
数据代理,通过Object.defineProperty()方法把data对象中所有属性添加到vm,为每一个添加到vm上的属性,都指定一个getter/setter,getter/setter内部去操作(读写)data中对应的数据
vue中数据代理的好处:
更加方便的操作data中的数据
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8"></mate>
<title > 初识VUE</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
<H1>名称 : {{name}}</H1>
<H1>地址 : {{addr}}</H1>
</div>
<script type="text/javascript">
let data = {
name: 'VUE学习123',
addr: '淮安总理故乡'
};
const vm = new Vue({
el:'#root',
data(){
return data
}
})
</script>
</body>
</html>