一、vue指令

(1) v-if  // 条件判断 如果条件成立就在页面上生成一个标签并显示出来
(2) v-show //DOM中都存在只是显示与否
(3) v-for //注意 v-bind:key=数据唯一值 、优先级高
例:
<ul>
<li v-for="(item, index) in fruit" v-bind:key="index">
<input type="number" v-model.number="item.num">
- {{ item.name }}
<span style="color: red" v-if="item.num == 0">卖完啦!</span>
<button v-on:click="add(index)">+1</button>
</li>
</ul>
methods:{
add(index){}
}
(4) v-bind(可以简写成冒号 :) // 将标签的某个属性与Vue实例里的数据属性绑定
<a :href="url"></a>
(5) v-on(可简写成 @) // 绑定事件
<a @click="doSomething"></a>
例:
<button v-on:click="add(index)">+1</button>
methods: {
add(index){
this.fruit[index].num += 1;
}
}
(6) v-model // 双向数据绑定 获取用户输入的标签 <==> Vue实例里的数据属性
修饰符:v-model.number.lazy =>number强制转换为数字,lazy光标失去焦点后执行
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
(7) 阻止默认事件
<!--通过form中默认回车提交,但还需要清除掉form的默认的提交事件;
调用自定义的addThing事件-->
<form action="" v-on:submit.prevent="addThing"></form>
(8) 数组删除元素 splice
// 根据索引删除数组中的数据splice(元素索引,删除几个)=>1,
// 则删除当前元素;不写则删除当前元素及后面的所有
delThing(index) {
this.things.splice(index, 1)
},
(9) v-text 文本
(10) v-html // 输出html代码

二、区别之处

1. v-if 和 v-show的区别

​ 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

2. 计算属性和方法的区别

​ 方法每次都执行;计算属性的数据没变就直接使用之前的结果

​ computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

3. 计算属性和侦听器的区别

​ 侦听器适用于那些当某个值发生变化之后,我就要做什么事情 这种场景;其他的场景都用计算属性就可以了

4. v-on中的修饰符

(1) stop - 阻止事件冒泡

​ 例子:A按钮没添加stop,B按钮添加了stop。点击A按钮,控制台里会出现两个1。点击b按钮,控制台只出现一个1。

<div id="app">
<div style="width: 100px;height: 100px;background-color: #008000;"
v-on:click="show">
<button v-on:click="show">A</button>
<button v-on:click.stop="show">B</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>
(2) prevent - 阻止默认事件

​ 例子:A链接的默认事件是跳转到baidu.com,添加了prevent后,点击A,默认事件无效。B链接的默认事件也是跳转到baidu.com,添加了带有表达式的prevent后,点击B,跳转事件无效,但手动添加的show方法有效,控制台中显示1,因为show不是默认事件。

<div id="app">
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<br />
<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a> </div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>
(3) native - 监听组件根元素的原生事件
<div id="app">
<mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
Vue.component('mycomponent',{
template:`<a href="#">点我</a>`
})
var vm = new Vue({
el: '#app',
methods:{
myfn(){
console.log(1);
}
}
});
</script>

3. Vue - 指令系统的更多相关文章

  1. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

  2. vue - 指令系统

    指令系统: 所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. 1. ...

  3. vue——指令系统

    指令系统,可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. 在vue中提供了一套为数 ...

  4. vue 指令系统的使用

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  5. vue指令系统

    一.vue基础 使用vue需在官网上先下载vue.js,网址:https://cn.vuejs.org/v2/guide/installation.html.然后: 在project中引入vue.js ...

  6. python全栈开发之路

    一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...

  7. vue-learning:3-template-{{}}-and-v-html

    插值{{ }} 和 v-html 本节开始,我们按如下顺序学习vue模板API-指令.点击各部分的DEMO可在线查看代码 输出字符串文本内容的插值:{{}} 输出HMTL元素作为内容的指令:v-htm ...

  8. vue-learning:2 - template - directive

    指令 directive 在上一节我们知道,VUE的template模板通过VUE指令API实现与页面的视图层联系.所以本节将聚集在实现视图层交互的VUE指令系统directive的基础使用. 我们先 ...

  9. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

随机推荐

  1. postman---postman生成测试报告

    做完测试后,都会编写一份测试报告,测试报告中最主要的就是呈现出测试结果,哪些用例通过了,哪些用例没有通过.像postman这么强大的功能也可以自动生成报告,供我们测试同学进行查看,显得更加有B格~~~ ...

  2. 【tf.keras】tf.keras使用tensorflow中定义的optimizer

    Update:2019/09/21 使用 tf.keras 时,请使用 tf.keras.optimizers 里面的优化器,不要使用 tf.train 里面的优化器,不然学习率衰减会出现问题. 使用 ...

  3. 关于JS 的原型和原型链

    原型 JavaScript规定,每一个函数都有一个prototype对象属性,指向另一个对象.prototype对象属性的所有属性和方法都会被构造函数的实例继承.这意味着我们可以把那些公用的属性和方法 ...

  4. 【西北师大-2108Java】期中成绩汇总

    [西北师大-2108Java]期中成绩汇总 作业成绩 2018软件工程 得分排行 千帆竞发图 得分明细 学号 博客 博客 总分 201571030325 325 60 201571030332 htt ...

  5. python中copy()和deepcopy()详解

    **首先直接上结论: —–我们寻常意义的复制就是深复制,即将被复制对象完全再复制一遍作为独立的新个体单独存在.所以改变原有被复制对象不会对已经复制出来的新对象产生影响.—–而浅复制并不会产生一个独立的 ...

  6. DRF--认证和权限

    前戏 大家都知道http协议是无状态的,每次发送请求他们怎么知道我们是不是登录过呢?我们可以在用户登录之后给用户一个“暗号”,下次请求的时候带着这个“暗号”来.我们拿自己存的和携带过来的进行对比,如果 ...

  7. networkx生成网络的子网计算

    当我们用networkx生成网络时,节点之间的关系是随机的,很多时候我们生成的一个网络,存在不止一个子网,也就是说任意两个节点之间不一定连通 当我们想生成一个任意两点都能连通的网络时,就需要去判断生成 ...

  8. 2019CSP-J/S受虐记

    emmmm...... 今年noip很波折,我从7月开始准备 但CCF居然停了noip,这搞得我很迷茫,CCF你在干什么! 然后又恢复了,这有搞得我很懵逼?(还改名叫csp了) 就换了个名,CCF你搞 ...

  9. Eclipse Memory Analyzer(MAT),内存泄漏插件,安装使用一条龙

    网上文档很多,但最初都有问题.整理一份,作为备份.使用过程:开发代码写完后,对可能出现内存溢出的代码,添加配置文件,生成.hprof文件,用memory Analyzer分析排查问题,且泄漏内存大小可 ...

  10. ARM64 的 memcpy 优化与实现

    参考:https://www.byteisland.com/arm64-%E7%9A%84-memcpy-%E6%B1%87%E7%BC%96%E5%88%86%E6%9E%90/ libc/stri ...