vue
weixin_51571870
这个作者很懒,什么都没留下…
展开
-
Vue(四十三)、路由命名和参数传递
Vue路由命名和传参原创 2022-09-27 23:50:23 · 81 阅读 · 0 评论 -
Vue(四十二)、路由基本使用
vue路由原创 2022-09-27 00:12:45 · 245 阅读 · 0 评论 -
Vue(四十一)、Vuex的应用
vuex的应用原创 2022-09-21 23:50:14 · 81 阅读 · 0 评论 -
Vue(三十二)插件
总结一、功能:用于增强Vue二、本质:包含install方法的一个对象,install的第一个参数书Vue,第二个以后的参数是插件使用者传递的数据。三、使用(一)、定义插件:对象.install = function(Vue,options){//1.添加全局过滤器Vue.filter(...)// 2.添加全局指令Vue.direcive(...)//3.配置全局混入(合)Vue.mixin(...)//4.添加实例方法Vue.prototype.$my原创 2022-05-01 00:17:54 · 58 阅读 · 0 评论 -
Vue(二十三)组件初始
总结一、组件的概念二、组件的分类三、组件的使用(一)组件使用的三大步骤1、定义组件(创建组件)①定义:使用Vue.extend(options)创建,其中options和new Vue(options)时传入的options 几乎一样,不同点在于:a.el不写(最终所有的组件都要经过一个vm管理,由vm中的el决定服务于那个容器)b.data必须写成函数(避免组件被复用时,数据存在引用关系)2、注册组件①局部注册:在new Vue的时候传入compone.原创 2022-03-20 23:16:50 · 329 阅读 · 0 评论 -
Vue(二十二)生命周期
总结1、生命周期又名生命周期回调函数,生命周期函数、生命周期钩子,是Vue在关键时刻帮我们调用的一些特殊名称的函数2、生命周期函数的名字不能岁半改3、生命周期函数中的this指向vm或组件的实例对象4、常用的生命周期钩子①mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息【初始化dom操作】②beforeDestory:清除定时器。绑定自定义事件、取消订阅消息【收尾工作】5、关于销毁Vue实例①销毁后借助vue开发者工具看不到任何消息②销毁后自定义事件原创 2022-03-20 21:00:00 · 957 阅读 · 0 评论 -
Vue(二十一)自定义指令
总结一、自定义语法1、局部指令a、函数类型(用于比较简单的指令)new Vue({ directives:{ 指令名:回调函数 } })b、对象类型(用于需要一些细微处理时)new Vue({ directives: { 指令名:配置对象 } })2、全局指令a、对象类...原创 2022-03-20 17:00:52 · 82 阅读 · 0 评论 -
Vue(二十)内置指令
总结:常见的内置指令1、v-modle:双向数据绑定,用于表单元素2、v-on:绑定事件监听,可简写为@3、v-bind:单向绑定解析表达式,可简写为:xxx4、v-for:遍历数组、对象、字符串5、v-if、v-else:条件渲染(动态控制节点是否存在)6、v-show:条件渲染(动态控制节点是否展示)7、v-text:向其所在的节点中渲染内容(会替换标签中原有的内容,不会解析标签)案例8、v-html:①作用:向指定节点中渲染包含htm结构中的原创 2022-03-20 11:33:41 · 1669 阅读 · 0 评论 -
Vue(十九)过滤器
过滤器总结:1、定义:对要显示的数据进行特点格式化后再进行显示(适用于一些简单的逻辑处理)2、语法:①注册过滤器a:全局 Vue.fliter(name,callback)b:局部:new Vue({filters:{}})②使用过滤器:{{xxx|name}} 或v-bind:属性 = "xxx|name" (xxx :要过滤的数据,name:过滤器的明名字)3、注意①过滤器可以接受额外参数,多个过滤器可以串联②并没有改变原有的数据,是产生新的对应的数据案列下载原创 2022-03-20 10:11:03 · 892 阅读 · 0 评论 -
Vue(十八)v-model在表单中的应用
总结:1、v-model收集的是value值,输入类标签不需要手动添加添加value属性,如 type=‘text’等2、非输入类标签需要手动添加value属性,如 type=‘radio’,type=‘checkbox’等3、若<input type="checkbox">①没有配置value属性,收集的是checked(勾选or未勾选,收集的是布尔值)②配置了vlaue属性a、若v-model 的初始值是非数组,那么收集的是checked(勾选or未勾选,收集的是布尔原创 2022-03-17 22:03:34 · 167 阅读 · 0 评论 -
Vue(十六)列表过滤
案例1、计算属性实现列表过滤2、监听属性实现列表过滤计算属性实现列表排序原创 2022-03-15 00:11:39 · 409 阅读 · 0 评论 -
Vue(十五)v-for渲染时key的作用
总结1、虚拟DOM中key的作用(key存在于虚拟DOM不会在真实DOM中)key是虚拟dom对象的标识,当状态中的数据发生变化时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较,规则如下(1)旧虚拟DOM中找到了与新虚拟DOM相同的key①若虚拟DOM中内容没有变化,直接使用之前的真实DOM②若虚拟DOM中内容变了,则生成的新的DOM随后替换掉之前页面的真实DOM(2)旧虚拟DOM中未找到与新虚拟DOM相同的key:创建新的真实DOM随后渲原创 2022-03-14 22:54:47 · 118 阅读 · 0 评论 -
Vue(十三)条件渲染
条件渲染总结一、v-if1、写法(1).v-if="表达式"(2)v-else-if="表达式"(3)v-else=“表达式”注:v-if可和v-else-if、v-else一起使用,但必须连用结构不能被打断2、使用场景:切换频率较低的场景3、特点:不展示的DOM元素直接被删除二、v-show1、写法:v-show=“表达式”2、用于切换频率较高的场所3、特点:不展示的DOM元素未被移除,样式display:none使用v-if时元素可能无法获取到,v-show元原创 2022-03-13 23:20:49 · 862 阅读 · 0 评论 -
Vue(十二)样式属性
样式绑定方式一、class形式1、字符串写法:类名不确定需要动态指定2、数组写法:绑定的样式个数不确定、名字也不确定3、对象写法:绑定的样式个数确定、名字也确定,但需要动态决定用不用案列一、class形式...原创 2022-03-13 22:44:19 · 109 阅读 · 0 评论 -
Vue (十一)计算属性和监听属性
总结:computed和watch之间的区别1、computed能完成的功能,watch都可以完成2、watch能完成的功能computed不一定可以完成,eg:watch可以进行异步操作注:1、被Vue管理的函数最号写成普通函数,这样this的指向是vm或组件的实例对象2、所有不被Vue管理的函数(定时器的回调函数,ajax的回调函数、promise的回调函数)最好写成箭头函数,这样this的指向才是vm或组件的实例对象案例:监听计算属性...原创 2022-03-13 10:59:36 · 791 阅读 · 0 评论 -
Vue(十)监视属性watch
总结:一、监听1、当被监视的属性发生变化时回调函数自动调用,进行相关操作2、监视的属性(包括计算属性和属性)必须存在才能进行监视3、监视属性的两种写法①new Vue时传入watch配置(确定要监视谁时调用)②通过vm.$watch监视二、深度监听1、Vue中的watch默认不监视对象内部值得改变(只监视一层)2、配置deep:true可以监视对象内部(多层)值得改变注:1、Vue自身可以监视对象内部值得变化,但Vue提供的watch默认不可以2、使用watc原创 2022-03-13 09:21:01 · 2078 阅读 · 0 评论 -
Vue(九)计算属性
总结一、计算属性1、定义:要用的属性不存在,用通过已有的属性(data中的属性)计算得来2、原理:依赖于Object.defineproperty方法提供的getter和setter3、get函数执行时间(get函数返回值就是计算属性的值)①初次读取时会执行函数②当依赖的数据发生变化时再次调用4、优势:与methods相比有内部缓存机制(复用),效率更高,调试方便5、备注①计算属性最终会出现在vm上,直接读取即可使用②如果计算属性被修改,必须写set函数去响应修改,且原创 2022-03-12 23:46:50 · 700 阅读 · 0 评论 -
Vue(八)键盘事件
总结(vue中常见的按键别名)一、常见的按键别名1、回车enter2、删除 delete(捕获“删除”和“退格”键)3、退出esc4、空格 space5、换行 tab(特殊,必须配置keydown使用)6、上 up7、下down8、左left9、右rightkeydown事件按下键盘不用抬起来就可以触发事件,keyup按下键盘抬起才会触发事件二、Vue未提供别名的按键,可以使用按键原始的key值绑定,有多个单词时转为kebab-case(短线命名)三、系统原创 2022-03-12 22:41:29 · 1649 阅读 · 0 评论 -
Vue(七)事件修饰符
总结1、prevent:阻止默认事件2、stop:阻止事件冒泡(由内往外)3、once:事件只触发一次4、capture:事件捕获(由外往内)5、self:只用event.target是当前操作的元素时才触发事件6、passive:事件默认为立即执行,无需等待事件回调执行完毕其中1-3事件修饰符常用...原创 2022-03-12 20:37:04 · 90 阅读 · 0 评论 -
Vue(六)事件基本使用
总结1、事件使用v-on:xxx或@xxx绑定,xxx指事件名2、事件的回调需要配置在methods对象中,最终会在vm上3、methods中配置的函数都是被Vue管理的函数,this指向vm或组件实例对象,如果使用了箭头函数其指向会发生改变。4、@click="met"和@click="met($event)'效果一样案例...原创 2022-03-12 20:06:47 · 281 阅读 · 0 评论