目录
Vue
开始使用Vue
1.初始Vue：
2.Vue模板语法：
3.数据绑定
4.data与el的两种写法：
5.MVVM模型（架构模型）
6.数据代理
7.事件处理
8.计算属性(computed)
9. 监视属性 (watch)
10.computed和watch的区别
11.绑定样式
12.条件渲染
13.key的原理
14Vue数据监测
15.收集表单数据
16.过滤器
17.内置指定
18.自定义指令
19.生命周期
Vue
轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
移动优先。更适合移动端，比如移动端的 Touch 事件
易上手，学习曲线平稳，文档齐全
吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
Vue是一个渐进式的框架可以将Vue作为你应用的一 部分嵌入其中,带来更丰富的交互体验。
开源，社区活跃度高
Vue有很多特点和Web开发中常见的高级功能
解耦视图和数据.
可复用的组件
前端路由技术
状态管理
虚拟DOM
开始使用Vue
1.引入vue.js
官网：vuejs.org
引入vue.js后，给我们提供了一个构造函数 Vue
在js中，new Vue()
new Vue() 后会返回一个vue实例对象，我们用变量接着它
const vm = new Vue()
传递一个配置对象{} – > const vm = new Vue({})
1.想让Vue工作,就必须创建一个VUe实列,且要传入一个配置对象
2.root容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue写法
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一一对应的
5.真实开发中只有一个vue实例，并且会配合组件一起使用
6.{{xxx}}中xxx可以写js表达式，且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变，那么页面中用该数据的地方也会自动更新
Hello {{name}} 今年{{age}} 岁 ，{{Date.now()}}
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM *** 作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
Vue模块语法有2大类：
1.插值语法：
功能：用于解析标签体内的内容
写法：{{xxx}} xxx就是js表达式，且可以直接读取到data中的所有属性
2.指令语法：
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件...)
举例：v-bind:href='xxx' 或简写为 :href = 'xxx' xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注：Vue中有很多指令，且指令都是： v-????
差值语法
你好,{{name}}
指令语法：
点我去学习{{scool.zhishi}}
Vue中有两种数据绑定的方式
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
注意：
1.双向绑定一般都应用于表单类元素上(如：input、select等)
2.v-model:value 可以简写成v-model,因为v-model默认收集的就是value值
单向数据绑定：
双向数据绑定：
双向数据绑定：
1.el有2种写法：
（1）:new Vue 时候配置el属性
（2):先创建Vue实例，随后再通过vm.$mount('#root') 指定el的值
2.data有2种写法：
（1)对象式
（2)函数式
如何选择：以后到组件的时候，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
5.MVVM模型（架构模型）M:模型(Model)：对应data中的数据
V:视图(View):模板
VM：视图模型(ViewModel):Vue实例对象
观察发现：
1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
6.数据代理7.事件处理
事件的基本使用：
1.使用v-on:xxx 或者@xxx绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中,最终会在vm上，
3.methods中的配置的函数，不要用箭头函数，否则this就不是vm
4.methods中配置的函数，都是被Vue所管理的函数,this是指向是vm 或者 组件实例对象
5.@click='demo',和@click='demo(@event)' 效果一样，但是后者可以传参
欢迎来到{{name}}学习
事件修饰符
1.prevent 阻止默认事件
2.stop 阻止事件冒泡
3.once 事件只触发一次
4.capture 使用事件的捕获模式
5.self：只有event.target是当前 *** 作元素时才触发
6.passive:事件默认行为立即执行，无需等待事件回调执行完毕
欢迎来到{{name}}学习
有问题就百度
div1
div2
div3
div4
键盘事件
键盘中常用按键的别名：
回车=>enter
删除=>delete(捕获'删除'和'退格'键)
退出=>esc
空格=>space
换行=>tab
上 =>up
下 =>down
左 =>left
右 =>right
2.Vue没有提供别名的按键,可以使用按键原始的key值取绑定，但是要转化为kebab-case(短横线命名)
获取原始的key值 console.log(e.key)
3.系统修饰键(用法特殊)：ctrl 、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时,在按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件
系统修饰键配合其他按键可以连写 比如 ctrl + y 直接 在 @keyup 后面添加 .ctrl.y
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
欢迎来到{{name}}学习
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层原理借助了Object.defineproperty 方法提供的getter 和setter
3.get函数什么时候执行？
(1).初次读取时会执行一次
(2).当依赖的数据发生改变时会被再次调用
4.优势：与methods现实相比，内部有缓存机制(复用),效率更高,调试方便。
5.备注：
1.计算属性最终会出现vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
姓：
名：
姓名：{{fullName}}
1.当被监视的属性变化时，回调函数自动调用，进行相关 *** 作
2.监视的属性必须存在，才能进行监视！
3.监视的两种写法：
(1):new Vue 时传入watch配置
(2):通过vm.$watch监视
深度监视：
(1).Vue中的watch默认不检测对象内部值的改变(一层)
(2).配置deep:true可以检测对象中内部值的改变(多层)
备注：
(3).Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以!!
(4).使用watch时根据数据的具体结构,决定是否采用深度监视
data(){
return{
isHot:true,
numbers:{
a:1,
b:2
}
}
},
watch:{
//你要监测的属性
isHot:{
immediate:true, //初始化时让handler调用一下
handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue);
}
},
// 监视多级结构中某个属性的变化
'numbers.a':{
handler(newValue,oldValue){
// console.log('number的a被秀该了',newValue,oldValue)
}
},
// 监视多级结构中所有属性的变化 deep
numbers:{
//配置deep:true可以检测对象中内部值的改变(多层)
deep:true,
handler(newValue,oldValue){
console.log('我改变了',newValue,oldValue)
}
}
}1.computed能完成的功能,watch都可以完成
2.watch能完成的功能,computed不一定能完成,比如：watch可以进行异步 *** 作
两个重要的原则：
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
2.所有不被Vue所管理的函数(定时器的回到函数、ajax的回调函数等),最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象
11.绑定样式1.class样式
写法： xxx可以是字符串、对象、数组
字符串的写法适用于：类名不确定，要动态获取
数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
对象写法适用于：要绑定多个样式，个数确定，名字也确定，但是不确定用不用
{{name}}
{{name}}
{{name}}
//vue部分：
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
const vm = new Vue({
data:function(){
return{
name:'小罗',
// 字符串写法
mood:'happy',
// 数组写法
arr:['atguigu2','atguigu3','atguigu1'],
}
})
vm.$mount('#root')
2.style样式
: 其中xxx是动态值
:其中a,b是样式对象
{{name}}
{{name}}
const vm = new Vue({
data:function(){
return{
// 对象写法
classObj:{
happy:true,
sad:false
},
// 内联对象写法
styleObj:{
backgroundColor:'red',
fontSize:'60px'
},
// 内联数组写法
styleArray:[
{
happy:true,
sad:false
},
{
backgroundColor:'red',
fontSize:'60px'
}
]
}
})
vm.$mount('#root')1.v-if:
(1).v-if="表达式"
(2).v-else-if='表达式'
(3).v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用。但是要求结构不能被'打断'
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM的元素未被移除，仅仅是使用样式隐藏掉
3.注意：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到
13.key的原理面试题：react、Vue中的key有什么作用(key的内部原理)
1.虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数组]生成[新的虚拟DOM]，
随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虚拟DOM中内容没变，直接使用之前的真实DOM！
②.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面
3.用index作为key可能会引发的问题
1.若对数据进行:逆序添加，逆序删除等破坏顺序 *** 作：
会产生没有必要的真实DOM更新 ==> 页面效果没有问题，但是效率低
2.如果结构中还包含输入类的DOM:
会产生错误DOM更新 ==>页面有问题.
4.开发中如何选择key？
1.最好使用每一条数据的唯一标识作为key，比如id、手机号、身份z号、学号等唯一值
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序 *** 作，仅用于渲染列表用于展示，
使用index作为key时没有问题的
{{p.name}}-{{p.age}}
{{p.name}}-{{p.age}}
1.Vue会监视data中所有层次的数据。
2.如何监测对象中的数据？
通过setter实现监视，且要在new Vue是就传入要监视的数据。
(1).对象中后追加的属性，Vue默认不作为响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)
3.如何检测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重写解析模板,进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm 的根数据对象 添加 属性！！
15.收集表单数据v-model 收集的是value 值 ，用户输入的就是value 值
v-model 收集的是value值，且要给标签配置value值
1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
2.配置input的value属性：
(1)v-modeld的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
(2).v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点在收集数据(防抖)
number: 数据字符串转为有效的数字
trim：输入首尾空格过滤
16.过滤器定义：对要显示的数据进行特定格式后再显示(适用于一些简单逻辑的处理)
语法：
1.注册过滤器:Vue.filter(name,callback) 或 new Vue(filters:{})
2.使用过滤器：{{xxx | 过滤器名} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接受额外参数、多个过滤器也可以串联
2.并没有改变原来的数据，是产生新的对应的数据。
17.内置指定v-biand:单向绑定解析表达式，可以简写为:xxx
v-model:双向数据绑定
v-for；遍历数组 / 对象/字符串
v-on:绑定事件监听，可以简写为@
v-if:条件渲染(动态控制节点是否存在)
v-else:条件渲染(动态控制节点是否存在)
v-show:条件渲染(动态控制节点是否展示)
v-text:
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换节点中的内容.{{xx}}则不会
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，插值语法不会
(2)v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要在用户提交的内容上使用！！
v-colak指令(没有值)：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令：
1.跳过其所在节点的编译过程
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
18.自定义指令局部指令：
new Vue({ diredctives:{指令名：配置对象} })
或者
new Vue({
directives(){}
})
全局指令：
Vue.directive(指令名，配置对象)
或
Vue.directive(指令名，回调函数)
配置对象中常用的3个回调：
.bind:指令与元素成功绑定时调用
.inserted:指令所在元素被插入页面时调用
update:指令所在模板结构被重新解析时调用
注意：
指令定义时不加v-，但使用时要加v-
指令名如果是多个单词，要使用kebab-case命名方式，不要用cameCase命名.
19.生命周期1.又名：生命周期回调函数，生命周期函数，生命周期钩子
2.是什么：Vue在关键时刻帮助我们调用的一些特殊名称的函数
3.生命周期函数在名字不可更改，但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm 或 组件实例对象
vm的生命周期
将要创建=>调用beforeCreate函数
创建完毕=>调用created函数
将要挂载=>调用beforeMount函数
(重要)挂载完毕=>调用mounted函数。------->重要的钩子
将要更新=>调用beforeUpdate函数
更新完毕=>调用updated函数
(重要)将要销毁=>调用beforeDestroy函数。----------------->重要的钩子
销毁完毕=>调用destroyed函数。
常用的生命周期钩子
mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化 *** 作】
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息【收尾工作】
关于销毁Vue实例
销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会载beforeDestroy *** 作数据，因为即便 *** 作数据，也不会再触发更新流程了。
感谢官方
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）