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 · 1312 阅读 · 0 评论 -
VUE——使用钩子函数
指令定义函数提供几个钩子函数 bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。 update：所在组件的VNode更新时调用，但可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可以通过比较更新前后的值来忽略不必要的...原创 2019-11-24 16:40:56 · 877 阅读 · 0 评论 -
VUE——定义格式化时间的全局过滤器
使用品牌案例部分的代码，修改部分如下。 <td>{{ item.ctime | dateFormat }}</td> <td> <a href="" @click.prevent="del(item.id)">删除</...原创 2019-11-21 21:04:38 · 215 阅读 · 0 评论 -
VUE——全局过滤器的基本使用
过滤器： Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustachc插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示； //过滤器调用时的格式，{{ name | 过滤器名称 }} Vue.filter('过滤器名称', function(){}) //过滤器中...原创 2019-11-18 21:46:15 · 588 阅读 · 0 评论 -
VUE——案例同上。根据关键字实现数组过滤
<tbody> <!--之前，v-for中的数据，都是直接从data上的list中直接渲染过来的--> <!--现在，我们自定义一个search方法，同时把所有关键字通过传参的形式，传递给了search方法--> <!--在search方...原创 2019-11-17 22:44:47 · 518 阅读 · 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 · 202 阅读 · 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 · 444 阅读 · 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 · 388 阅读 · 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 · 368 阅读 · 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 · 170 阅读 · 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 · 140 阅读 · 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 · 221 阅读 · 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 · 244 阅读 · 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 · 155 阅读 · 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 · 550 阅读 · 0 评论