随笔分类 - vue2-放小结
摘要：Vue中使用组件的三大步骤： 一、定义组件(创建组件) vue.extend 二、注册组件 三、使用组件(写组件标签) 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别
阅读全文
摘要：生命周期 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。 关于销毁Vue实例 1.销毁后借助V
阅读全文
摘要：过滤器 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。 语法： 1.注册过滤器：Vue.filter(name,callback) 全局过滤器 或 new Vue{filters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx
阅读全文
摘要：监视数据的原理 Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vu
阅读全文
摘要：过滤之列表排序 <body> <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 2">年
阅读全文
摘要：过滤之计算属性实现 <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key=
阅读全文
摘要：过滤之监听属性实现 <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key=
阅读全文
摘要：<html> <head> <meta charset="UTF-8" /> <title>绑定样式</title> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px
阅读全文
摘要：<body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr/> <h3>a的值是:{{numbers.a}}</h3> <button @click="numbers.a
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<sp
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 测试：<in
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<sp
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<sp
阅读全文
摘要：vue的介绍 1.vue是一套用于构建用户界面的渐进式的JavaScript框架 2.vue的特点: a.采用组件化模式,提高代码复用率,且让代码更好维护 b.声明式编码,让编码人员无需直接操作DOM,提高开发效率 c.使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点 3.学习Vue前,最
阅读全文
摘要：自定义指令 1、定义语法： (1).局部指令： new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) }) <html> <head> <meta charset="UTF-8" /> <title>自定义指令</ti
阅读全文
摘要：v-text,html,cloak,once,pre v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。 v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： (1).v
阅读全文
摘要：v-for 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） 4.v-if比v-for的优先级更高 key的原理 1. 虚拟DOM中key的作用： key是虚拟DOM对象的
阅读全文
摘要：事件绑定 含义 : 事件绑定 , xxx是事件名 简写 : [ @:xxx=' ' ] 注意 : 1.事件的回调需要配置在methods对象中，最终会在vm上； 2.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 3.methods中配置的函数，都是被Vue所管理的函数，th
阅读全文
摘要：v-if , v-show v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。v-if可以与temp
阅读全文
摘要：v-bind 含义 : 单向绑定 , 数据只能从data流向页面 简写 : [ :value=' ' ] v-model 含义 : 双向绑定 , 数据不仅能从data流向页面，还可以从页面流向data 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model
阅读全文
浙公网安备 33010602011771号