常见vue指令速通
指令:就是vuejs为我们提供的方便操作的自定义属性
✿使用vue的前提是插入vue.js
1.v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<style>
/* 全局指令,可以让网页不显示源代码--[v-cloak] */
[v-cloak] {
display: none;
}
</style>
<div id="app">
<p v-cloak>{{msg+1+1+1+1+1}}</p>
//{{msg}}不会显示,直到编译结束。
</div>
<script>
//创建一个vue环境,创建一个VM层
let vm = new Vue({
el:'#app',
data: {//Model层
msg:''
}
})
</script>
2.v-text
更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。
<div id="app">
<!-- {{username}} -->
<p v-text='username'></p>
</div>
<script>
new Vue({
el:'#app',
data:{
username:'admin'
}
})
</script>
3.v-html
用于输出 html 代码
注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
<!-- v-html 指令用于输出 html 代码 -->
<div id="app">
<p v-html="msg"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '<h1>小明</h1>'
}
})
</script>
4.v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<!-- v-pre不被编译 -->
<div id="app">
<p v-pre>{{msg}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '太空人'
}
})
</script>
5.v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '最初的梦想:当宇航员'
},
mounted() {
this.msg = '后来我成为了太空人'
}
})
</script>
6.v-model
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
<!-- 在表单控件或者组件上创建双向绑定 -->
<div id="app">
<input type="text" value="" v-model="userName">
<p>{{userName}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
userName: 'admin'
}
})
</script>
7.v-on
父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!我们可以使用 v-on 绑定自定义事件,每个 Vue 实例都实现了事件接口(Events interface),即:
使用 $on(eventName) 监听事件
✿v-on:可缩写为@
<div id="app">
<input type="text" v-model="num">
<input type="button" value="+1" v-on:click='add'>
<input type="button" value="-1" @click='sub'>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num:1
},
//讲num值进行操作
//用来写页面的方法所需要的配置项
methods:{
add : function () {
this.num += 1
//this.num = this.num +1
},
sub(){
this.num -= 1
}
}
})
</script>
8.v-bind
主要用于动态的绑定属性
✿v-bind:可缩写为:
✿例: v-bind:class =》 :class
<!-- v-bind: 用来绑定属性 简写为: -->
<div id="app">
<!-- <img v-bind:src="srcUrl" > -->
<img :src="srcUrl" >
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
srcUrl: './img/1.jpg'
},//这个逗号必须要
mounted(){
//这个this必须要:它指当前的vm实例
this.srcUrl = './img/2.jpg'
}
})
</script>
9.事件修饰符
<div id="app">
<a href="https://www.baidu.com/" @click.prevent='myAlert'>百度</a>
<!-- 冒泡 -->
<div @click='divC1'>
<button @click.stop='btnC1'>点击<button>
<!-- 按键修饰符 -->
<input type="text" v-model='msg' @keyup.delete='key'>
<!-- <input type="text" v-model='msg' @keyup.aa='key'> -->
<!-- 点击Backsparce直接清空 -->
</div>
</div>
<script>
//自定义修饰符
//Vue.config.keyCodes.自命名修饰符(不能大写) = 编码(必须是精准的)
Vue.config.keyCodes.aaa = 65
new Vue({
el:'#app',
data:{
msg:'啦啦啦啦啦'
},
methods:{
myAlert(e){
//阻止默认行为
//e.preventDefault();传统原生代码
//只专注于自己的操作
alert('被点到了')
},
divC1(){
console.log('div');
},
btnC1(){
console.log('btn');
},
key(){
//清空
this.msg = ''
}
}
})
</script>
10.样式
<div id="app">
<!-- 将类名动态 -->
<!-- <p :class="{red:isHas}">小东西</p> 第一种 -->
<p :class='[colRed,colBg]'>小东西</p>
<!-- 第二种:依据类型 -->
<input type="button" value="改变自己" @click="changeClass">
</div>
<script>
new Vue({
el:'#app',
data:{
isHas:true,
colRed:'red',
colBg:'bg'
},
methods:{
changeClass(){
//this.isHas = this.isHas
this.colRed = ''
}
}
})
</script>
11.操作style
<div id="app">
<!-- <p :style='pStyle'></p> -->
<!-- <p :style='[pStyle,pAdSty'></p> -->
<p :style='{border:borderSty}'>啦啦啦啦啦啦啦</p>
</div>
<script>
//三种模式绑定style
new Vue({
el:'#app',
data:{
pStyle:{
//样式是分割线的时候,要么变成驼峰命名,要么加引号
'font-size':'30px',
color:'red'//值必须加引号
},
pAdSty:{
},
borderSty:'2px solid red'
}
})
</script>
12.if$show
v-if根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建
v-show根据表达式之真假值,切换元素的 display CSS property。
<div id="d1">
<button @click='changeShow'>显示图片</button>
<!-- <div v-show='isShow'>
<img src="./img/3.jpg" >
</div> -->
<div v-if='isShow'>
请登录
</div>
<div v-else>
用户:aa已登录呢
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#d1',
data:{
isShow:true//布尔值
},
methods:{
changeShow(){
this.isShow = !this.isShow
}
}
})
</script>
13.v-for
基于源数据多次渲染元素或模板块
<style>
#app{
min-width: 1200px;
margin: 0px 60px;
}
ul li img {
width: 200px;
height: 300px;
}
ul li {
display: inline-block;
border: 1px solid gray;
list-style: none;
}
</style>
<div id="app">
<ul>
<li v-for="movie in subjects" :key="movie.id">
评分: {{movie.rate}}<br />
鼠标x: {{movie.cover_x}}<br />
电影名: {{movie.title}}<br />
链接:<a :href="movie.url">{{movie.url}}</a> <br/>
图片: <img :src="movie.cover" alt=""><br />
ID: {{movie.id}}<br />
鼠标y: {{movie.cover_y}}<br />
{{movie.is_new}}<br />
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
"subjects": [
{
"rate": "5.7",
"cover_x": 527,
"title": "杀戮天眼",
"url": "https://movie.douban.com/subject/30304769/",
"playable": false,
"cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2561506095.webp",
"id": "30304769",
"cover_y": 800,
"is_new": true
},
{
"rate": "7.1",
"cover_x": 1013,
"title": "黑鸟",
"url": "https://movie.douban.com/subject/30277288/",
"playable": false,
"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2617780988.webp",
"id": "30277288",
"cover_y": 1500,
"is_new": true
},
{
"rate": "6.7",
"cover_x": 2757,
"title": "逃跑",
"url": "https://movie.douban.com/subject/30243396/",
"playable": false,
"cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2587085523.webp",
"id": "30243396",
"cover_y": 4096,
"is_new": false
}
]
}
})
</script>
♥此文章部分来源网络,侵删。感谢大家观看,么么叽!