1.vue是什么
一套用于构建用户界面的渐进式JavaScript框架
渐进式:Vue可以自底向上逐层的应用
-
简单应用:只需一个轻量小巧的核心库
-
复杂应用:可以引入各式各样的Vue插件
2 Vue 的发明者
3 Vue的特点
1.采用组件化模式,提高代码复用率、且让代码更好维护。
2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
3. 使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点。
4 Vue 周边库
-
vue-cli: vue 脚手架
-
vue-resource
-
axios
-
vue-router: 路由
-
vuex: 状态管理
-
element-ui: 基于 vue 的 UI 组件库(PC 端)
……
Vue 官方文档
Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
5 初识Vue
1,想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
2.root容器里的代码依然符html规范 只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一一对应的:
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用
6.{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性
7.data中的数据发生改变,那么模板中用到该数据的地方也会自动更新
8.Vue.config.productionTip = false; //阻止vue在启动时生成提示
注意区分:js表达式和js代码(语句)
1,表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1).a
(2).a+b
(3).demo(1)(函数)
(4).x==y?'a':'b
2.js代码(语句)
(1). if() { }
(2). for() { }
<!-- 准备一个容器 -->
<div id="root">
<h1>Hello {{name}}</h1>
<!-- 插值表达式 (插值语法) -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//阻止vue在启动时生成生产提示。
//创建Vue实例
const x = new Vue({
el:'#root', //用于当前指定Vue实例为那个容器服务,值通常为css选择器字符串
data:{ //data中用于存储数据,数据供el所指定的容器去使用,现在暂时写成一个对象
name: 'GZC'
}
});
</script>
6 模板语法
6.1 插值语法
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
</div>
-
功能: 用于解析标签体内容
-
语法: {{xxx}} ,xxxx 会作为 js 表达式解析
-
如果插值语法结果是undefined,不会显示当页面上去,
-
不是bug,vm.a如果a不存在是undefined,但是Vue报错是is not define。个人觉得Vue在把属性当做变量在用。而data.a.b如果b不存在a存就是正常的undefined
6.2 指令语法
1.功能: 解析标签属性、解析标签体内容、绑定事件
2.举例:v-bind:href = ”xxxx“,xxxx 会作为 js 表达式被解析
3.说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子
7.数据绑定
7.1. 单项数据绑定:v-bind
数据只能从data流向页面。
<div id="root">
<h1>指令语法</h1>
<a :href="url">带我百度</a>
<a v-bind:href="url">带我百度</a>
</div>
出现v- ,双引里面的当成表达式去执行
v-bind:可以简写为:
7.2. 双向数据绑定:v-model
数据不仅能从data流向页面,还可以从页面流向data
备注:
1.双向绑定一般都应用在表单类元素上(如:input、select等)(有vaule的属性的标签) 2,v-model:value可以简写为v-model,因为v-model 默认收集的就是value值。
8 el和data的两种写法
1.el的两种方式
(1)new Vue的时候配置el属性
(2)先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值
data有两种写法
(1)对象式
(2)函数式
如何选择:目前选择那种写法都可以,但是组件中data必须使用函数式,否则会报错。
一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了
new Vue({
el: '#root',
// data : {
// name:"GZC",
// }
// data: function() {
// console.log('@@@',this);
// return {name:"GZC",}
// } 简写:
data () {
console.log('@@@',this);
return {name:"GZC",}
}
})
9 MVVM模型
-
M:模型(Model) :对应 data 中的数据
-
V:视图(View) :模板
-
VM:视图模型(ViewModel) : Vue 实例对象
data中所有属性,最后都出现在了vm身上
vm身上所有属性,及Vue原型上所有的属性,在Vue模板中都可以直接使用
10 数据代理
10.1 Object.defineProperty()
value 默认值
enumerable true 可枚举 false 不可枚举(遍历)
writable 控制属性是否可以被修改,默认是false
configurable 控制属性是否可以被删除 默认为false
let person = {
name: 'John',
sex:'男',
};
//默认不可遍历(枚举)
Object.defineProperty(person, 'age', {
value: 18, //默认值,
enumerable: true, // true 可枚举 ,false (默认值)不可以枚举
writable: true, // 控制属性是否可以被修改,默认是false
configurable: true, //控制属性是否可以被删除 默认为false
})
getter 和 setter
let number = 18;
Object.defineProperty(person,'age', {
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get: function() {
return number;
},
// 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到具体修改的值
set(value) {
number = value;
}
})
10.2 数据代理
通过一个对象代理对另一个对象中的属性的操作(读和写)
let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2,'x', {
get() {
return obj.x;
},
set(value) {
obj.x = value;
}
});
10.3 vue中的数据代理
通过一个对象代理对另一个对象中的属性的操作(读和写)
通过vm 读取的是data中的属性,改属性值改的是data中的属性值,这就是数据代理
读取是getter
修改是setter
通过vm._data 读取自己写的data
不要打开_data 虽然有getter setter 但是 不是数据代理,是数据劫持,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{name}}</h1>
</div>
<!-- 数据代理:通过一个对象代理对另一个对象中的属性的操作(读和写) -->
<script type="text/javascript">
Vue.config.productionTip = false;
let data = {
name: 'GZC',
address: 'http://localhost'
}
new Vue ({
el: '#root',
// data: data,
data,
})
</script>
</body>
</html>
1,Vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写)
2,Vue中数据代理的好处: 更加方便的操作data中的数据
3,基本原理: 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性,指定指定一个getter/setter。 在getter/setter内部去操作(读/写)data中对应的属性。
11 事件处理
11.1 事件的基本使用
11.1.1 不传参
也可以接收到$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{name}}</h1>
<button v-on:click="showInfo">点我提示信息</button>
</div>
<script type="text/javascript">
Vue.config.production = false;
new Vue({
el: '#root',
data() {
return {
name: 'GZC',
}
},
//配置事件的回调
methods: {
showInfo() {
alert('Show info');
},
showInfo(e) {
alert('Show info');
console.log(e.target.innerText);
console.log(e);
console.log(this); //此处this指的是vm
},
// showInfo: (e)=> {
// console.log(this); //此处this指的是window
// }
//点击按钮,要调用showInfo this指向下一层
//
}
});
</script>
</body>
</html>
11.1.2 v-on:click="showInfo"传参
可以加括号,加完括号,也不是函数返回值
但是加完括号,无法传对象参数,所以,需要写$event(没有顺序)
v-on:click="showInfo($event,a)"
showInfo(event,a) {
}
都挂载到vm实例对象上,没有数据代理
只有data里面的才能进行数据代理
11.1.3 总结
事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名
2,事件的回调需要配置在methods,对象中,最终会在vm上
3,methods中配置的函数,不要用箭头函数!否则this就不是vm了
4,methods中配置的函数,都是被Vue所管理的函数,this刷指向是vm或组件实例对象
5,@click:="demo”和@click="demo($event,a)”效果一致,但后者可以传其他参
11.2.数据的修饰符号(支持链式调用)
11.2.1 prevent 阻止默认行为(常用)
v-on:click.prevent="showInfo"
11.2.2 stop 阻止事件冒泡(常用)
11.2.3 once 事件只触发一次(常用)
11.2.4 capture:使用事件的捕获模式
点击嵌套里面的元素,使用捕获阶段,先运行外面的元素,在运行里面的元素
11.2.5 self: 只有event.target是当前操作的元素时才触发
11.2.6 passive 事件的默认行为立即执行,无需等待时间回调完成
<!-- wheel 滚轮滚动 scroll 滚动条 --> <!-- 滚动 先处理完回调函数,滚动条才往下走 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1 {
height: 50px;
background-color: blue;
}
.box1 {
height: 80px;
background-color: pink;
}
.box2 {
height: 30px;
margin-left: 10px;
background-color: red;
}
.list {
height: 200px;
width: 200px;
background-color: peru;
overflow: auto;
}
li {
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div id="root">
<h1>{{name}}</h1>
<!-- prevent 阻止默认行为(常用) -->
<a href="http://www.baidu.com" v-on:click.prevent="showInfo">点我提示信息</a>
<!-- stop 阻止事件冒泡(常用) -->
<div class ="demo1" @click="showInfo">
<button @click.stop="showInfo">点我</button>
</div>
<!-- once 事件只触发一次(常用) -->
<a href="http://www.baidu.com" v-on:click.prevent.once="showInfo">点我提示信息</a>
<!-- capture:使用事件的捕获模式 -->
<div class ="box1" @click.capture="showMsg(1)">
box1
<div class="box2" @click="showMsg(2)">
box2
</div>
</div>
<!-- self: 只有event.target是当前操作的元素时才触发 -->
<div class ="demo1" @click.self="showInfo">
<button @click="showInfo">点我</button>
</div>
<!-- //结果输出<button>点我</button> -->
<!-- passive 事件的默认行为立即执行,无需等待时间回调完成 -->
<!-- wheel 滚轮滚动 scroll 滚动条 -->
<!-- 滚动 先处理完回调函数,滚动条才往下走 -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.production = false;
new Vue({
el: '#root',
data() {
return {
name: 'GZC',
}
},
//配置事件的回调
methods: {
showInfo(e) {
alert('Show info');
console.log(e.target);
},
showMsg(msg) {
alert(msg);
},
demo(){
for (let i = 0; i < 100000; i++) {
console.log('@demo');
}
}
}
});
</script>
</body>
</html>
11.3 键盘事件
11.3.1 vue中常见的按键别名
回车 => enter
删除 => delete(捕获删除和退格键)
退出 => esc
空格 => space
换行 => tab (tab键,必须使用keydown触发)
上 => up
下 => down
左 => left
右 => right
易错
tab键,必须使用keydown触发
2,Vue未提供别名的按健,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
e.key 输出的时键别名 CapsLock => .caps-lock keyup.13 e.keyCode 输出键码值
3.系统修饰键(用法特殊):ctrl、alt、shift、meta(window键) (1),配合keyUp使用:按下修饰健的同时,再按下其他健,随后释放其他健,事件才被触发。
只有按下 ctrl + y 才被调用 用法 @keyup.ctrl.ctrl.y
(2).,配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐 可能之后会被废弃)
5.Vue.config.keyCodes.自定义键名=健码,可以去定制按键别名(不太推荐)
4 计算属性与监视
vue中认为data中的就是属性
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来,如果依赖的数据发生变化,computed会重新计算
2,原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
3,get函数什么时候执行?
(1). 初次读取时会执行一次。
(2). 当依赖的数据发生改变时会被再次调用。
4,优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1,计算属性最终会出现在Vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName"> <br />
名: <input type="text" v-model="lastName"> <br />
姓名: <span>{{fullName}}</span>
姓名: <span>{{fullName}}</span>
姓名: <span>{{fullName}}</span>
姓名: <span>{{fullName}}</span>
</div>
<script type="text/javascript">
Vue.config.production = false;
const vm = new Vue({
data() {
return {
firstName: '张',
lastName: '三',
}
},
computed: { //写成对象的形式
fullName: { //fullName也在vm身上 vm._data存的是data里的,没有fullName
//get什么时候调用? 1.初次读取fullName时(虚拟DOM) 2.所依赖的数据发生变化时
get() {
console.log('getter called');
return this.firstName + '-' +this.lastName;
},
set(value) { //不是必须写的 当fullName被修改是调用
let arr = value.split("-");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
});
vm.$mount('#root');
</script>
</body>
</html>
简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName"> <br />
名: <input type="text" v-model="lastName"> <br />
姓名: <span>{{fullName}}</span>
姓名: <span>{{fullName}}</span>
姓名: <span>{{fullName}}</span>
姓名: <span>{{fullName}}</span>
</div>
<script type="text/javascript">
Vue.config.production = false;
const vm = new Vue({
data() {
return {
firstName: '张',
lastName: '三',
}
},
//确定了只读不该 才采用简写形式
computed: { //写成对象的形式
// fullName: {
// get() {
// console.log('getter called');
// return this.firstName + '-' +this.lastName;
// },
// }
//fullName:function() { }
fullName (){
console.log('getter called');
return this.firstName + '-' +this.lastName;
}
}
});
vm.$mount('#root');
</script>
</body>
</html>
插件
vue3-snippets-for-vscode
监视(侦听)属性
监视属性watch: 1,当被监视的属性变化时,回调函数自动调用进行相关操作 2,监视的属性必须存在,才能进行监视!! 3.监视的两种写法: (1),new Vuel时传入watch配置 (2),通过vm.watch监视
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="isHot = ! isHot ;">切换天气</button>
</div>
<!-- //在模板里,会在vm中找,所以如果@click写了alert会报错 -->
<!--绑定事件的时候:@xxx="yyy”yyy可以写一些简单的语句-->
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data() {
return {
isHot: true,
}
},
computed: {
info() {
return this.isHot? 'hot' : 'cool';
}
},
// watch: {
// isHot:{
// immediate:true, //初始化时让handler调用一下
// handler(newValue, oldValue) {
// console.log('have changes',newValue,oldValue);
// }
// }
// },
methods: {
// changeWeather() {
// this.isHot = ! this.isHot ;
// }
}
});
vm.$watch('isHot', {
immediate:true, //初始化时让handler调用一下
handler(newValue, oldValue) {
console.log('have changes',newValue,oldValue);
}
});
</script>
深度监视
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="isHot = ! isHot ;">切换天气</button>
<h1>a:{{numbers.a}}</h1>
<button @click="numbers.a++;">a++</button>
<h1>b:{{numbers.b}}</h1>
<button @click="numbers.b++;">b++</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data() {
return {
isHot: true,
numbers: {
a:1,
b:1
}
}
},
computed: {
info() {
return this.isHot? 'hot' : 'cool';
}
},
watch: {
isHot:{
immediate:true, //初始化时让handler调用一下
handler(newValue, oldValue) {
console.log('have changes',newValue,oldValue);
}
},
//监视多级结构中某个属性的变化
// 'numbers.a': {
// handler(newValue, oldValue) {
// console.log(newValue, oldValue);
// }
// }
//Vue默认可以检测到多级结构数据改变,但是watch默认不能
numbers: { //监视多级结构内部改变
deep:true,
handler(newValue, oldValue) {
console.log(newValue,oldValue);
}
}
},
methods: {
}
});
</script>
简写 (没有immediate deep才可以简写 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="isHot = ! isHot ;">切换天气</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data() {
return {
isHot: true,
numbers: {
a:1,
b:1
}
}
},
computed: {
info() {
return this.isHot? 'hot' : 'cool';
}
},
watch: {
//正常写法
// isHot:{
// // immediate:true, //初始化时让handler调用一下
// // deep: true, //深度监视
// handler(newValue, oldValue) {
// console.log('isHot had changes',newValue,oldValue);
// }
// },
//简写
// isHot (newValue, oldValue) {
// console.log('isHot had changes',newValue,oldValue);
// },
},
methods: {
}
});
// 正常写法
// vm.$watch('isHot', {
// // // immediate:true, //初始化时让handler调用一下
// // // deep: true, //深度监视
// // handler(newValue, oldValue) {
// // console.log('isHot had changes',newValue,oldValue);
// // }
// });
//简写
vm.$watch('isHot', function(newValue, oldValue) {
console.log('isHot had changes',newValue,oldValue);
});
</script>
</body>
</html>
与计算属性区别 同步用computed,异步用watch
computed.和watch之间的区别: 1,computedi能完成的功能,watch都可以完成。 2,watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。 两个重要的小原则: 1,所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。 2,所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数, 这样this的指向才是vm或组件实例对象。
setTimeout(()=> {
},1000);