vue 基础语法

插值语法

• Mustache语法
  也就是双大括号（例子如下，并且是响应式）

<div id='app'>
	<p>{{messenge}}</p>
	//mustache语法中，可以执行简单的表单式
	<p>{{firstname + lastName}}</p>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			messenge:'今天天气不错',
			lastName:'cute',
			firstname:'liuixoahua'
		}
})
</script>

• v-once语法
  在不希望页面随意跟着更改的情况下，使用v-once

<div id='app'>
	<p>{{messenge}}</p>
	<p v-once>{{messenge}}</p>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			messenge:'天气不错',
		}
})
</script>

• v-html语法
  可以使数据按照HTML进行解析，并显示对应的内容

<div id="app">
	<h2>{{url}}</h2>
	  <h2 v-html="url"></h2>
</div>
<script>
const app = new Vue({
	el: '#app',
	data: {
		url: '这是一个链接'
    }
	})
</script>

• v-text语法
  作用与Mustache相似，用于讲数据显示在页面上；但是没有Mustache灵活，会覆盖到标签中的中文内容

<div id="app">
	<h2>{{url}}，天气不错</h2>  //结果为  你好呀，天气不错
	<h2 v-text="url">，天气不错</h2>  //结果为  你好呀
</div>
<script>
const app = new Vue({
	el: '#app',
	data: {
		url: '你好呀',
    }
	})
</script>

• v-pre语法
  简单点说，就是原样显示，不编译

<div id="app">
	<h2>{{url}}</h2>  //结果为  你好呀
	<h2 v-pre>{{url}}</h2>  //结果为  {{url}}
</div>
<script>
const app = new Vue({
	el: '#app',
	data: {
		url: '你好呀',
    }
	})
</script>

• v-cloak语法(斗篷)
  解决网络不佳或者js卡顿情况下，出现的未编译的Mustache标签的情况
  在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

绑定属性

• v-bind介绍
  • 动态绑定属性，例如a标签的href，input的type，img的src；缩写为:
  • 可以绑定一个或者多个属性，也可以向另一个组件传递props值
    简单绑定元素的src和href

<div>
	<img v-bind:src='imgSrc'>
	<a v-bind:href='aHref'>百度</a>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			imgSrc:'http://www.tezhongzhuangbei.com/ing.png',
			aHref:'http://www.baidu.com'
		}
	})
</script>

• 动态绑定class的两种方式：对象语法，数组语法
  • 对象语法，示例如下：
  • 数组语法，示例如下：

<p :class="{'Active':isActive}"></p>  //直接使用{}绑定一个类
<p :class="{'Active':isActive,'new':isNew}"></p>  //通过判断，传入多个值
<p class='english' :class="{'Active':isActive,'new':isNew}"></p>  //普通类存在，并不冲突
<p class="title" :class="classes"></p>
//用法四：如果过于复杂，可以放在一个methods或者computed中  注：classes是一个计算属性

<p :class="['active']"></p>  //绑定一个值
<p :class="['active','news']"></p>  //传入多个值
<p class='bad' :class="['active','news']"></p> //普通类存在，并不冲突
<p class="title" :class="classes">Hello World</p>
//用法四：如果过于复杂，可以放在一个methods或者computed中  注：classes是一个计算属性

• 动态绑定样式
  v-bind:style 能绑定一些css内联样式
  注意：属性名含有‘-’的需要采用驼峰式命名如font-size要写成fontSize，或者用单引号括起来；
  :style也有两种绑定形式，对象绑定和数组绑定，形式如下

<p :style="{color:thisColor,fontSize:font + 'px'}">{{messenge}}</p>
<p :style="[baseCss,overStyle]"></p>

计算属性

对数据进行转换后显示；计算属性是写在computed选项中的

<div id='app'>
	<h2>{{name}} {{firstName}}</h2>
	<p>{{fullName}}</p>
</div>
<script>
	var app = new Vue({
		el:'#app',
		data:{
			name:'mx',
			firstName:'l'
		},
		computed:{
			fullName(){
				return this.name + this.firstName;
			}
		}
	})
</script>

