Vue指令总结
2017-08-03 00:14
393 查看
1.0 v-if&v-else&v-show
v-if 是指令中判断如果是true则会显示该Dom元素,如果不是,则不显示该Dom元素
v-else是v-if下的另一种情况v-if如果为false则会显示v-else的内容
v-show和v-if的效果是一样的,但是唯一的区别是v-show是不显示,但是dom元素还在,而v-if不显示,则是vue不加载该dom元素,并不存在
2.0 v-for
v-for是循环某一个元素的指令,基础模版是<li v-for="(item,index) in items">{{item}}</li>
可以循环纯数组,也可以循环数据对象也就是json对象,如果给数组里面的数组排序,就必须用到computed的对象里面重新定义一个对象,返回排过序的数组,因为data里面的原数组vue实例对象会保护,如果直接用的,会污染原来的数据源,所以才会重新定义对象来操作原数组。如果数组只是一个纯数字的数组,那么直接用sort()方法,里面用一个function(a,b){return a-b}的函数来处理数组。如果是一个json对象的话就要用到
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}这里的key一定要加引号,因为是键值,属性值
来返回该数组,这在工作会经常用到,所以一定得记住
3.0 v-text&v-html
v-text 效果其实和{{}}里面加vue实例对象的属性是一样的,但是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。v-html则会解析html相应的标签格式,有时候会很危险,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
4.0 v-on
v-on是绑定事件 需要在methods对象中添加事件 简写是@事件,事件后面还可以加键盘码,如图所示
5.0 v-model
v-model双向数据绑定,一般用在表单元素中,可以加修饰码.lazy.number.trim,其中值得注意的是多选绑定一个数组
<p> <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names"> <label for="JSPang">JSPang</label><br/> <input type="checkbox" id="Panda" value="Panda" v-model="web_Names"> <label for="JSPang">Panda</label><br/> <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names"> <label for="JSPang">PanPan</label> <p>{{web_Names}}</p> </p>
注意这个value是关键
6.0 v-bind
是绑定标签属性的指令,简写是:属性值 1.直接绑定class样式 :class="className"(className要在data里面设置)2.判断class样式 :class="{red:isOk}"(red是常量代表css的样式名,isOk则要在data里面设置)3.class里面设置数组 : class="[classA,classB]"(后面的都是属性名,css样式写在后面的会覆盖前面的,但是值得注意的是,我指的是style样式中的顺序,而不是这里的顺序)4.绑定class的三元运算符<div:class="isOk?classA:classB">绑定class中的三元表达式判断</div>
5.绑定style :class="{color:red,fontSize:font}"(这里键是常量,代表的是属性名,而后面的则是要在data里面设置)6.绑定style对象 :class="styleObj" 这里的styleObj则是要在data 里面设置styleObj对象 记住前面的键一定得符合标签样式的写法,比如backgroundColor,fontSize,后面的值则是要加引号,并加上值才能正常显示其对应的样式
7.0 v-pre&v-cloak&v-once
v-pre 在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
v-cloak 在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用[v-cloak]{display:none}可以解决闪烁问题
v-once 在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
相关文章推荐
- 分针网——每日分享:Vue 指令总结
- Vue.js-内置指令总结
- Vue.js常用指令总结
- vue.js(2.0)常用指令总结以及一些指令的坑!
- Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
- 分针网——每日分享:Vue 指令总结
- Vue.js总结学习(指令、计算属性、数据绑定)
- vue常用指令v-bind的使用总结
- Vue1.0学习总结(1)———指令、事件、绑定属性、模板、过滤器
- Vue指令总结
- Vue.js知识总结——指令
- vue小总结
- 使用use注册Vue全局组件和全局指令的方法
- 详解vue中点击空白处隐藏div的实现(用指令实现)
- jsp指令总结
- Vue.js基本规则提炼总结及计算属性学习
- Atitit easyui翻页组件与vue的集成解决方案attilax总结
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
- vue笔记---模版语法--指令缩写
- vue学习笔记(五)——指令