学习路线：
-
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>
-
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
