1.v-if、v-else与v-show
- 1.1 v-if与v-else
v-if用来判断是否加载html的DOM。在data里面定义一个值,当这个值为真时,显示内容,否则不显示
代码
<template>
<div class="Two">
<div v-if="isLogin">hello world</div>
<div v-else>请登录后操作</div>
</div>
</template>
<script>
export default {
data () {
return {
isLogin:true
}
}
}
</script>
- 1.2 v-show
通过调整css中display属性来实现内容是否展示,实际内容已经加载。
- 1-3 v-if与v-show的区别
v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
v-show:调整css dispaly属性,可以使客户端操作更加流畅。
条件不成立的不加载
加载后通过css隐藏
2.v-for - 2.1 v-for
v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是数据数组并且item是数组元素迭代的别名。
- 2.2 v-for排序
通过v-for将循环出来的数据按照一定的规则进行排序。
排序过程中由于js机制,需要自己写一个方法来进行数据判断,实现数据从小到大排序。
function sortNumber(a,b){
return a-b
}
可以实现数据的正常排序。
- 2.3 循环输出对象
通过v-for循环数据,将循环出来的对象按属性进行输出。
3.v-text与v-html
通过data将值赋给页面进行渲染,当网速慢或者是js加载错误时会出现页面属性直接渲染的情况,用户体验不友好。 - 3.1 v-text
双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。 需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。 - 3.2 v-html
在javascript中写有html标签,用v-text是输出不出来的,需要用v-html标签来输出。
4.v-on
v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。可以用@代替,例如@click.
实现简单的自增、自减
<template>
<div class="Two">
{{count}}<br/>
<button v-on:click="jiafen">加1</button>
<button v-on:click="jianfen">减1</button>
</div>
</template>
<script>
export default {
data () {
return {
count:1
}
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
count--;
}
}
}
</script>
5.v-model
v-model指令,绑定数据。主要是将数据绑定在特定的表单元素上,实现双向数据绑定。
<template>
<div class="Two">
<p>原始文本信息:{{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message"></p>
</div>
</template>
<script>
export default {
data () {
return {
message:'hello Vue!'
}
},
}
</script>
v-model.lazy 数据绑定懒加载 焦点离开文本框是渲染
v-model.number 内容必须是数字,别的内容不会进行数据渲染(如果开始输入的是字符串则不起作用)
v-model.trim 去掉空格 将数据绑定中的空格全部清除。
6.v-bind
v-bind是用来改变HTML中的标签属性来实现不同的业务逻辑。简写:,例如:href
7.v-pre & v-cloak & v-once
-
7.1 v-pre
在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了
不进行vue数据渲染 -
7.2 v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用 -
7.3 v-once
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
只执行一次,不进行数据更新。