| 【记录】Vue2学习汇总 1 / 4 | 您所在的位置：网站首页 › vue使用方法分为几个步骤 › 【记录】Vue2学习汇总 1 / 4 |
【记录】Vue2学习汇总 1 / 4
|
Vue2学习 个人总结
前言 : 大纲 1 / 4一、重点知识点计算属性 computed监视属性 watch数据监测自定义指令 v - fbind生命周期组件 Component一、Vue中使用组件的三步骤：二、几个注意点：三、关于VueComponent：四、内置关系：
二、基础知识点语法el 与 template数据绑定 v-bind / v-model事件绑定与事件修饰符 v-on绑定样式 class style条件渲染 v-if / v-show过滤器 filter内置指令
总结
前言 : 大纲 1 / 4
教程 ：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 把Vue学习分为四个阶段，分别记录个人觉得重要的知识点 1 / 4 Vue2基础：Vue基础知识结构中的重点，及部分基础内容 2 / 4 Vue2学习 : 暂无 3 / 4 Vue2学习 : 暂无 4 / 4 Vue3基础 : 暂无 一、重点知识点 计算属性 computed原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 执行：(1).初次读取时执行一次 (2).依赖的数据发生改变时会被调用执行 如果计算属性要被修改，那必须写 set 函数去响应修改，且set中要引起计算时依赖的数据发生改变 注意：complete依赖于最终返回值，且无法执行异步操作 官网中vue的set方法： “ 向响应式对象中添加一个property，并确保这个新的property也是响应式的，且触发视图更新 ” 监视属性 watch原理：调用handler方法，其中可以设置多种参数 写法： (1). new Vue时传入watch配置 (2). 通过vm.$watch监视 深度监视：默认不监测对象内部值的改变（一层），配置deep:true可以监测对象内部值改变（多层）。 注意：watch可以进行异步操作 watch: { isHot: { immediate:true, //初始化时handler调用一次 deep:true, //深度监视 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } } 数据监测vue会监视data中所有层次的数据 1、监视对象中的数据： 通过setter实现（是数据对象） 注意：对象中后追加的属性默认不做响应式处理，如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value) 特别注意： Vue.set() 和 vm. $set() 不能给 vm 或 vm的根数据对象(data等) 添加属性！！！ 2、监测数组中的数据： 通过包裹数组更新元素的方法 原理：(1). 调用原生对应的方法对数组进行更新 (2). 重新解析模板，进而更新页面 注意：在Vue修改数组中的某个元素要使用这些API才能实现响应式： push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.1、数组使用API调用响应式原理 原型链：构造函数里的显示原型与隐式原型 例：数组中的push方法来自于Arrays中原型对象的push，但vue给继承来的隐式push做了一层封装，所以vue中数组调用的是vue封装（封装，而非重写）过的push，因此vue可以检测/监听到对应的改变，从而实现响应 自定义指令 v - fbind设置并使用流程如下 1、定义语法：局部指令与全局指令 //局部指令 new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) }) //全局指令 ```javascript Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)2、配置对象中常用的3个回调(钩子函数)： (1). bind：指令与元素成功绑定时调用 (2). inserted：指令所在元素被插入页面时调用 (3). update：指令所在模板结构被重新解析时调用 普通调用中只用到1. 3，因此如果需要详细运用，需要在代码中directives指令块部分详写回调函数 3、注意： (1). 指令定义时不加 v-，但使用时要加 v- (2). 指令名如果是多个单词，要使用 kebab-case 命名方式 (带 - ) ，不要用 camelCase 命名。 //span双标签 //input单标签 //定义全局指令 Vue.directive('fbind',{ //指令与元素成功绑定时（一上来） bind(element,binding){ element.value = binding.value }, //指令所在元素被插入页面时 inserted(element,binding){ element.focus() }, //指令所在的模板被重新解析时 update(element,binding){ element.value = binding.value } }) //定义局部指令 new Vue({ data:{ n:1 }, //... directives:{ //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时 big(element,binding){ console.log('big',this) //注意此处的this是window }, //简写形式，以fbind命名的函数 fbind:{ //指令与元素成功绑定时（一上来） bind(element,binding){ element.value = binding.value }, //指令所在元素被插入页面时 inserted(element,binding){ element.focus() }, //指令所在的模板被重新解析时 update(element,binding){ element.value = binding.value } } } }) 生命周期主要：before之前 与 ed完毕 - 创建create，挂载mount，更新update，销毁destroy 注意：生命周期函数中的this指向是 vm 或 组件实例对象 1、常用生命周期钩子： mounted挂载完毕: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】 2、beforeCreate 和 created： beforeCreate指的是创建数据检测、数据代理之前 beforeCreate之前生命周期、事件、数据处理还未开始，创建这俩之后，调用created钩子 3、beforeDestroy 和 destroyed： (1). 销毁后借助Vue开发者工具看不到任何信息 (2). 销毁后自定义事件会失效，但原生DOM事件依然有效 (3). 一般不在beforeDestroy操作数据。因为即便操作数据，也不会再触发更新流程。数据依旧可以访问 / 修改，但vue不会引发任何响应 也就是会出现以下情况：已修改数据，但是vue没有响应更新，所以页面上的数据也没有更新
组件中有四大块内容 一、Vue中使用组件的三步骤：1.1 定义组件 / 创建组件 使用 Vue.extend(options) 创建，其中options和new Vue(options)时传入的options有区别，区别如下： el不要写，为什么？ ：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器data必须写成函数，为什么？ ：避免组件被复用时，数据存在引用关系备注：使用template可以配置组件结构 //第一步：创建student组件 const student = Vue.extend({ template:` //... `, data(){ return { //... } } })1.2 注册组件 局部注册：靠 new Vue 的时候传入 components 选项 全局注册：靠 Vue.component ( ‘组件名’ , 组件 ) //第二步：注册组件（全局注册） Vue.component('hello',hello) //第二步：注册组件（局部注册） new Vue({ el:'#root', //... // 这里就是局部注册 components:{ school, student } })1.3 使用组件 编写组件标签 1.4 组件文件的作用 App.vue 汇总所有的组件 main.js 创建vue实例 index.html 将最后的结果呈现出来，其中包含导入的 < App> href = “” 代表public下的路径，可以理解为 ./ …/ 之类的路径标识 二、几个注意点：关于组件名： 一个单词组成： 第一种写法(首字母小写)：school 第二种写法(首字母大写)：School 多个单词组成： 第一种写法 ( kebab-case 命名)：my-school 第二种写法 ( CamelCase 命名)：MySchool (需要Vue脚手架支持) 备注： (1). 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行 (2). 可以使用 name 配置项指定组件在开发者工具中呈现的名字 关于组件标签： 写法： 第一种写法：< school> 第二种写法：< school /> 备注：不用使用脚手架时，会导致后续组件不能渲染。 简写方式： const school = Vue.extend(options) 可简写为：const school = options 三、关于VueComponent：组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的 我们只需要写 < school/> 或 < school> ，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options) 特别注意： 每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！ 组件配置中this指向： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】 new Vue(options)配置中this指向： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】 四、内置关系：VueComponent.prototype.__proto__ === Vue.prototype 目的：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法 Tips： 显示原型属性 Demo.prototype ，只有函数拥有显示原型属性 隐式原型属性 d.__proto__ ，实例对象身上只有隐式原型，没有显示原型 prototype 和 __proto__本质是指针，指向原型对象 关键字： 原型链、原型链继承 这样写是直接通过隐式原型属性直接去原型对象上找x，而d.x是先在自己本身找x，找不到再通过隐式原型属性接触到原型对象，在原型对象找x，所以两种写法都一样，这就是原型链。 原理：vc是Vue缔造出的VueComponent函数，VueComponent函数的prototype显示原型属性指向 缔造者 原型对象，VueComponent实例对象的__proto__隐式原型属性指向 缔造者 原型对象，此处缔造者为Vue原型对象（缔造者也可以理解为父类）。Vue原型对象的__proto__隐式原型属性指向Object原型对象，Object原型对象中的__proto__为null（Object无父类） 所以就存在有school.prototype.__proto__ = vm.__proto__
1、插值语法： 用于解析标签体内容 {{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性 2、指令语法： 用于解析标签（包括：标签属性、标签体内容、绑定事件…） v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性 el 与 templateel：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标 template：是字符串模板，作为vue实例的标识使用；该模板会替换挂载的元素，挂载元素的内容会被忽略，若模板包含多个顶级元素，或者包含普通文本，实例将会变成一个片段实例 额外：在脚手架中使用render代替template完成对页面模板的创建 数据绑定 v-bind / v-model1、单向绑定(v-bind)： 数据只能从data流向页面。 2、双向绑定(v-model)： 数据不仅能从data流向页面，还可以从页面流向data 双向绑定一般应用在表单类元素上，因为v-model默认收集的是value值 事件绑定与事件修饰符 v-on1、事件绑定： 使用v-on:xxx 或 @xxx 绑定事件 methods中配置的函数(function)，this的指向是vm 或 组件实例对象；箭头函数的this不是vm 2、事件修饰符（自行记忆，不记得百度） prevent 阻止默认事件、stop 阻止事件冒泡、once 事件只触发一次、capture 使用事件的捕获模式 self 只有event.target是当前操作的元素时才触发事件、passive 默认立即执行，无需等待事件回调执行完毕 绑定样式 class style1、class样式： class=“xxx” xxx可以是字符串、对象、数组 绑定单个样式：(1) 字符串：类名不确定，动态获取 绑定多个样式：(1) 对象：个数不确定，名字不确定 (2) 数组：个数确定，名字确定，但不确定用不用 2、style样式： :style = “{fontSize: xxx}” 其中xxx是动态值 :style = “[a,b]” 其中a、b是样式 对象(对象) {{name}} //.basic是已确定的样式 {{name}} data:{ //... classArr:['atguigu1','atguigu2','样式名'], classObj:{ atguigu1:false, atguigu2:false }, styleObj:{ fontSize: '40px', color:'red' }, styleObj2:{ backgroundColor:'orange' }, styleArr:[ { fontSize: '40px', color:'blue' },{ backgroundColor:'gray'} ] }, 条件渲染 v-if / v-show1、v-if 不展示的DOM元素直接被 移除 写法：v-if = " 表达式 " 、 v-else-if = " 表达式 " 、 v-else = " 表达式 " 注意：结构不能被 “打断 ” 2、v-show 不展示的DOM元素未被移除，仅仅使用样式隐藏掉 写法：v-show=“表达式” 过滤器 filter对要显示的数据进行特定格式化后再显示（适用于简单逻辑处理） 注册：new Vue{filters:{}} 使用：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名” 注意： (1). 过滤器可以接收额外参数、多个过滤器可以串联 (2). 并非改变原本的数据, 而是产生新的对应的数据。所以如需改变原数据，必须接收 内置指令v-text 功能：向其所在的节点中渲染文本内容 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会 v-html 功能：向指定节点中渲染包含html结构的内容 与插值语法的区别： (1). v-html会替换掉节点中所有的内容，{{xx}}则不会 (2). v-html可以识别html结构 严重注意： v-html有安全性问题！！！！ (1). 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2). 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！ v-cloak（没有值）特殊属性 功能：Vue实例创建完毕并接管容器后，会删掉v-cloak属性 作用：使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题 v-once 功能：v-once所在节点在初次动态渲染后，就视为静态内容了 作用：之后数据的改变不会引起v-once所在结构的更新，可以用于优化性能 v-pre 功能：跳过其所在节点的编译过程 功能使用：利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译 总结此为视频进度 p1 - p60 小结 练习文件路径：E:\vsCode_workplace\vue_first 资料文件与样例代码文件路径：E:\vsCode_workplace\VueStudy\vue_basic |
【本文地址】