随笔分类 - 1_vue（组件、vue异常、vue事件、vue_resource、mixin、vue结构优化、vue表单等）
摘要：VUE课程参考 15、条件渲染v-if 一、总结 一句话总结： v-if指令用来做条件渲染，也就是满足条件就渲染元素，否则不渲染，后面可以接v-else-if、v-else等指令 <div id="app"> <!--v-if条件渲染--> <!-- <p v-if="isLogin">已登录</p
阅读全文
摘要：VUE课程参考 16、条件渲染v-show 一、总结 一句话总结： 条件渲染指令除了v-if，还有v-show，v-show指令用于根据元素的状态控制元素的显示和隐藏 <div id="app"> <p v-if="ok">{{'v-if：'+msg}}</p> <p v-show="ok">{{'
阅读全文
摘要：VUE课程参考 13、循环指令v-for 一、总结 一句话总结： vue中循环指令v-for可以循环数组（v-for="item in list"）、循环对象（v-for="(val,key) in obj"）、循环数字（v-for="count in 10"） 1、v-for循环数组：<p v-f
阅读全文
摘要：VUE课程参考 14、v-for中key属性使用 一、总结 一句话总结： v-for循环的key属性 用来跟踪每个节点的身份，从而避免重新排序元素造成的元素状态混乱 <p v-for="item in list" :key="item.id"> <input type="checkbox">{{it
阅读全文
摘要：VUE课程参考 11、class类绑定 一、总结 一句话总结： vue中绑定class有数组语法和对象语法，数组语法的时候会依次将数组里面的元素解析到class里面，对象语法就是将键值对中的值为true的键添加到class中 <div id="app"> <!--1、数组语法--> <p :clas
阅读全文
摘要：VUE课程 14、使用v-model实现简单计算器 一、总结 一句话总结： 使用v-model实现简单计算器也就是用v-model指令做双向数据绑定，这样表单数据发生变化时，vue对象就可以自动接收到数据，从而根据这些新数据得到结果。交互多的页面用vue做双向数据绑定会比较方便。 <div id="
阅读全文
摘要：VUE课程 13、双向数据绑定v-model 一、总结 一句话总结： vue中，v-model指令可以做双向绑定，也就是M（model）和V（view）的双向绑定 <div id="app"> <input type="text" v-model="msg2"> <!-- <input type="
阅读全文
摘要：VUE课程 12、事件修饰符 一、总结 一句话总结： vue中可以可以用事件修饰符来做我们事件操作中常用的阻止默认事件（event.preventDefault()）或者阻止事件冒泡（event.stopPropagation()）等事件操作 vue中常用的事件修饰符有.stop（阻止冒泡）、.pr
阅读全文
摘要：VUE课程 10、跑马灯效果 一、总结 一句话总结： 跑马灯效果的逻辑就是不断的将字符串的第一个字符挪到字符串最后面，可以用定时器来做，涉及到vue的知识点就是事件绑定 <div id="app"> <p v-text="msg"></p> <div> <button @click="lang">浪
阅读全文
摘要：VUE课程参考 9、双向数据绑定v-model 一、总结 一句话总结： vue中，v-model指令可以做双向绑定，也就是M（model）到V（view）的双向绑定 <div id="app"> <p>{{msg}}</p> <!--vue中，v-model指令可以做双向绑定，也就是M（model）
阅读全文
摘要：VUE课程参考 8、事件修饰符 一、总结 一句话总结： vue中可以可以用事件修饰符来做我们事件操作中常用的阻止默认事件（event.preventDefault()）或者阻止事件冒泡（event.stopPropagation()）等事件操作 vue中常用的事件修饰符有.stop（阻止冒泡）、.p
阅读全文
摘要：VUE课程参考 10、使用v-model实现简单计算器 一、总结 一句话总结： 使用v-model实现简单计算器也就是v-model做双向数据绑定，交互多的页面用vue做双向数据绑定会比较方便 <div id="app"> <input type="text" v-model="n1" @chang
阅读全文
摘要：VUE课程参考 7、跑马灯效果 一、总结 一句话总结： 跑马灯的效果也就是不断的将字符串的最后一个字符移动到字符串最前面，涉及到的知识点也就是定时器、字符串拼接、vue事件绑定等等 <div id="app"> <p>{{msg}}</p> <div> <button @click="lang">浪
阅读全文
摘要：VUE课程 9、事件绑定v-on 一、总结 一句话总结： vue模板中可以通过v-on来绑定事件，比如click点击事件等等，事件要使用的方法可以定义在vue对象的配置对象的methods属性中 <div id="app"> <button v-on:click="show">点我有惊喜</butt
阅读全文
摘要：VUE课程 8、属性绑定v-bind 一、总结 一句话总结： v-bind是vue中绑定属性的指令，可以将标签里面的属性绑定vue里面的数据，v-bind: 指令可以被简写为 :要绑定的属性 <div id="app"> <p v-bind:title="myTitle">{{msg}}</p> <
阅读全文
摘要：VUE课程 7、解决插值表达式闪烁问题 一、总结 一句话总结： vue中解决插值表达式闪烁问题，可以用v-cloak指令，v-cloak在css中用属性选择器设置为display: none; <style> /*属性选择器*/ [v-cloak]{ display: none; } </style
阅读全文
摘要：VUE课程 6、v-text和v-html指令 一、总结 一句话总结： v-text：以文本的方式来插入数据 v-html：以html标签的方式来插入数据 <div v-text="msg"></div> <div v-html="msg2"></div> 1、v-text指令和插值表达式的区别？
阅读全文
摘要：VUE课程 5、vue devtools 一、总结 一句话总结： vue devtools作用：vue devtools是vue的开发工具，可以很方便的检测出vue中间数据的变化 vue devtools注意：vue devtools在vue的开发环境（vue.js）中才可以用，生产环境（vue.m
阅读全文
摘要：VUE课程 4、MVVM原理 一、总结 一句话总结： 第一个m是Model，数据模型，就是用来获取数据的 第二个v是View，也就是视图，数据肯定是要在视图里面展示的 第三个vm是ViewModel，也就是视图模型，也就是vue实例的部分，也就是做dom监听和数据绑定 1、mvvm中的vm层的意义？
阅读全文
摘要：VUE课程 3、VUE最简单双向数据绑定实例 一、总结 一句话总结： vue的双向数据绑定可以通过v-model指令：例如<input type="text" v-model="msg2">，这样vue对象可以在input的值发生变化的时候同步的去更新vue对象数据里面msg2的内容 <div id
阅读全文
浙公网安备 33010602011771号