<div id='app'>{{totlePrice}}</div>
<script>
const app = new Vue({
	el:'#app',
	data:{
		books:[
		{id:110,name:'haha',price:119},
		{id:110,name:'haha',price:123},
		{id:110,name:'haha',price:142},
		{id:110,name:'haha',price:132},
		]
	},
	computed:{
		totlePrice:function(){
			const result;
			for(var i = 0;i < this.books.length;i++){
				result += this.books[i].price;
			};
			return result;
		}
	}
})
</script>

计算属性的setter和getter，setter代码如下

computed:{
	fullName:{
		set:function(newValue){
			const names = newValue.split('');
			this.firstName = names[0];
			this.lastName = names[1];
		},
		get:function(){
			return this.firstName + ',' + this.lastName;
		}
	}
}

计算属性缓存
methods和computed的区别：computed有缓存，多次调用时，智慧计算一次；但是methods会多次调用

事件监听

• v-on进行监听事件，监听用户发生的事件，例如：点击拖拽和键盘事件 ，缩写为@

<div id='app'>
	<h2>点击次数：{{counter}}</h2>
	<button v-on:click='counter++'>按钮点击</button>
	<button @click='btnclick'>按钮点击</button>
</div>
<script>
const app = new Vue({
	el:'#app',
	data:{
		counter:0
	}
	methods:{
		btnclick(){
			this.counter++;
		}
	}
})
</script>

• v-on参数
  当methods定义方法，以供@click使用时，需要注意参数
  1.方法不需要参数，那么调用时后面的()可以不写
  2.如果本身有一个参数，会默认将原生事件的event参数传递进去
  3.同事传递多个参数，也需要event时，可以通过$event传递事件

<div id='app'>
	<h2>{{counter}}</h2>
	<button @click='btnclick'>+1</button>
	<button @click='btnclickTen(10,$event)'>+10</button>
</div>
<script>
var app = new Vue({
	el:'#app',
	data:{
		counter:0
	},
	methods:{
		btnclick(event){
			console.log(event);
			this.counter ++;
		},
		btnclickTen(count,event){
			console.log(event);
			this.counter += count;
		}
	}
})
</script>

• v-on修饰符
  Vue提供了一些修饰符来帮助我们处理一些事件

//.stop - 调用enent.stopPropagation(); 停止冒泡
//.prevent - 调用event.preventDefault();阻止默认事件
//.{keyCode | keyAlias} - 只当事件是从特定键盘触发时才调用
//.native - 监听组件根元素的原生事件
//.once - 只触发一次
 - 停止冒泡
<button @click.stop="doThis"></button>
 - 阻止默认行为
<button @click.prevent="doThis"></button>
 - 阻止默认行为，没有表达式
<form @submit.prevent></form>
 - 串联修饰符
<button @click.stop.prevent="doThis"></button>
 - 键修饰符，键别名
<input @keyup.enter="onEnter">
 - 键修饰符，键代码
<input @keyup.13="onEnter">
 - 点击回调只会触发一次
<button @click.once="doThis"></button>

条件和循环

• 条件渲染
  v-if,v-else-if,else-if，Vue的条件可以根据表达式的值在Dom中渲染或者销毁元素或者组件；原理就是v-if后面的条件为false时，对应的元素或者子元素就不会渲染

<div id='app'>
	<h2 v-if='score >= 90'>1</h2>
	<h2 v-else-if='score >= 80'>2</h2>
	<h2 v-else-if='score >= 70'>3</h2>
	<h2 v-else>4</h2>
</div>
<script>
var app = new Vue({
	el:'#app',
	data:{
		score:12
	}
})
</script>

v-show指令
v-show的用法和v-if相似，也用来决定一个元素是否渲染
1.两者对比：v-if条件为false，不会有对应的元素在dom中；v-show条件为false时，仅仅是将元素的display属性设置为none。
2.两则选择：当频繁切换显示隐藏时，选择v-show；当只有一次切换时，选择v-if

<div id='app'>
	<button @click='toggle'>切换显示隐藏</button>
	<button is-show='isShow'>是否显示</button>
</div>
<script>
	var app = new Vue({
		el:'#app',
		data:{
			show:true,
		},
		methods:{
			toggle(){
				this.show = !this.show;
			}
		}
	})
