Vue
以实战为线索,逐步深入Vue开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力
想要成为码农
这个作者很懒,什么都没留下…
展开
-
Vue中的VueComponent构造函数
关于VueComponent:1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。 2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象, 即Vue帮我们执行的:new VueComponent(options)。 3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponen原创 2022-01-10 21:10:10 · 201 阅读 · 3 评论 -
Vue非单组件中的几个注意事项
几个注意点:1.关于组件名:一个单词组成:第一种写法(首字母小写):school第二种写法(首字母大写):School多个单词组成:第一种写法(kebab-case命名):my-school第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)备注:(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。(2).可以使用name配置项指定组件在开发者工具中呈现的名字。 2.关于组件标签: 第一种写法:<school&原创 2022-01-10 20:18:20 · 119 阅读 · 0 评论 -
Vue中如何使用组件
Vue中使用组件的三大步骤:一、定义组件(创建组件)二、注册组件三、使用组件(写组件标签) 一、如何定义一个组件? 使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别; 区别如下: 1.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。 2.data必须写成函数,为什么? ———— 避免组件被复用时,数据原创 2022-01-09 22:12:19 · 1298 阅读 · 0 评论 -
Vue自定义指令总结
自定义指令总结:一、定义语法:(1).局部指令:new Vue({ new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数}}) })(2).全局指令:Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 二、配置对象中常用的3个回调: (1).bind:指令与元素成功绑定时调用。原创 2022-01-09 14:33:35 · 1339 阅读 · 0 评论 -
Vue中的v-html内置指令
v-html指令:1.作用:向指定节点中渲染包含html结构的内容。2.与插值语法的区别:(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。(2).v-html可以识别html结构。3.严重注意:v-html有安全性问题!!!!(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!...原创 2022-01-03 11:22:20 · 459 阅读 · 0 评论 -
Vue中的内置指令(一)
Vue中的内置指令1、v-bind:单向绑定解析表达式,可简写为:xxx2、v-model:双向数据绑定3、v-for:遍历数组、对象、字符串4、v-on:绑定事件监听,可简写为@5、v-if:条件渲染(动态控制节点是否存在)6、v-else:条件渲染(动态控制节点是否村存在)7、v-show:条件渲染(动态控制节点是否展示)7、v-text:向其所在节点中渲染文本内容...原创 2022-01-02 22:27:44 · 428 阅读 · 0 评论 -
Vue是如何收集表单数据的?
收集表单数据:若:,则v-model收集的是value值,用户输入的就是value值。若:,则v-model收集的是value值,且要给标签配置value值。若:1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)2.配置input的value属性:(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)(2)v-model的初始值是数组,那么收集的的就是value组成的数组备注:v-model的三个修原创 2022-01-02 21:39:33 · 115 阅读 · 0 评论 -
Vue中数据监测的原理
Vue监视数据的原理:1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,propertyName/index,value) 或 vm.$set(target,propert原创 2022-01-02 20:55:09 · 112 阅读 · 0 评论 -
使用watch和computed两种方式实现列表过滤
使用watch方式new Vue({ el: "#root", data() { return { keyWord: "", persons: [ { id: "001", name: "马冬梅", age: 19, sex: '女' }, { id:原创 2022-01-02 15:20:16 · 380 阅读 · 0 评论 -
面试题:react、vue中的key有什么作用?(key的内部原理)
1、虚拟DOM中key的作用:key时虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【】新的数据生成【新的虚拟DOM】随后Vue进行【新虚拟的DOM】与【旧虚拟的DOM】的对比比较:2、对比规则:1):旧虚拟DOM中找到了与新虚拟DOM相同的key:- 若虚拟DOM中内容没变,直接使用之前真是的DOM- 若虚拟DOM中内容变了,则生成新的真是DOM,随后替换掉页面中之前的真是DOM2):就虚拟DOM中未找到与新虚拟DOM相同的key- 创建新的真实DOM,随后渲染到页面3、用原创 2022-01-02 14:44:03 · 277 阅读 · 0 评论 -
Vue中可以列表渲染哪些?
v-for指令1、用于展示列表数据2、语法:v-for="(item, index) in xxx" :key=“index”3、可遍历:数组、对象、字符串、指定次数<div id="root"> <!-- 遍历数组 --> <h2>人员列表</h2> <ul> <li v-for="(p,index) in persons" :key="index">原创 2021-12-29 22:18:35 · 214 阅读 · 0 评论 -
Vue中的条件渲染
条件渲染:1、v-if写法:- v-if=“表达式”- v-else-if=“表达式”- v-else=“表达式”适用于:切换频率比较低的场景特点:不展示DOM元素直接被移除特点:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被打乱2、v-show写法:v-show=“表达式”适用于:切换频率较高的场景特点:不展示的DOM元素未被溢出,仅仅是使用样式被隐藏掉 **注意:使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到**原创 2021-12-29 21:49:05 · 226 阅读 · 0 评论 -
Vue中绑定class和style样式
绑定样式:1、class样式写法:class=“xxx” xxx可以使字符串、对象、数组字符串写法适用于:类名不确定,要动态获取对象写法适用于:要绑定多个样式,个数不确定 ,名字也不确定数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定使不使用2、style样式如:style="{fontSize:xxx}" 其中xxx是动态值如:style="[a,b]"其中a、b是样式对象...原创 2021-12-29 21:17:36 · 194 阅读 · 0 评论 -
理解Vue中computed和watch的区别
conputed和watch之间的区别:1、conputed能完成的功能,watch都可以完成。2、watch能完成的功能,conputed不一定能完成,例如:watch可以寄进行异步操作两个重要原则:1、所有被Vue管理的函数,最好携程普通函数,这样this的指向才是vm 或 组件实例对象2、所有不被Vue管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数),最好携程箭头函数这样this的指向才是vm 或 组件实例对象 <div id="root">原创 2021-12-29 20:38:07 · 529 阅读 · 0 评论 -
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>Do原创 2021-12-28 15:37:59 · 113 阅读 · 0 评论 -
学习Vue中的深度监视(附实例)
深度监视:1、Vue中的watch默认不检测对象内部值的改变(一层)2、配置deep:true可以检测对象内部值改变(多层)备注:1、Vue滋生可以检测对象内部值的改变,但是Vue提供的watch默认不可以2、使用watch时根据数据的集体结构,决定是否采用深度监视<div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气<原创 2021-12-28 14:57:11 · 586 阅读 · 0 评论 -
学习Vue中的监视属性
监视属性watch:1、当被监视的属性变化是,回调函数自动调用,进行相关操作2、监视的属性必须存在,才能进行监视!!3、坚实的两种写法:- new vue时传入watch配置- 通过vm.$watch监视 <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div>原创 2021-12-28 14:41:03 · 83 阅读 · 0 评论 -
理解Vue中的计算属性
计算属性:1、定义:要用的属性不存在,要脱过已有属性计算得来2、原理:底层借助了Object.defineproperty方法提供的getter和setter3、get函数什么时候执行?- 初次读取时会执行一次- 当依赖的数据发生改变时会被再次调用4、优势:以methods实现相比,内部有缓存机制(复用),效率更高,调试方便5、备注:- 计算属性最终会在vm上,直接读取使用即可- 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时一栏的数据发生改变 <div原创 2021-12-28 13:24:40 · 189 阅读 · 0 评论 -
Vue中的键盘事件
1、Vue中常用的按键别名:回车:enter删除:delete(捕获"删除"和"退格键")退出:esc空格:space换行:tab上:up下:down左:left右:right2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)3、系统修饰键(用法特殊):ctrl、alt、shift、meta(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发(2).配合keydown使用:正常触发事件4原创 2021-12-28 12:17:55 · 286 阅读 · 0 评论 -
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>Do原创 2021-12-28 11:31:33 · 85 阅读 · 0 评论 -
Vue中事件的基本使用
事件的基本使用:1、使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名2、事件的回调需要配置在methods对象中,最终会在vm上3、methods中配置的函数,不要使用箭头函数!否则this就不是vm,而是window4、methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象5、@click=“demo” 和 @click=“demo($event”) 效果一致,但后者可以传参 <div id="root"> &l原创 2021-12-28 10:59:51 · 209 阅读 · 0 评论 -
理解Vue中的数据代理
1、Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)2、Vue中数据代理的好处:更加方便的操作data中的数据3、基本原理:通过Obecjt.defineProperty()把data对象中所有属性添加到vm上为每一个添加到vm上的属性,都指定一个getter/setter在getter/setter内部去操作(读/写)data中对应的属性...原创 2021-12-26 22:53:08 · 110 阅读 · 0 评论 -
理解Vue中的MVVM
MVVM模型1、M:模型(Model):data中的数据2、V:视图(View):模板代码3、VM:视图模型(ViewModel):Vue实例观察发现:1、data中所有的属性,最后都出现在了vm身上2、vm身上的所有属性,及vue原型上的所有属性,在Vue模板中都可以直接使用<div id="root"> <h1>学校名称:{{name}}</h1> <h1>学校名称:{{address}}</h1>原创 2021-12-26 21:38:07 · 124 阅读 · 0 评论 -
Vue中data与el的两种写法
data与el的两种写法1、el有2种写法- .new Vue时候配置el属性- .先创建Vue实例,随后再通过vm.$mount("#root")指定el的值2、data有2种写法- 对象式- 函数式如何选择:选择使用函数式写法,在用到组件时,data必须使用函数式,否则会报错3、一个重要原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了 <div id="root"> <h1>你好, {{name}原创 2021-12-26 21:17:43 · 139 阅读 · 0 评论 -
Vue中的两种数据绑定方式
Vue中有2中数据绑定的方式:1、单向绑定(v-bind):数据只能从data流向页面2、双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data备注:1、双向绑定一般都应用在表单类元素上(如:input、select等)2、v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值 <div id="root"> <!-- 普通写法 --> <!-- 单向数据绑定原创 2021-12-26 20:45:38 · 692 阅读 · 2 评论 -
Vue中的模板语法学习
Vue模板语法有2大类:1、插值语法:功能:用于解析标签体内容写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性2、指令语法:功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)举例:v-bind:href=“xxx” 或 简写为:href=“xxx”,xxx同样要写js表达式备注:Vue中有很多的指令,且形式都是:v-xxx,此处我们只是拿v-bind举个例子<div id="root"> <h1>插值语法<原创 2021-12-26 20:21:57 · 56 阅读 · 0 评论 -
初识Vue,HelloWord案例
初识Vue:1、想让Vue工作,就必须创建一个Vue实例,并且要传入一个配置对象2、root容器里的代码依然复合html规范,只不过混入了一些特殊的Vue语法3、root容器里的代码被称为【Vue模板】4、Vue实例和容器是一一对应的5、正是开发中只有一个Vue实例,并且会配合着组件一起使用6、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性7、一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新注意区分:js表达式 和 js代码(语句)1原创 2021-12-26 19:56:42 · 283 阅读 · 0 评论