一、Vue基础
1.1介绍
Vue.js 构建用户 界面 的渐进式框架
核心:视图层
易于上手,便于与第三方库或既有项目整合
易用、灵活、高效
1.2声明式渲染和组件化
组件:复用、结构清晰、便于比对
1.3MVVM模式
避免直接操作DOM,降低DOM操作的复杂性
二、vue基础
2.1vue入门
2.2使用vue实现
第一步:引入vue库文件
<script src="./js/vue.js"></script>
第二步:根容器,js对象转为真实的html后,在放在网页的什么位置中
挂载点可以写多个,但是在工作中一般只有1个
<div id="app"> //第四步:使用 //模板语法 插值表达式 mustcache模板名称【小胡子语法】 //title它就是在vue实例化配置data属性 中的数据 <h3>{{ title }}</h3> //v-model,语法糖 <input type="text" v-model="title"> </div>
第三步:实例化vue
const vm= new vue({ //vue处理完成数据展示在页面中的挂载点dom el:"#app", //vue2中唯一一个地方可以把data写成对象的地方,就是在实例化vue类时声明vue要渲染的数据 data: { title: 'hello vue' } })
2.3为什么vue使用虚拟DOM
提高性能 跨平台
2.4安装
Vue Devtools
edge专用->获取
vetur
2.5
区别:Object.defuneProperty劫持某一个属性 无法对新增数组进行代理 获取、修改
Proxy 劫持对象属性更多,
for in对象
nodeType 1元素 3 文本
attributes伪类 name value
...转数组
2.6Diff对比
patch主要做4个判断
①没有新节点,直接触发旧节点,进行销毁。
②没有旧节点,不需要比较,直接新建
③旧节点和新节点一样时,直接调用 patchVnode 去处理这两个节点
数组不能放太深,影响性能
Object.freeze({id:1 })冻结
Object.isFrozen 检查对象是否冻结
return {}.toString
判断是不是一个纯对象
三、模板语法
3.1插值表达式
{{变量}}
第1步: 引入vue库文件
<script src="./js/vue.js"></script>
第2步:挂载点
<div id="app"> </div>
vue模板的表达式为 {{ 变量 }}
表达式中不能定义变量或函数,也不可以写if条件或循环
绑定变量
<div>{{ title }}</div>
进行计算 vue模板中不太建议在里面写运算
<div>{{1+1}}</div>
调用函数或方法
<div>{{sum()}}</div>
调用js内置方法 不太推荐
<div>{{ '电饭锅是'.substr(0,3) }}</div>
三目运算
<div>{{ age<20?'未成年':'成年' }}</div>
第三步 实例化:vue
<script> const vm = new Vue({ el: '#app', data: { age: 18, title: 'hello vue', // 函数可以写在data中的,但是不太建议 // data中的数据都会被劫持,但是函数是没有必须劫持的 // vue为了提升性能,新增一个配置选项,用于定义函数方法method,它不会被劫持 // sum }, methods: { sum() { return 1 + 2 } } }) </script>
??空值判断
?.可选
!. 非空
3.2指令
操作DOM
表达式,不会对于标签时行解决输出,它会转义后输出,为了安全
<div>{{title}}</div>
解析字符串中的html标签,解析输出,一般用于在后台添加的富文本内容,在前台显示所用 解决闪现
<div v-html="title"></div>
转义输出,为了解决早期没有使用工程化时,直接script引入vue,进行使用时有花括号闪现问题
一般用不到,在单文件vue中,不会有这样的闪现问题,所以用不到
<div v-text='title'></div>
vue中提供一个专门用于解决闪现问题的指令 v-cloak
v-html或v-text它们能够解决闪现,但是有的时候,一些项目在前期没有用它,这时候如果全部去修改,工程量有点大,可以用此指令
<div v-cloak>{{title}}</div>
v-pre对于数据,只绑定一次 性能优化
<div v-once>{{title}}</div>
条件元素
v-if 如果条件不成立,则不创建或删除已创建元素,初始化它的性能更高,如果频繁切换性能低一些
v-show 如果条件不成立,通过样式来隐藏,初始化它的性能低一些,如果频繁切换则性能更好一些
<div v-if="age<12">v-if 未成年</div> <div v-show="age<12">v-show 未成年</div>
v-for
v-on
v-bind
v-model
v-cloak解决闪现
v-pre
性能优化,提升性能
只有静态才可以用
v-once
只渲染元素和组件一次,之后元素和组件
对于数据,只绑定一次,性能优化
高阶函数 一个函数返回一个函数
把函数当作一个参数传进另一个函数
事件
<div id="app"> <h3>{{age}}</h3> //点击按钮,让AGE自增 <button v-on:click="setAge">+++</button> <!-- 第3步:实例化vue --> <script> const vm = new Vue({ el: '#app', data: { age: 11 }, methods: { setAge() { this.age++ } } }) </script>
Proxy和DefineProperty区别
Object.defineProperty 是 Es5 的方法,Proxy 是 Es6 的方法
defineProperty 不能监听到数组下标变化和对象新增属性,Proxy 可以
defineProperty 是劫持对象属性,Proxy 是代理整个对象
defineProperty 局限性大,只能针对单属性监听,所以在一开始就要全部递归监听。Proxy 对象嵌套属性运行时递归,用到才代理,也不需要维护特别多的依赖关系,性能提升很大,且首次渲染更快
defineProperty 会污染原对象,修改时是修改原对象,Proxy 是对原对象进行代理并会返回一个新的代理对象,修改的是代理对象
defineProperty 不兼容 IE8,Proxy 不兼容 IE11