vue-指令总结
程序员文章站
2022-03-03 09:57:17
...
vue的指令：
v-for,in,key,v-bind,v-model,v-on，v-once，v-cloak,v-html,v-text
v-show,v-on，v-if,v-else-if,v-else,v-pre
1.vue模板语法：使用双花括号
https://cn.vuejs.org/v2/guide/syntax.html
<div>{{msg}}</div> /*这里为文本插值*/
双花括号里面的数据解析为普通文本.
同时里面可以支持js表达式,但不支持语句，同时里面只能出现一个表达式。
{{number+1}}，{{flag?1:2}}
可以称之为插值表达式。
2.v-cloak解决插值表达式渲染时闪烁的问题：
https://cn.vuejs.org/v2/api/#v-cloak
css：
[v-cloak] {
display:none;
}
html:
<div v-cloak>
{{msg}}
</div>
- v-text没有闪烁问题，因为他是编译后显示的。
但是和文本插值还是有区别：
<span v-text="msg">+++++++++</span>
<span>{{msg}}++++++</span>
v-text会忽略标签之间的文本数据。也就是上面的+号
只有v-html可以将html的文本进行解析。
它更新的是元素的innerHTML，内容按普通的html插入。
动态的绑定一个或多个属性，或一个组件prop到表达式。
在绑定class和style特性时，可使用数组或对象。
缩写：为冒号 ：
<!-- 绑定一个属性，双引号里面是data的变量，可以进行js运算-->
<img v-bind:src="imageSrc">
- v-on:事件绑定
https://cn.vuejs.org/v2/api/#v-on
<button v-on:click="changeValue">按钮</button>
<button @click="changeValue">按钮</button>
缩写： @
changeValue是定义在methods中的函数。
事件还有很多事件修饰符：如：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
<button @click.stop="changeValue">按钮</button>
- v-model双向数据绑定：
v-model只能运用在表单中。
https://cn.vuejs.org/v2/api/#v-model
<div id="app">
<h4>{{msg}}</h4>
<input type="text" v-model:value="msg">
</div>
模型层定义-->视图层渲染--->视图层修改-->反馈到模型层。
8.vue中样式的使用
对象和数组在样式中的区别：
因为对象是无序的，数组是有序的。
所有有些样式存在覆盖的话，那么数组是确定的。
后面的覆盖前面，而对象不确定
使用class样式：
https://cn.vuejs.org/v2/guide/class-and-style.html
使用v-bind:
1.)对象方式：
<h1 :class="{'red':BoolRed,'active':true}">{{msg}}</h1>
2.)数组方式
<h1 :class="['active','red']">{{msg}}</h1>
3.)三元表达式：在数组里面使用三元表达式。不推荐
<h1 :class="['active',flag?'red':'blue']">{{msg}}</h1>
flag定义在data中。
4.）数组中包对象:推荐
<h1 :class="['active',{'red':flag}]">{{msg}}</h1>
使用内联样式style：
https://cn.vuejs.org/v2/guide/class-and-style.html
对象方式：
<h1 :style="{color:'red','border-top':'2px solid red'}">标题</h1>
或者绑定到一个对象中：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
数组的方式：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
9.v-for
https://cn.vuejs.org/v2/api/#v-for
对数组遍历：items :['a','b','c','d']
<ul>
<li v-for="(item,index) in items" >
{{index}}:{{item}}
</li>
</ul>
对对象遍历：
obj:{
name:"zhangxy",
age:25,
sex:'男'
}
<li v-for="(value,key,index) in obj " :key="key">
{{key}}:{{value}}
</li>
类似python一样的，有in操作符
x in 10进行遍历
key只能是string和number类型的。
- v-if 、v-else、v-else-if
https://cn.vuejs.org/v2/api/#v-if
<div id="app">
<h1 v-if=" items.indexOf('g') !==-1">a</h1>
<h1 v-else-if="items.indexOf('b')!==-1">b</h1>
<h1 v-else>c</h1>
</div>
v-for的优先级比v-if高：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码只传递了未完成的 todos。所以v-if中得不到todo,因此无法渲染任何东西。
11.v-show:
根据表达式之真假值，切换元素的 display CSS 属性。
<h1 v-show="flag">Hello!</h1>
12.v-pre:一般用不到。
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
</head>
<style>
*{
margin:0;
padding:0;
}
table{
text-align: center;
}
td{
height: 40px;
}
</style>
<body>
<div id="app">
<div style="height: 40px;text-align: center;">
<label class="search" for="id">id
<input type="text" v-model:value="id">
</label>
<label class="search" for="name">名称
<input type="text" v-model:value="name">
</label>
<button @click="addLine(id,name)">添加</button>
<label class="search" for="search">搜索
<input type="text" v-model:value="keywords">
</label>
</div>
<table border="1" cellspacing="0" width="100%">
<thead>
<th>id</th>
<th>品牌名称</th>
<th>添加时间</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item,index) in search(keywords)" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td><a href="javascript:void(0)" @click.prevent="delLine(item.id)">{{item.action}}</a></td>
</tr>
</tbody>
</table>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
id:'',
name:'',
keywords:'',
formData:[
{id:1,name:"宝马",time:new Date(),action:"删除"},
{id:2,name:"奔驰",time:new Date(),action:"删除"},
{id:3,name:"大众",time:new Date(),action:"删除"},
{id:4,name:"法拉利",time:new Date(),action:"删除"},
]
},
methods:{
delLine(id){
this.formData.some((item,index,array)=>{
if(item.id === id){
array.splice(index,1)
return true
}
})
},
addLine(id,name){
let item = {id,name,time:new Date()}
this.formData.push(item)
},
search(keywords){
let data = []
this.formData.filter((item,index)=>{
if(item.name.indexOf(keywords) !== -1){
data.push(item)
}
})
return data
}
}
})
</script>
</body>
</html>
上一篇： 判断一棵二叉树是否是平衡二叉树