vue
mintsolace
这个作者很懒,什么都没留下…
展开
-
VUE——生命周期函数组建运行和销毁
</html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/vue-2.4.0.js"></script>...原创 2019-11-25 22:10:22 · 1260 阅读 · 0 评论 -
VUE——使用钩子函数
指令定义函数提供几个钩子函数bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。update:所在组件的VNode更新时调用,但可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可以通过比较更新前后的值来忽略不必要的...原创 2019-11-24 16:40:56 · 812 阅读 · 0 评论 -
VUE——定义格式化时间的全局过滤器
使用品牌案例部分的代码,修改部分如下。 <td>{{ item.ctime | dateFormat }}</td> <td> <a href="" @click.prevent="del(item.id)">删除</...原创 2019-11-21 21:04:38 · 176 阅读 · 0 评论 -
VUE——全局过滤器的基本使用
过滤器:Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustachc插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示; //过滤器调用时的格式,{{ name | 过滤器名称 }} Vue.filter('过滤器名称', function(){}) //过滤器中...原创 2019-11-18 21:46:15 · 546 阅读 · 0 评论 -
VUE——案例同上。根据关键字实现数组过滤
<tbody> <!--之前,v-for中的数据,都是直接从data上的list中直接渲染过来的--> <!--现在,我们自定义一个search方法,同时把所有关键字通过传参的形式,传递给了search方法--> <!--在search方...原创 2019-11-17 22:44:47 · 463 阅读 · 0 评论 -
VUE——品牌列表案例。这什么案例太难辽。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=...原创 2019-11-17 15:52:40 · 173 阅读 · 0 评论 -
VUE——v-for中key的使用注意事项,v-if和v-show的使用和特点
当Vue.js用v-for正在更新已渲染过的元素列表时,默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并确保它在特定索引下显示已被渲染过的每个元素。为了给Vue提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一key属性。v-for循环中key属性的使用 <div id=...原创 2019-11-16 15:57:58 · 394 阅读 · 0 评论 -
VUE——v-for指令的四种使用方式
<div id="app"> <p v-for="(item i) in list">索引值: {{i}} --- 每一项: {{item}}</p> </div> <script> //创建Vue实例,得到ViewModel var vm = new Vue({ ...原创 2019-11-12 22:31:48 · 307 阅读 · 0 评论 -
VUE——通过属性绑定为元素设置class类样式 /style样式
<head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/vue-2.4.0.js"></script> <style> .red{ color: red; ...原创 2019-11-11 20:47:07 · 320 阅读 · 0 评论 -
VUE——v-model实现双向数据绑定
<div id="app"> <h4>{{ msg }}</h4> <!--v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定--> <input type="text" v-bind:value="msg"> </div> &...原创 2019-11-09 18:20:43 · 134 阅读 · 0 评论 -
VUE——事件修饰符
.stop阻止冒泡<body> <div id="app"> <div class="inner" @click="div1handler"> <input type="button" value="戳他" @click="btnHandler"> <!--阻止冒泡是@c...原创 2019-11-07 21:52:40 · 118 阅读 · 0 评论 -
VUE——跑马灯效果制作
<body> <div id="app"> <input type="button" value="浪起来" @click="lang"> <input type="button" value="低调" @click="stop"> <h4>{{ msg }}</h4>...原创 2019-11-05 22:42:16 · 184 阅读 · 0 评论 -
VUE——v-bind基本使用和使用v-on指令定义Vue中的事件
v-bind<body> <div id="app"> <!--v-bind: 是vue中提供的用于绑定属性的指令--> <!--<input type="button" value="按钮" v-bind: title="mytitle">--> <input type="...原创 2019-11-03 17:03:47 · 201 阅读 · 0 评论 -
VUE——v-cloak、v-text和v-html基本使用
v-cloak<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none;...原创 2019-11-03 16:20:06 · 123 阅读 · 0 评论 -
VUE——MVC、MVVM的关系图解 & vue基本代码
MVVM是前端视图层的分层开发思想,主要把每个页面分成了M、V和VM。其中,VM是MVVM思想的核心;因为VM是M和V之间的调度者。M:保存的是每个页面中单独的数据。VM:是一个调度者,分隔了M和V。每个V层想要获取和保存数据的时候,都要由VM做中间的处理。V:就是每个页面中的HTML结构前端页面中使用MVVM的思想,主要是为了让我们开发更加方便,因为MVVM提供了数据的双向绑定;注意:...原创 2019-10-29 22:43:17 · 500 阅读 · 0 评论