插值语法
- 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: '<a href="http://www.baidu.com">这是一个链接</a>'
}
})
</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>