1.关于vue的指令:指令就是带有”v-“前缀的特殊属性,分别拥有不同的功能
以下为vue最常用的几个指令
1. v-html
该标签类似于innerHtml,可以动态改变标签内的html元素
语法:v-html="表达式"
<body>
<div id="me" v-html="my_html">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
msg: '你好,vue',
my_html:`<a href="https://www.baidu.com/">百度官网</a> `,
}
})
</script>
</body>
注意这里v-html可以覆盖掉原本的{{msg}},将对象app里的my_html进行调用,解析到id为me盒子里
2.v-if和v-show
这两个标签都可以控制页面中元素的显示与隐藏,不同点在于v-if的远离是控制元素在文件中的创建与删除来实现,而v-show是控制指定元素的css样式(display:none)来实现
在多数情况下v-if用于不频繁且具有判断性质的显示,如登录提醒等,而v-show用于频繁触发显示与隐藏的元素
<body>
<div id="me" >
<p v-show="show_or_not1">{{msg}}</p>
<p v-show="show_or_not1">{{msg2}}</p>
<p v-show="show_or_not2">{{msg3}}</p>
<p v-show="show_or_not2">{{msg4}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
msg: '1你好,vue',
msg2:'2早上好',
msg3:'3中午好',
msg4:'4晚上好',
show_or_not1: true,
show_or_not2:false
}
})
</script>
</body>
我们得知当v-show为false时标签内会增加style=”display:none“来隐藏标签,当我们再把v-show换成v-if:
<div id="me" >
<p v-if="if_or_not1">{{msg}}</p>
<p v-if="if_or_not1">{{msg2}}</p>
<p v-if="if_or_not2">{{msg3}}</p>
<p v-if="if_or_not2">{{msg4}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
msg: '1你好,vue',
msg2:'2早上好',
msg3:'3中午好',
msg4:'4晚上好',
show_or_not1: true,
show_or_not2:false,
if_or_not1:true,
if_or_not2:false
}
})
</script>
调试窗口直接删除了v-if="false的标签",两者在页面上的显示都是一样的
3.v-else和v-else-if
这两者必须搭配v-if使用,可以对标签依据条件判断是否渲染
<body>
<div id="me">
<p v-if="my_score>=90">棒棒哒</p>
<p v-else-if="my_score>80">加油</p>
<p v-else-if="my_score>=60">小心了</p>
<p v-else>禁止启动游戏</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
my_score: 99
}
})
</script>
</body>
显示判断正确
4.v-on
语法:v-on:click(事件类型)=”count++“(内联语句)||@click(事件类型)=”count++“(内联语句)
v-on:click(事件类型)=”method中函数名“|| @click(事件类型)=”method中函数名“
(使用“@”代替“v-on:”)可以进行简写
这是一种在标签上绑定事件的指令,代替了原生Js中addEventListener
<body>
<div id="me">
<button @click="fn">点我执行fn</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
my_score: 99
},
methods:{
fn(){
console.log("fn被执行了");
console.log("你的分数是"+this.my_score)
}
}
})
</script>
</body>
这里需要注意,methods访问本身内部的data时,要加this.变量名
当我们调用的函数需要传入参数时,我们可以在指令后直接跟函数而不是函数名如:
@click=”fn(666)“
相应的methods内声明函数就应该写入一个形参,以下代码:每次按钮被按,扣除6分
<body>
<div id="me">
<button @click="fn(6)">点我执行fn</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
my_score: 99
},
methods:{
fn(num){
console.log("你的分数是"+this.my_score)
this.my_score-=num,
console.log(`奖励你-${num}分,你的分数是`+this.my_score)
}
}
})
</script>
</body>
5.v-bind
v-bind用与指定标签的标签属性
语法为:
v-bind:属性名=“表达式”
可以简写为:
:属性名=“表达式”
以下为测试代码
<body>
<div id="me">
<img :src="my_url" :title="my_tip">
<img v-bind:src="my_url" v-bind:title="my_tip">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
my_url:"https://img-home.csdnimg.cn/images/20201124032511.png",
my_tip:'欢迎使用csdn'
},
})
</script>
</body>
6.v-for
用于渲染数组中的数据
语法:
v-for="(item,index) in 数组名"
其中item为指定数组中每的一项,index为每项的下标,如果index不需要,可以省去为:
v-for="item in 数组名
<body>
<div id="me">
<ul>
<li v-for="(item,index) in list_name">{{item}}{{index}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#me',
data: {
list_name:["小李","小王","小张","小刚"]
},
methods:{
}
})
</script>
</body>
v-for经常搭配 :key="唯一值" 使用,目的是保证被v-for遍历的数组发生改变时,vue进行创建新元素添加或者实质性地删除掉了旧的标签,而不是将标签内的元素简单重新排序整理,:key后面的唯一值多数情况使用数组对象的id值
7.v-model
用于双向数据绑定输入表单元素,开发中经常使用,语法:
<div id="me">
<input type="text" v-model="username">
<input type="text" v-model="password">
</div>
只需要在data中声明username和password即可对页面中用户输入的数据实现双向绑定,用户实时输入数据,data中的数据也实时更新,