vue入门

v-text:

和{{meaasge}}差不多

设置标签的文本值（textContent）

<div id="app">
			
			<h2 v-text="message"></h2>
		</div>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:"moon"
				}
			})
		</script>

v-html

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解释为标签
v-text指令无论内容是什么，指挥解释为文本

<div id="app">
			<p v-html="content"></p>
			<p v-text="content"></p>
		</div>
			<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					// content:"河马",
					content:"<a href='http://www.baidu.com'>黑马</a>"
					}
			})

v-on

可替换为：@

为元素绑定事件

<div id="app">
			<input type="button" value="v-on指令"v-on:click="doit" />
		</div>
					<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		
		<script>
			var app=new Vue({
				el:"#app",
				methods:{
					doit:function(){
						alert("做");
					}
				}
			})

<div id="app">
			<input type="button" value="v-on指令"v-on:click="doit" />
			<h2 @click="changefood">{{food}}</h2>
		</div>
					<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					food:"荷兰豆"
				},
				methods:{
					doit:function(){
						alert("做");
					},
					changefood:function(){
						console.log(this.food);
						this.food+="好好吃";
					}
				},
			})
		</script>

计算器：

<div id="app">
			
			<button @click="sub">
				-
			</button>
			<span>
				{{num}}
			</span>
			
			<button @click="add">
				+
				
			</button>
		</div>
							<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		
		<script>
			var app=new Vue({
				
				el:"#app",
				data:{
					num:1
				},
				methods:{
					
					add:function(){
						console.log('add');
						this.num++;
					},
					sub:function(){
						console.log('sub');
						this.num--;
					}
				}
			})
		</script>

v-show:

根据表达值的真假，切换元素的显示和隐藏。

v-if

根据表达值的真假，切换元素的显示和隐藏

v-bind:

设置元素的属性（比如：src，title，class）

v-for
根据数据生成列表结构：

<div id="app">
			
			<ui>
				<li v-for="item in arr">
					{{item}}
				</li>
			</ui>
		</div>
									<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					arr:["北京","深圳","广州"]
				}
			})
		</script>

v-model:

获取和设置表单元素的值（双向数据绑定）

		<div id="app">
			<input type="text" v-model="message" />
			
			<h5>{{message}}</h5>
			
		</div>
											<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:"和欸吗"
				}
			})
		</script>