学习路线:
-
vue基础 —>2.vue-cli —>3.vue-router —>4.vuex —>5.element-ui —>6.vue3
目录
-
vue是什么?
vue是一套用于构建用户界面的渐进式JavaScript框架
渐进式:逐渐递进从简单轻巧的核心库递进到复杂各式各样的Vue插件
-
vue的特点
-
采用组件化模式,提高代码复用率,且让代码更好维护。
-
声明式编码,让编码人员无需直接操作DOM,提高开发效率。
-
使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。
DOM全称 Document Object Model,即文档对象模型
-
-
01_初始Vue:Hello,World
-
想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
-
root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
-
root容器里的代码被称为Vue模板
-
Vue实例和容器是一一对应的
-
真实开发中只有一个Vue实例,且xxx可以自动读取到data中的所有属性
-
{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
-
一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
<!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 type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>Hello,{{name}}</h1> </div> <script> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el: '#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串 data: { //data中用于存储数据,数据供el指定的容器使用,值我们暂时先写成一个对象 name: 'World', }, }) </script> </body> </html>
-
-
02_Vue模板语法
Vue模板语法有2大类
-
插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
-
指令语法:
功能:用于解析标签(包括:标签属性,标签体内容,绑定事件......)
如:v-bind:href="xxx"可简写 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
注意:Vue中有很多的指令,且形式都是:v-xxx
<!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>插值语法</h1> <h2>Hello,{{name}}</h2> <hr /> <h1>指令语法</h1> <!--v-bind可以简写:--> <a v-bind:href="url">{{baidu.name}}一下</a> <hr /> <a :href="path">随便点一下</a> </div> </body> <script> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。 new Vue({ el: '#root', data: { name: '广州', baidu: { name: '百度点', }, url: 'http://www.baidu.com', path: 'http://www.bilibili.com', }, }) </script> </html>
-
-
03_数据绑定
Vue中有2种数据绑定的方式:
-
单向绑定(v-bind):数据只能从data流向页面。
-
双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data
双向绑定一般都应用在表单类元素上(如:input,select等)
v-model:value可以简写为v-model,因为v-model默认收集的就是value的值
<!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"> <h2>单向数据绑定:<input type="text" v-bind:value="name" /></h2> <h2>单向数据绑定:<input type="text" :value="name" /></h2> <h2>双向数据绑定:<input type="text" v-model:value="name" /></h2> <h2>双向数据绑定:<input type="text" v-model="name" /></h2> </div> </body> <script> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。 new Vue({ el: '#root', data: { name: '百度', }, }) </script> </html>
-
-
04_el与data的两种写法
-
el有两种写法
-
new Vue时候配置el属性
-
先创建Vue实例,随后再通过vm.$mount("root")指定el的值
-
-
data有两种写法
-
对象式
-
函数式
学习到组件时,data必须使用函数式,否则会报错
原因:有Vue管理的函数,一定不要些箭头函数,一旦写了箭头函数,this就不再是Vue实例了
-
<!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"> <h2>Hello,{{name}}</h2> </div> </body> <script> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。 /* //el两种写法 const v = new Vue({ //el: '#root', data: { name: '百度', }, }) console.log(v) setTimeout(() => { //定时器 v.$mount('#root') //第二种写法(挂载) }, 2000) //2秒 */ new Vue({ el: '#root', //data第一种写法:对象式 //data:{ //name:'百度' //} //data第二种写法:函数式 data() { return { name: '百度度', } }, }) </script> </html>
-
-
05_MVVM模型
-
M模式(Model):对应data中的数据
-
V视图(View):模板
-
VM视图模型(ViewModel):Vue实例对象
发现:1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用
-
-
06_数据代理
-
Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
-
Vue中数据代理的好处:
更加方便的操作data中的数据
-
基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/settter内部去操作(读/写)data中对应的属性。
-
-
07_事件处理
事件的基本使用:
-
使用v-on:xxx或@xxx绑定事件,其中xxx是事件名
-
时间的回调需要配置methods对象中,最终会在vm上
-
methods中配置的函数,不要用箭头函数,否则this就不是vm了
-
methods中配置的函数,都是被vue所管理的函数,this的指向是vm或组件实例对象
-
@click = "demo"和@click = "demo($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> <!--引入Vue.js--> <script src="../js/vue.js"></script> </head> <body> <!--准备一个容器--> <div id="root"> <h1>名字:{{name}}</h1> <button v-on:click="showInfo">随便点一点1</button> <button @click="showInfo">随便点一点2</button> </div> </body> <script> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { name: '张三', }, methods: { showInfo() { alert('点了发生点什么') }, }, }) </script> </html>
Vue中的事件修饰符:
-
prevent:阻止默认事件(常用)
-
stop:阻止事件冒泡(常用)
-
once:事件只触发一次(常用)
-
capture:使用事件的捕获模式
-
self:只有event.target是当前操作的元素才触发事件
-
passive:事件的默认行为立即执行,无需等待事件回调执行完毕
键盘事件:
-
Vue中常用的按建别名:
回车 enter
删除 delete(捕获“删除”和“退格”键)
退出 esc
空格 space
换行 tab
上 up
下 down
左 left
右 right
-
Vue未提供别名的按建,可以使用按建原始的key值去绑定,但注意要转为kebab-case(短横线命名)
-
系统修饰键(用法特殊):ctrl,alt,shift,meta
-
配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
-
配合keydown使用:正常触发事件。
-
-
也可以使用keyCode去指定具体的按建(不推荐)
-
Vue.config.keyCodes.自定义键名 = 键码,可以去定制按建别名
-
-
08_计算属性
-
定义:要用的属性不存在,要通过已有属性计算得来
-
原理:底层借助了Object.defineproperty方法提供的getter和setter
-
get函数什么时候执行?
-
初次读取时会执行一次
-
当依赖的数据发生改变时会被再次调用
-
-
优势:与methods实现相比,内部有缓存机制,效率更高,调试方便
-
备注:
-
计算属性最终会出现在vm上,直接读取使用即可。
-
如果计算属性要被修改,那必须写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> <!--引入Vue.js--> <script src="../js/vue.js"></script> </head> <body> <!--准备一个容器--> <div id="root"> 姓:<input type="text" v-model:value="fisrtName" /><br /> 名:<input type="text" v-model:value="lastName" /><br /> 全名:<span>{{fullName}}</span><br /> </div> </body> <script> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { fisrtName: '张', lastName: '三', }, computed: { fullName: { get() { return this.fisrtName + '-' + this.lastName }, set(value) { const arr = value.split('-') this.fisrtName = arr[0] this.lastName = arr[1] }, }, /* //简写 只考虑get不考虑set的时候可以这么做 computed: { fullName() { return this.fisrtName + '-' + this.lastName }, },*/ }, }) console.log(vm) </script> </html>
-