</script>

• v-for 指令
  1.语法格式如下：item in items，遍历过程中不需要索引，想拿到索引，采用（item，index） in items的形式
  2.还可以遍历对象

<div id='app'>
	<ul>
		<li v-for='item in apples'>{{item}}</li>
		<li v-for='(item,index) in apples'>{{index+1}}{{item}}</li>
		<li v-for='(value,key,index) in info'>{{value}}-{{key}}-{{index}}</li>
	</ul>
</div>
<script>
const app = new Vue({
	el:'#app',
	data:{
		apples:['one','two','three'],
		info:[name:'lmx',age:'23',width:'12']
	}
})
</script>

表单绑定

v-model本质上包含两个操作：v-bind绑定value的一个属性；v-on给当前元素绑定input事件

<div id='app'>
	<input type='text' v-model='messenge'>
	{{messenge}}
</div>
<script>
var app = new VUe({
	el:'#app',
	data:{
		messenge:'你好呀'
	}
})
</script>

• v-model绑定其他属性
  1.v-model： radio
  当存在多个单选框时

<div id='app'>
	<label for='male'>
		<input type='redio' id='male' v-model='sex'>男
	</label>
	<label for='female'>
		<input type='redio' id='female' v-model='sex'>女
	</label>
	<p>{{sex}}</p>
</div>
<script>
var app = new Vue({
	el:'#app',
	data:{
		sex:'女'，
	}
})
</script>

2.v-model：checkbox
单个多选框， v-model为布尔值，此时input的值并不影响v-model的值
多个复选框，对应data中，是一个数组，当选中其中一个时，就会把value的值添加到数组中

<div id='app'>
	<label for='check'>
		<input type='checkbox' id='check' v-model='checked'>统一协议
	</label>
	<p>{{checked}}</p>

	<label><input type='checkbox' v-model='hobbies' value='1'>1</label>
	<label><input type='checkbox' v-model='hobbies' value='2'>2</label>
	<label><input type='checkbox' v-model='hobbies' value='3'>3</label>
	<p>{{hobbies}}</p>
</div>
<script>
var app = new Vue({
	el:'#app',
	data:{
		checked:false,
		hobbies:[]
	}
})
</script>

3.v-model：select
单选：只能选中一个值，会将对应的value值赋值到mySelect中
多选：可以选中多个值，v-model绑定的是一个数组

<select name='abc' v-model='mySelect'>
	<option value="苹果">苹果</option>
	<option value="香蕉">香蕉</option>
	<option value="榴莲">榴莲</option>
	<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{mySelect}}</h2>
<!--2.选择多个-->
<select name="abc" v-model="mySelects" multiple>
	<option value="苹果">苹果</option>
	<option value="香蕉">香蕉</option>
	<option value="榴莲">榴莲</option>
	<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{mySelects}}</h2>
<script>
const app = new Vue({
	el: '#app',
	data: {
		mySelect: '香蕉',
		mySelects: []
	}
});
</script>

4.值绑定
值绑定就是动态的给value赋值

<label v-for='item in items' :for='item'>
	<input type='checkbox' :value='item' :id='item' v-model='nobbies'>{{item}}
</label>
<script>
var app = new Vue({
	el:'#app',
	data:{
		items:['西瓜','南瓜','冬瓜','黄瓜']，
		hobbies:[]
	}
})
</script>

5.修饰符

• lazy修饰符
  默认情况下，v-model默认是在input事件中同步输入框中的数据，一旦数据改变，对应的data中的数据就会自动更新，lazy修饰符可以让数据在失去焦点或者回车的时候更新
• number修饰符
  默认情况下，input中可以输入字母或者数字，都会被当作字符串进行处理；number修饰符可以让输入框的内容自动转化成数字类型
• trim修饰符
  trim修饰符可以过滤掉内容左右两边的空格

//修饰符lazy
<input type='text' v-model.lazy='messenge'>
<h2>{{messenge}}</h2>

//修饰符number
<input type='text' v-model.number='age'>
<h2>{{age}}</h2>

//修饰符trim
<input type='text' v-model.trim='sex'>
<h2>{{sex}}</h2>