一、vue基础
第一部分、Vue核心
安装（略）
0、学前基础
vue是什么，是一套用于构建用户界面的渐进式js框架
渐进式：vue可以自底向上逐层的应用
- 简单应用：只需一个轻量小巧的核心库
- 复杂应用：可以引入各式各样的vue插件
特点：组件化模式、声明式编码、虚拟DOM+Diff算法
学习vue前要掌握的js基础知识：
- es6语法规范
- es6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise
1、初识vue
*浏览器配置f12生产提示阻止
vue.config.productionTip=false;//阻止vue在启动时生成生产提示。 *favicon.ico页签图标
1-1、插值语法
用于解析标签体内容。
格式：{{msg}}
插值里面放js表达式
区分js表达式和js代码(语句)
- 表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方；
- a
- a+b
- demo(1)
- x===y ? 'a':'b'
- js代码(语句)
- if(){}
- for(){}
dome.toUpperCase()//js中让小写字母转为大写字母
1-2、指令语法
用于解析标签、(包括:标签属性、标签体内容、绑定事件...)。
写链接时要v-bind（或者：）
//将url通过绑定的形式绑定给href这个属性 <a v-bind:href="url">链接</a> <a :href="url">链接</a>
2、数据绑定
2-1、单向绑定 v-bind
数据只能从data流向页面
2-2、双向绑定 v-model
数据不仅能从data流向页面，还可以从页面流向data
备注：
- v-model:value 可以简写为v-model，因为v-model默认收集的就是value值
- 双向绑定一般都应用在表单类元素(输入类元素)上(如：input、select等)
2-3、简写
<input type="text" v-bind:value="name">//单向绑定 <input type="text" v-model:value="name">//双向绑定 <input type="text" :value="name">//v-bind简写 <input type="text" v-model="name">//v-model简写
3、el与data的两种写法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>el与data两种写法</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <h1>hello,{{name}}</h1> </div> </body> <script type="text/javascript"> // el的两种写法 var vm new Vue({ el:"#app",//挂载点的第一种写法 // vm.$mount('#app'),//挂载点的第二种写法 //data的第一种写法:对象式 data:{ name:'timi' }, // data的第二种写法:函数式 /* data:function(){ console.log(this)//此处的this是Vue的实例对象,如果是箭头函数的话这个this就是全局window return{ name:'timi2' } } */ }) </script> </html>
3-1、el有两种写法：
(1)、new Vue时候配置el属性
(2)、先创建Vue实例，随后再通过vm.$mount('#app')指定el的值
3-2、data有两种写法：
(1)、对象式
(2)、函数式
如何选择：目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
3-3、一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
4、理解MVVM模型
M：模型，对应data中的数据
- Plain JavaScript Objective：一般js对象
V：视图，模板
- DOM：页面文件
VM：视图模型，Vue实例对象
- DOM Listeners：DOM监听
- Data Bindings：数据绑定
网络异常，图片无法展示
|
网络异常，图片无法展示
|
4-1、发现
- data中所有属性，最后都出现在了vm身上(即vm里面有什么插值语法就能写什么)
- vm身上所有属性及Vue原型(-proto-)上所有属性，在Vue模板中都可以直接使用
5、数据代理
5-1、回顾Objective.defineProperty方法
Objective.defineProperty：给对象添加属性，给对象定义属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>回顾Objective.defineProperty方法</title> </head> <body> <!-- 总结:通过改变number变量改变对象属性值靠getter,直接改变对象属性靠setter--> <script type="text/javascript"> let number =18 let person = { name:'张三', sex:'男', } //其中age是不能枚举的 Object.defineProperty(person,'age',{ // value:18, // enumerable:true,//控制属性是否可用枚举，默认值false // writable:true,//控制属性是否能被修改，默认值为false // configurable:true,//属性能否被删除，默认为false //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值 get(){ console.log('有人读取了age属性了') return number } //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值 set(value){ console.log('有人修改了age属性,且值是',value) number=value } }) //方法一:验证是否能枚举 // console.log(Object.keys(person)) //方法二:通过for循坏验证是否能枚举 /* for(let key in person){ console.log('for循坏对象:',key,person[key]) } console.log(person) */ </script> </body> </html>
5-2、何为数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作 读/写
下面演示一个对象obj2代理obj的操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>何为数据代理</title> </head> <body> <script type="text/javascript"> let obj ={x:100} let obj2={y:200} Object.defineProperty(obj2,'x'{ get(){ return obj.x }, set(value){ obj.x=value } }) </script> </body> </html>
5-3、Vue中的数据代理
vm._data=options.data=data//第三个data是外面的data <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue中的数据代理</title> <script type="text/javascript" src="Vue/js/vue.js"></script> </head> <body> <div id="app"> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> </div> </body> <script type="text/javascript"> let data={ name:'111', address:'222', } const vm =new Vue({ el:'#app', data//这里是调用前面的data }) </script> </html>
网络异常，图片无法展示
|
一旦data中的数据发生改变，那么页面找那个用到该数据的地方也会自动更新。
网络异常，图片无法展示
|
网络异常，图片无法展示
|
总结
1、Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
2、Vue中数据代理的好处：更加方便的操作data中的数据
3、基本原理：①通过Objective.defineProperty()把data对象中所有属性添加到vm上。②为每一个添加到vm上的属性，都指定一个getter和setter。③在getter和setter内部去操作（读/写）data中对应的属性。
6、this关键字
6-1、this.属性名称
指的是访问类中的成员变量，用来区分成员变量和局部变量（重名问题）
6-2、this.方法名称
用来访问本类的成员方法
6-3、this()
访问本类的构造方法
()中可以有参数的 如果有参数 就是调用指定的有参构造
7、事件处理
7-1、事件的基本操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件的基本使用</title> <script type="text/javascript" src="Vue/js/vue.js"></script> </head> <body> <div id="app"> <h2>欢迎{{name}}</h2> <button type="button" @click="showInfo1">点我提示信息1(不传参)</button> <button type="button" @click="showInfo2(66,$event)">点我提示信息2(传参)</button> </div> </body> <script type="text/javascript"> const vm =new Vue({ el:'#app', data:{ name:'111', }, methods:{ showInfo1(){ alert(1111) // console.log(event.target.innerText) // console.log(this)//此处的this是vm，如果是箭头函数的话，此处的this是window }, showInfo2(number,a){ // alert(2222) // console.log(event.target.innerText) console.log(number,a) }, } }) </script> </html>
事件的基本使用总结：
1、使用v-on:xxx或@xxx绑定事件，其中xx是事件名；
2、事件的回调需要配置在methods对象中，最终会在vm上；
3、methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；
5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参；
7-1.1、事件绑定
如果事件绑定里面的事件不写小括号表示传的参数为$event，如果小括号里面有值则表示该值的调用事件
@click="demo"和@click="demo(event)一样 @click="demo(n) 调用n值产生的事件
7-2、事件修饰符
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3、once:事件只触发一次(常用);
4、capture:使用事件的捕获模式;
5、self:只有event.target是当前操作的元素时才触发事件;
6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
事件修饰符小技巧：修饰符能连续写的
<a href="https://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> //两个修饰符连着写，先调用前面的修饰符，然后再调用后面的
案例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件修饰符</title> <script type="text/javascript" src="Vue/js/vue.js"></script> </head> <style type="text/css"> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } .list{ width: 200px; height: 200px; background-color: orange; overflow: auto; /* overflow 是自动滚动条 */ } li{ height: 100px; } </style> <body> <div id="app"> <h2>欢迎{{name}}</h2> <!-- 阻止默认事件(常用) --> <a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a> <!-- 阻止事件冒泡(常用) --> <div class="demo1" @click="showInfo"> <button type="button" @click.stop="showInfo">点我提示信息</button> </div> <!-- 事件只触发一次(常用) --> <button type="button"@click.once="showInfo">点我提示信息</button> <!-- 使用事件的捕获模式 --> <!-- 事件的捕获阶段为由外向内,冒泡阶段为由内向外 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件 --> <div class="demo1" @click.self="showInfo"> <button type="button" @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕 --> <ul class="list" @scroll.passive="demo"> <!-- <ul class="list" @whell="demo"> --><!-- 这个是鼠标滚动轮的滚动 --> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> const vm =new Vue({ el:'#app', data:{ name:'111', }, methods:{ showInfo(event){ // console.log(event.target)//这里是self修饰符的使用案例 // event.stopPropagation()//阻止stop修饰符的使用案例 // event.preventDefault()//阻止Vue在启动时生成生产提示。 alert('欢迎进入百度搜索') }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 10000; i++) { console.log('#') } console.log('累坏了') } } }) </script> </html>
7-3、键盘事件
键盘事件按键：
@keydown是你按下按键不用你手抬起来就触发事件
@keyup是你按下按键松手了才触发的事件
@keyup.enter 点号后面的叫别名
1、Vue中常用的按键别名:
回车 =>enter
删除 =>delete (捕获“删除”和“退格”按键)
退出 =>esc
空格 =>space
换行 =>tab tab会移动焦点(必须配合keydown使用)
上 =>up
下 =>down
左 =>left
右 =>right
2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要装维kebab-case(短横线命名)
3、系统修饰键(用法特殊):ctrl、alt、shift、meta(windows电脑的win键)
(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会被触发。
(2).配合keydown使用:正常触发事件。
4、也可以使用keyCode去指定具体的按键(不推荐,已被web标准库删除)
5、Vue.config.keyCodes.自定义键名 =键码, 可以去定制按键别名
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>键盘事件</title> <script type="text/javascript" src="Vue/js/vue.js"></script> </head> <body> <div id="app"> <h2>欢迎{{name}}</h2> <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"/> </div> </body> <script type="text/javascript"> const vm =new Vue({ el:'#app', data:{ name:'111', }, methods:{ showInfo(e){ // if(e.keyCode !=13)return //keyCode获取键盘事件的代表符号 13然后判断是否按了回车按钮 // console.log(e.target.value) console.log(e.key,e.keyCode) } } }) </script> </html>
键盘事件小技巧：
系统修饰也能连续写
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"/>//此时按下ctrl+y才能提示输入
8、计算属性
8-1、插值语法实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例_插值语法实现</title> <script type="text/javascript" src="Vue/js/vue.js"></script> </head> <body> <!-- slice(0,3)这个函数用来截取长度 --> <div id="app"> 姓:<input type="text" v-model="firstName"/><br> 名:<input type="text" v-model="lastName"/><br> <!-- 全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span> --> </div> </body> <script type="text/javascript"> const vm =new Vue({ el:'#app', data:{ firstName:'张', lastName:'三', }, }) </script> </html>
8-2、methods实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例_methods实现</title> <script type="text/javascript" src="Vue/js/vue.js"></script> </head> <body> <div id="app"> 姓:<input type="text" v-model="firstName"/><br> 名:<input type="text" v-model="lastName"/><br> 全名:<span>{{fullName()}}</span> </div> </body> <script type="text/javascript"> const vm =new Vue({ el:'#app', data:{ firstName:'张', lastName:'三', }, methods:{ fullName(){ return this.firstName+'-'+this.lastName } }, }) </script> </html>
