vue基本指令使用

1.渲染
数据写在data里面，用插值表达式{{ }}展示数据

<div id="#app">
	{{message}}
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		message:"《送你一朵小红花》"
		}
	})
</script>

《送你一朵小红花》

2.条件渲染 v-if v-else /v-if v-if-else v-else

<div id="#app">
	<div v-if="sure == 1">老大<div>
	<div v-if-else="sure == 2">老二<div>
	<div v-else>老小<div>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		sure:2
		}
	})
</script>

老二

内容显示与隐藏 v-if v-show

<div id="#app">
	<div v-if="flag">显示<div>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		flag:true
		}
	})
</script>

显示

<div id="#app">
	<div v-show="sure == 2">哈哈<div>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		sure:2
		}
	})
</script>

哈哈

v-if 和 v-show区别：v-if会重新创建元素，但v-show控制的是元素的display，不会反复创建元素

3.动态绑定属性 v-bind

<div id="#app">
	<a v-bind="url">点我跳转</a>
	<!--v-bind可以简写为冒号:-->
	<img :src="imgUrl"/>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		url:"http://www.baidu.com",
	 		imgUrl:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3455184204,2524748306&fm=26&gp=0.jpg"
		}
	})
</script>

点击a标签可以跳转到百度首页，
img会显示图片，这是热巴的图片哟

4.实现数据双向绑定 ，多用于表单 v-model

<div id="#app">
	<input v-model="message" type="text"/>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		message:"半生浮名只是虚妄"
		}
	})
</script>

什么叫数据双向绑定呢？
可以在浏览器下载一个vue的纱插件，控制台便会有一个vue的选项。，打开vue可以看到你写的代码和数据。
你会看到，用v-model的input文本框，当你在文本框中随便输入东西，data中的数据也会改变成所输入的东西。

5.v-on 事件绑定
v-on可用@符号代替
v-on：+事件类型 引号中可以写方法体，也可以写一个事件函数
methods的方法中访问data中的数据的时候，要用this获取访问

<div id="#app">
	{{count}}
	<button v-on:click="count+=1">+</button>
	<button @click="jian">-</button>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		count:0
		},
	methods:{
		jian(){
			this.count = this.count - 1
		}
	  }
	})
</script>

点击加号按钮数字就会加1，点击减号按钮数字就会减1

6.计算属性
我的理解，对数据进行实时监测并处理，比如要把获取到的数据在展示之前都要进行*3的处理在展示，如果用methods里定义方法，代码显得过于复杂。此时可以考虑计算属性。

<div id="#app">
	{{count}}
	<button v-on:click="count+=1">+</button>
	<button @click="jian">-</button>
	
	<!--计算属性-->
	<input type="text" v-model="sum" />
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		count:0
		},
	methods:{
		jian(){
			this.count = this.count - 1
		}
	  }，
	  //计算属性
	computed:{
		sum(){
			return this.count * 3
		}
	  }
	})

当点击加号时数字+1，在经过计算属性的方法sum()处理后，文本框就会显示处理后的值 3


7.循环遍历 v-for

数组循环
item就是遍历到的数组的元素，index是元素下标位置，arr是data里的数组。这是数组有几个元素就会创建几个li

<div id="#app">
	<ul>
		<li v-for="(item,index) in arr" :key="index">位置：{{index}}--元素:{{item}}</li>
	</ul>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		arr:['他大舅','他二舅','他三舅','他妈']
		}
	})
</script>

位置:0 -- 元素:他大舅
位置:1 -- 元素:他二舅
位置:2 -- 元素:他三舅
位置:3 -- 元素:他娘

对象循环
key是对象中的属性名，val是对象中的属性值，index是属性的角标 user就是对象

<div id="#app">
	<ul>
		<li v-for="(val,key,index) in user" :key="index">键:{{key}} -- 值:{{val}} -- 索引:{{index}}</li>
	</ul>
</div>
<script>
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		user:{
					name:"空空",
					age:18,
					sex:"公"
				},
		}
	})
</script>

结果：

8.组件注册 + 父传子传值
Vue.component注册子组件，son是子组件的名字，template是子组件模板，props用来子组件接受父组件。自定义变量名myarr来接收父组件传来的数据，Array是接收数据的类型是数组;
在父组件的模板（id为app）里以标签的方式引用这个子组件;
子组件的变量绑定父组件的数据:myarr=“arr”

<div id="#app">
	<son :myarr="arr"></son>
</div>
<script>
	Vue.component('son',{
		template:`
			<div>
			  <ul>
			    <li v-for"(item,index) in myarr" :key="index">位置:{{index}}---内容:{{item}}</li>
			  </ul>
			<div>
        `,
        props:{
			myarr:Array
		}
	})
	
	const vm = new Vue({
	 el:"#app",
	 data:{
	 		arr:['他大舅','他二舅','他三舅','他妈']
		},
	})