Vue-基础指令了解

在Vue中,提供了许多指令用于帮助我们快速开发实现

(1)v-bind指令

​ v-bind指令用于我们动态绑定属性值,当我们需要动态绑定一个元素对象的属性值时,就可以通过v-bind指令实现

​ 语法:

​ v-bind:属性名称="vue实例对象中的属性变量"

​ 语法糖(简写方式):

​ :属性名称="Vue实例对象中的属性变量"

<div id="app">
	// 使用v-bind指令动态绑定属性title
	<p v-bind:title="title">这是一个段落</p> // 当鼠标放置在该段落上时,会出现 '动态属性title' 提示
    
    // 可通过语法糖简写为
    <p :title="title">
        这是一个新段落
    </p>
</div>

const app=new Vue({
	el:'#app',
	data:{
		title:'动态属性title'
	}
})

(2)v-on指令

​ v-on指令用于我们进行事件绑定,当我们需要为某个元素添加事件时,就可以通过v-on指令进行实现

​ 语法:

​ v-on:事件类型="事件方法"

​ 语法糖(简写方式):

​ @事件类型="事件方法"

<div id="app">
	<button v-on:click="handleClick">
        点击一下
    </button>
    
    // 语法糖简写方式
    <button @click="handleClick">
        点击一下
    </button>
</div>

const app=new Vue({
	el:'#app',
	data:{
		...数据区域
	},
	methods:{
		// 事件方法区域
		handleClick(){
			console.log('我被点击了')
		}
	}
})

(3)v-if,v-else-if,v-else指令

​ v-if,v-else-if,v-else指令用于条件渲染元素,即通过判断条件是否满足来决定是否渲染指定元素及其内容

​ 语法:

​ v-if="布尔值条件"

<div id="app">
    <ul>
        <li v-if="score>=90">优秀</li>
        <li v-else-if="score>=80">良好</li>
        <li v-else-if="score>=70">中等</li>
        <li v-else-if="score>=60">及格</li>
        <li v-else>差评</li>
    </ul>
</div>

const app=new Vue({
	el:'#app',
	data:{
		score:89,
	}
})

(4)v-for指令

​ v-for指令,用于循坏渲染,即对于数组数据的循坏迭代

​ 语法:

​ v-for="(item,index) in 数组变量"'

​ item表示迭代的元素本身,

​ index表示迭代的元素下标

<div id="app">
	<ul>
    	<li v-for="(item,index) in books">书名:《{{item.name}}》,序号:{{index}}</li>
	</ul>
</div>

const app=new Vue({
	el:'#app',
	data:{
		books:[
            { name: "小说", id: "1" },
            { name: "动漫", id: "2" },
            { name: "视频", id: "3" },
          ],
	}
})

(5)v-show指令

​ v-show指令作用与v-if指令相同,都是动态渲染元素

​ 语法:

​ v-show="布尔条件"

<div id="app">
    <p v-show="flag">
        v-show指令动态渲染元素
    </p>
</div>

const app=new Vue({
	el:'#app',
	data:{
		flag:true
	}
})

v-if与v-show的区别

​ v-if与v-show的作用都在与动态决定元素的渲染,但是两者在渲染方式上存在不同点

​ v-if的动态渲染在于元素的创建与删除,即决定渲染元素时,就创建这个元素,当不渲染元素时,就删除这个元素

​ v-show的动态渲染在于更改元素的display样式属性,当决定渲染元素时,设置display:block,当不渲染元素时,设置display:none.

注意点:当我们需要频繁的切换(隐藏与显示)元素时,推荐使用v-show指令;当我们只需要少许切换(隐藏与显示)元素时,推荐使用v-if

(6)v-pre指令

​ v-pre指令用于渲染原始数据样式.即:不使用Vue{{变量名}}的方式进行数据渲染.而是将其原封不动的显示出来

​ 语法:

​ v-pre

<div id="app">
    // 最终界面渲染出来的内容为 {{message}}
    <p v-pre>
        {{message}}
    </p>
</div>

const app=new Vue({
	el:'#app',
	data:{
		message:'Hello,Vue'
	}
})

(7)v-cloak指令

​ v-cloak指令用于强化{{变量名}}语法,防止数据未渲染时出现的闪屏现象.注意:使用该指令需要同时在style样式设置中进行声明

​ 语法:

​ v-cloak

<style>
	[v-cloak] {
  		display: none;
		}
</style>

<div v-cloak>
  {{ message }}
</div>

(8)v-once指令

​ v-once指令用于声明该指令所在元素的内容只进行一次渲染,随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

​ 语法:

​ v-once

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>