Vue的基础语法

基础语法

挂载点

挂载点指Vue 实例中 el属性 所对应的 id的控件

插值表达

v-text:会进行转义

	<div id="root">
		<div v-text="content"></div>
	</div>
	<script>
		new Vue({
			el: "#root",
			data:{
				content:"<h1>hello</h1>"
			}
		});
	</script>

显示结果：

v-html:不会进行转义“

<div id="root">
			<div v-html="content"></div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data:{
					content:"<h1>hello</h1>"
				}
			});
		</script>

显示结果：

事件的绑定 v-on: 可以用" @ " 代替
在 < div>上绑定一个点击事件

<div id="root">
			<div v-on:click="handleClick">{{content}}</dib>
				<!--<div @click="handleClick">{{content}}</div>-->
		</div>
		<script>
			new Vue({
				el: "#root",
				data:{
					content:"hello"
				},
				methods: {
					handleClick: function(){
						this.content="你好";
					}
				}
			});
		</script>

显示
点击hello后变化为：

Vue 的属性绑定和双向数据绑定

v-bind: 进行属性绑定操作 可以简化为” ：“

<div id="root">
	<div v-bind:title="title">hello world</div>
</div>
<script>
	new Vue({
		el: "#root",
		data:{
			title: "this is hello world"
		},
	
	});
</script>

显示如下：

双向数据绑定
通过 v-model 进行数据绑定

<div id="root">
			<input v-model="content"/>
			<div>{{content}}</div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data:{
					content: "this is content"
				},
			
			});
			</script>

显示如下：

当在文本框中输入值时下发显示的数据同时会进行修改如下图所示：

计算属性和监听器

计算属性 computed
监听器: watch

将两个输入框中的数据进行相加
监听器：用来计算对象修改的次数

<div id="root">
			<input v-model="firstName"/>
			<input v-model="secondName"/>
			<h1>{{firstName}}</h1>
			<h2>{{secondName}}</h2>
			<h3>{{fullName}}</h3>
			<h3>{{count}}</h3>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					firstName: "123",
					secondName: "123",
					count: 0
				},
				computed:{
					fullName: function(){
						return this.firstName+this.secondName;
					}
				},
				watch: {
					firstName: function(){
						this.count++;
					},
					secondName: function(){
						this.count++;
					},
					fullName: function(){
						this.count++;
					}
				}
			});
		</script>

显示如下：

v-if v-show 和v-for

v-if 若值为true 对应控件会显示 为false 则不会显示
v-show若值为true 对应控件会显示 为false 则不会显示
v-if和v-show的区别在于v-show 并不会将标签销毁而是给标签一个
display:none属性用于隐藏标签
所以v-show用于隐藏显示频繁的情况。

<div id="root">
		<div v-if="show">hello</div>
		<button @click="toggle">toggle</button>
	</div>
	<script>
		new Vue({
			el: "#root",//挂载点
			data:{
				show :true
			},
			methods:{
				toggle: function(){
					this.show=this.show?false:true;
				}
			}
		})
	</script> 

显示如下：
当按下按钮后hello会消失，再按下又会显示出来
v-for 用于 列表的循环展示

<div id="root">
			<ul>
				<li v-for="item of list">{{item}}</li>
			</ul>
		
		</div>
		<script>
			new Vue({
				el: "#root",//挂载点
				data:{
					list: [1,2,3]
				}
			})
		</script>

显示如下：

向列表对象中添加值
list.push();

<div id="root">
			<input v-model="inputValue"/>
			<input type="button" @click="putIn" value="添加">
			<ul>
				<li v-for="item of list">{{item}}</li>
			</ul>
		
		</div>
		<script>
			new Vue({
				el: "#root",//挂载点
				data:{
					inputValue: "",
					list: []
				},
				methods :{
					putIn: function(){
						this.list.push(this.inputValue);
					}
				}
			})
		</script>

在输入框中输入值，点击添加按钮，将会把值push到list列表中，显示如下：

组件

全局组件

<ul>
	<todo-item></todo-item>
</ul>
<script>
			Vue.component('todo-item',{
				template:'<li>item</li>'
			})
</script>

局部组件

<ul>
	<todo-item></todo-item>
</ul>
<script>
			 var TodoItem={//组件定义
			 	template: "<li>item</li>"
			}
			new Vue({
				el: "#root",//挂载点
				components:{//组件调用
					"todo-item": TodoItem
				}
				})
</script>

向组件中传值：

Vue.component('todo-item',{
			props: ['content'],
			template:'<li>{{content}}</li>'
		})

<ul>
	<todo-item v-for="(item,index) of list" 
		:key="index" :content="item"></todo-item>
	</ul>

Vue中的每一个组件都是一个Vue实例
例如组件同样也包含methods

Vue.component('todo-item',{
				props: ['content'],
				template:'<li @click="handleClick">{{content}}</li>',
				methods: {
					handleClick: function(){
						alert("asd");
					}
				}
			})

父组件向子组件传值是以属性的形式传值的