Vue中的指令

二、Vue指令：
指令需放到标签的属性中使用

1.1、在大括号内进行基本运算

<div id="#app">
{{1 + 1}}
</div>
<script src="./libs/vue.js"></script>
 <script>
 const app = new Vue({
 el: '#app'
 })
 </script>

输出结果：2

1.2、指令中的双引号里可以当作js运行环境
在双大括号和指令中可以使用简单js语句

 <div id="#app">
	 <span v-text=" 'msg' "></span>
	 <span v-test=" '1' "></span>
 </div>
 <script src="./libs/vue.js"></script>
 <script>
 const app = new Vue({
 el: '#app'
 })
 </script>

输出结果：msg
输出结果： 1

1.3、v-text标签(插值)
其中的{{}}语法也可写为一般会写做{{msg}}语法格式。
即v-text等同于{{}}
大括号中的值也可用标签 v-text代替
标签v-text与v-html的区别

<div id="#app">
	{{msg}}
	<hr>
	<span v-text="msg"></span>
	<hr>
	<span v-html="msg"></span>
</div>
<script>
	const app = new Vue({
		el: '#app',
		data: {
		msg: '<h1>测试v-html标签</h1>'
		}
	})
</script>

注：
v-text:标签直接显示成文本
v-html则将标签进行了标签的正常显示(标签起作用字体变成

标准字体)

v-html标签不能随便用除非是信任的内容，可能会进行xss攻击

标签v-text与v-htm的区别如下图所示：

1.4、v-show命令用于控制显示和隐藏

<div id="app">
  <span v-show="true">v-show标签11</span>
  <span v-show="isShow">v-show标签22</span>
  <div v-show="arr.length">{{arr}}</div> //如果数组不为空则显示，否则隐藏
 </div>
  <script src="../libs/vue.js"></script>
 <script>
 	const app = new Vue({
     el: 'app',
     data:{
	  isShow: true,
	  arr: [1,2,3]
	 }
	})
 </script>

1.5、v-if、v-else 、v-else-if标签
v-if 是HTML结构级别的隐藏，直接将对应的标签删除

//如果movies不为空则显示电影名称（暂无电影隐藏），否则显示暂无电影
<div id="app">
	<div v-if="!movies.length">暂无电影</div>
	<div v-else>{{movies}}</div>
	<div v-else-if=""></div>
	<script src="../libs/vue.js"></script>
	<script>
	const app = new Vue({
		el: 'app',
		data: {
	    movies: ["千与千寻","秒速5厘米"]
	   }
	
	})
	</script>
</div>

1.6、v-for循环标签用来遍历数组或对象
（1）v-for循环遍历数组

<div id = "app">
	<ul>
	  <li v-for="name in movies">{{name}}</li>
	</ul>	 
</div>
<script src="../libs/vue.js"></script>
<script>
	const app = new Vue({
		el: 'app',
		data: {
		 movies: ["千与千寻","秒速5厘米"]
		 }
	})
</script>

（2）v-for = “item in items”
v-for = “自定义名字 in 数组名”
要遍历哪个标签就将指令写给哪个标签

<div id = "app">
	<ul>
	  <li v-for="movie in movies">
	  <h1>{{move.name}}</h1>
	  <p v-if="movie.actor">{{movie.actor}}</p>
	  </li>
	</ul>	 
</div>
<script src="../libs/vue.js"></script>
<script>
	const app = new Vue({
		el: 'app',
		data: {
		 movies: [
		 {
		 	name: "千与千寻",
		 	actor: "宫崎骏"		
		},
		{
			name: "秒速5厘米",
			actor: "宫崎骏"
		}
		]
	  }
	})
</script>

（3） v-for可以遍历出index
v-for = “(item, index) in items”
v-for = “(自定义名字，自定义下标名) in 数组名”

<div id = "app">
	<ul>
	  <li v-for="(movie,index) in movies">
	  <h1>{{index+1}}-{{move.name}}</h1>
	  <p v-if="movie.actor">{{movie.actor}}</p>
	  </li>
	</ul>	 
</div>
<script src="../libs/vue.js"></script>
<script>
	const app = new Vue({
		el: 'app',
		data: {
		 movies: [{
		 	name: "千与千寻",
		 	actor: "宫崎骏"		
		},
		{
		name: "秒速5厘米",
		actor: "宫崎骏"
		}
		]
	  }
	})
</script>

（4）v-for遍历对象
v-for ="(value, key) in 对象名"
v-for="(value, key ,index) in 对象名"

<div id = "app">
	<ul>
	  <li v-for="(key,value,index) in obj">
	  <h1>{{index}}-{{key}}--{{value}}</h1>
	  </li>
	</ul>	 
</div>
<script src="../libs/vue.js"></script>
<script>
	const app = new Vue({
		el: 'app',
		data: {
		 user: {
		 name: '张三'，
		 age: 20
		 }
	  }
	})
</script>

v-bind标签
{{}}只能在标签内容添加，如果是标签属性，需要使用v-bind
v-bind: 属性名 = “data中的值”
例：v-bind:href=“值”
v-bind:src =“值”
v-bind=“对象”
v-bind =“{}”

<div id = "app">
<a v-bind:href="href">链接</a>
<a v-bind="a">链接</a>
<div :class="className"></div>
</div>
<script src="../libs/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
href: "https://www.baidu.com",
a:{
href: "https://www.baidu.com",
title: "百度"
},
className: ['box1,','box2',{box3: false}]
}
})
</script>

3、vue组件局部组件
vue组件分为两种，一种为全局组件，一种为局部组件
(1) 组件需要注册才能使用
(2) 每个组件都有自己的模板
(3) 组件嵌套，子组件需放到父组件的组件模板中
Vue.component(‘组件名’,组件配置对象)

如何使用组件
要在父组件的组件模板中只用对应的组件标签
<组件名></组件名>

局部注册需要在对应组件中添加components属性
const 组件名 ={
template: “”,
components: {
局部组件名： 组件配置对象 //这个组件就只能在当前组件的模板中使用
}
}
组件模板有且只能有一个根节点
组件中的data需要写成
data(){
return{
}
}
3.1、
示例：

<div id="app">
	<com1></com1>
</div>
<script src="../libs/vue.js"></script>
<script>
Vue.component('com1',{
	template: '<div>组件</div>'
})
	const Dog ={
		template: `<div>狗</div>`
    }
    const House = {
    	template: `
    	<div>房子
    	<BedRoom></BedRoom>
    	<WashRoom></WashRoom>
    	<Dog></Dog>
    	</div>`,
    	components: {
    	Dog
    	}
    }
    const BedRoom = {
    	template: `
    	<div>卧室
    		<WashRoom></WashRoom>
    		<Human></Human>
    		<Dog></Dog>
    	</div>
    	`
    	components: {
    	Dog
    	}
    }
    Vue.component('House',House)
    Vue.component('BedRoom',BedRoom)
    Vue.component('WashRoom',WashRoom)
    Vue.component('Human',Human)
    Vue.component('DOg',Dog)
    const app = new Vue({
    el: '#app'
    })
</script>