Vue 常用指令讲解
Vue 常用指令讲解
指令(Directives)是带有 v-
前缀的特殊属性,指令属性的值一般是单个JavaScript表达式(v-for除外)。指令的功能是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。
常用的Vue指令有:
①:el挂载点
1.el是用来设置Vue实例挂载(管理)的元素
2.Vue会管理el选项 命中的元素 以及内部的 后代元素
3.可以使用其他的选择器,但是建议使用ID 选择器
4.可以使用其他的 双标签 但是不能使 html 和 body
建议使用 div 因为div没有其他的语义
<div id="app">
{{msg}}
<span>{{msg}}</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "第一个vue"
}
})
</script>
②:v-on
v-on指令的作用是为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods 属性中
方法内部通过this关键字可以访问定义在data中的数据
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="@指令" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<!-- @click @dblclick 单击 双击事件 -->
<h2 @click="changeText">{{msg}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "你好!",
info:"世界" ,
},
methods:{
doIt:()=>{
alert('我是doIT')
},
changeText:function(){
this.msg += "点击过后的文本"
}
},
})
</script>
③:v-show 和 v-if
v-if 根据表达式的真假,切换元素的显示和隐藏(操纵dom元素)
v-show: display:none
v-show根据表达式的真假切换显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容最终会解析为布尔值
如果为true显示元素
如果为false隐藏元素
数据改变之后,数据也会同步更新
<div id="app">
<input type="button" value="点击切换状态" @click="change()">
<img src="./1.jpg" v-show="isShow" width="200">
<img src="./1.jpg" v-show="age>18" width="200">
<input type="button" value="年龄++" @click="add()">
<!-- v-if -->
<input type="button" value="切换" @click="toggleShow()">
<img src="./1.jpg" v-if="isShow" width="200">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
age: 17
},
methods: {
change: function () {
this.isShow = !this.isShow
},
add: function () {
this.age++;
},
toggleShow: function () {
this.isShow = !this.isShow
}
},
})
</script>
④:v-text 和v-html
区别
v-text="" :更新元素的 textContent 默认替换全部的内容
v-text会替换标签内全部内容
不可以解析html标签,只能解析文本
想局部替换,{{ Mustache }} 用插值
v-html可以解析html标签和文本**
v-text
和 {{}}
表达式渲染数据,不解析标签;
v-html
不仅可以渲染数据,而且可以解析标签;
<div id="app">
<h2 v-text="msg + '新加'">小黑</h2>
<h2 v-text="info + 'new'">小黑</h2>
<h3>{{msg}}局部更新</h3>
<p v-html="htmlMsg"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "你好!",
info:"世界" ,
htmlMsg:"<a href='#'>超链接</a>"
}
})
</script>
⑤:v-for
v-for 根据数据生成列表结构
数组经常和v-for使用
语法是(item,index) in 数据
eg: (item,index) in arr ----> (item,index)顺序不能改变
数组长度更新会同步到页面上,是响应式的
<div id="app">
<input type="button" value="新增" @click="add()">
<input type="button" value="移除" @click="remove()">
<ul>
<li v-for="(item,index) in arr">
{{index +1}} 小鼠标: {{item}}
</li>
<li v-for="(item,index) in objArr">
{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['滴滴', '哒哒', '叮叮', '咚咚'],
objArr: [
{name: "jack"},
{name: "tom"}
]
},
methods: {
add:function(){
this.objArr.push({name:"小狗"})
},
remove:function(){
this.objArr.shift();
}
}
})
</script>
⑥:v-blid
v-bind
是用于绑定数据和元素属性的,例如:
动态增删class 建议使用对象的方式
v-bind:属性名=表达式
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<!-- 简写 -->
<!-- <img :src="imgSrc" :title="imgTitle+'!'"
:class="isActive?'active':''" @click="toggleActive()"> <br>-->
<!-- 使用对象方式 -->
<img :src="imgSrc" :title="imgTitle+'!'" :class="{active:isActive}" @click="toggleActive()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: "./1.jpg",
imgTitle: "晚上好",
isActive: false,
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive;
}
}
})
</script>
双大括号的模板语法不适用于HTML属性上,如果要把数据绑定到HTML的属性上可以使用 v-bind
指令:
<div v-bind:id="idVal"></div>
<script>
var vm = new Vue({
el: '#app',
data: {
idVal: 'app'
}
})
</script>
上面代码中,渲染后的HTML代码中,div的id属性值为app。
同一个DOM元素上可以绑定多个属性,例如:
<div class="app">
<a v-bind:href="url" v-bind:class="class">click me</a>
<img v-bind:src="imgsrc">
</div>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
class:"btn btn-default"
}
});
v-bind` 除了可以绑定一个简单类型的数据之外,还可以绑定一个对象,例如:
<div class="app">
<a v-bind:class="{active:isActive}">click me</a>
</div>
上面代码中,对象的名为 active
,表示要添加的类名, isActive
是vue中的数据,表示在什么情况下添加该类名,即在Vue实例的数据对象中对应的值(isActive的值)为真是,才为DOM元素的class中添加 active
的样式。
简写:
v-bind
指令可以简化英文的冒号 :
,示例:
<div class="app">
<a v-bind:href="url">click me</a>
</div>
可以简化为:
<div class="app">
<a :href="url">click me</a>
</div>
⑦:v- model
v-model 获取和设置表单元素的值(双向数据绑定)
便捷的获取和设置表单元素的值,
绑定的数据和表单元素的值相关,
绑定的数据和表单元素的值是双向绑定的 无论修改哪一个,另外一个跟随改变
<style>
.active {
border: 1px solid red;
}
</style>
</head>
<div id="app">
<input type="button" value="修改msg" @click="setM()">
<input type="text" v-model="msg" @keyup.enter="getMsg">
<h3 >{{msg}}</h3>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg:"晚上好"
},
methods:{
getMsg:function(){
alert(this.msg);
},
setM:function(){
this.msg = "修改后的值"
}
}
})
</script>
⑧:### v-cloak
作用: v-clock
指令主要是解决对插值表达式 {{}}
的渲染前闪烁问题。
简单来说,当网络比较慢时,网页还在加载vue.js,这就会导致Vue来不及渲染,这是页面就会显示Vue源代码。我们就可以使用 v-cloak
指令来解决这一问题。
HTML代码:
<div id="app" v-cloak>
{{context}}
</div>
JS代码:
<script>
var app = new Vue({
el: '#app',
data: {
context:'互联网头部玩家钟爱的健身项目'
}
});
</script>
CSS代码:
[v-cloak]{
display: none;
}
在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令了。
⑨:内联处理器中的方法
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
上面代码运行后,当点击两个按钮时,都会执行 say()
方法。
- 点赞
- 收藏
- 关注作者
评论(0)