随笔分类 - Vue
自学Vue。
将自己学到的所理解的整理。
方便后续查看复习。
摘要：下载地址如下：https://github.com/pagekit/vue-resource测试的URL请求资源地址：get请求地址： http://www.liulongbin.top:3005/api/getlunbopost请求地址：http://www.liulongbin.top:3005
阅读全文
摘要：Vue的实例，也分为三个阶段，分别是：创建阶段，运行阶段，销毁阶段。在实例运行的三个阶段中，总是伴随着各种各样的事件，那么，这些事件，统称为实例的生命周期函数（钩子函数，生命周期事件）。1.创建一个Vue的实例对象2.当执行到beforeCreate函数的时候，data上的数据还没有初始化好，此时，
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要：var vm2=new Vue({ el:"#app2", data:{}, methods:{}, filters:{//自定义过滤器 } directives:{//自定义指令区域 bold:{ bind(el,binding){ el.style.fontWeight=binding.valu
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要：在new Vue中有个filters，在里面写过滤器函数.这个过滤器只能在app2所控制区域使用。如果全局过滤器和私有过滤器重名了，就近原则。 var vm2=new Vue({ el:"#app2", data:{}, methods:{}, filters:{ addstr(data){ ret
阅读全文
摘要：过滤器的使用moment格式化时间过滤器的使用事项：1.Vue.filter("过滤器的名称",过滤器的处理函数)2.过滤器的处理函数中，第一个形参，功能已经被锁定，永远都是管道符前面的值3.调用过滤器{{item.date | formatDate }}4.在调用过滤器的时候可以传递参数{{ite
阅读全文
摘要：数组filter的应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta
阅读全文
摘要：indexOf的应用includes的应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要：v-if和v-show只有一个作用，就是根据指定的标识符，切换元素的显示和隐藏状态。v-if是实时的创建或者移除元素，从而达到元素的显示和隐藏v-show是通过为元素添加或者移除display:none来实现隐藏和显示的一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗，因此，如果
阅读全文
摘要：<div id="app"> <ul> <li v-for="item in list1">{{ item.id }} {{ item.name }}</li><!--循环对象--> </ul> </div> <script> //创建Vue实例，得到ViewModel var vm=new Vue
阅读全文
摘要：<div id="app"> <ul> <li v-for="item in list">{{ item }}</li> <li v-for="(item,i) in list1">{{ i }} {{ item }}</li><!--索引获取--> </ul> </div> <script> //
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要：.stop:阻止冒泡冒泡事件:当一个大的外部标签有一个触发事件，内部便签也有一个触发事件。如果点击内部便签触发事件的同时，外部标签事件也会跟随触发。当想要的效果是点击里面的标签，不触发外面标签事件，可以加上.stop阻止冒泡事件发生 冒泡：<input type="button" value="冒泡
阅读全文
摘要：eval("this.result=parseFloat(this.n1)${this.opt}parseFloat(this.n2)") 要么就用switch switch(this.opt){ case "+": this.result=parseFloat(this.n1)+parseFloa
阅读全文
摘要：在Vue中，只有v-model指令实现了数据的双向绑定，其他指令都是单向的。注意：v-model只能应用在表单元素中。文本输入框中输入内容改变，会自动监听h3便签内容一起改变。 <h3>{{ msg }}</h3> <input type='text' v-model="msg">
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要：绑定的事件处理函数必须定义到VM实例的methods属性中 <div> <input type="button" value="点击我" v-on:click="add"> <input type="button" value="点击我" @click="add"><!-- 简写形式@ --> <i
阅读全文
浙公网安备 33010602011771号