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>

你可能感兴趣的:(vue,vue)