vue简介
vue是一套构建用户界面的渐进性(可用一部分功能特性,也可以全用)轻量级(33kb,虚拟DOM)框架,有点像java后台的freemarker、jsp。
兼容性
vue不支持IE8及以下版本。
导入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
创建vue对象
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
<script>
//el、data是vue的固定属性。
var app = new Vue({
el: '#app',//这里的#app对应<div id="app">里的app
data: {//data里定义数据
message: 'Hello Vue!'
}
})
</script>
</html>
插值表达式(单向绑定)
在vue对象元素内,可以使用{{ xxx }}
输出内容,有点像java的el表达式。
支持js语法,可以调用js函数(但必须有返回值),如new Date()。
表达式必须有返回结果,如1+1,没有结果的表达式不允许使用如,var a=1+1。
可以直接获取vue实例里定义数据和函数。
插值表达式不可用于属性值上。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{ 1+1 }}
{{ 1==1?'yes':'no' }}
{{ new Date() }}
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
v-html(单向绑定)
将数据输出到元素内部,如果有html则会渲染。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<span v-html='title_value'></span>
</div>
<script>
var app = new Vue({
el: '#app'
data: {
title_value: '<h1>Hello Vue!</h1>'
}
})
</script>
</html>
v-text(单向绑定)
将数据输出到元素内部,如果有html不会渲染。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<span v-text='title_value'></span>
</div>
<script>
var app = new Vue({
el: '#app'
data: {
title_value: 'Hello Vue!'
}
})
</script>
</html>
v-bind(单向绑定)
用于将vue的值绑定给对应dom的属性值。
语法:v-bind:属性名
或简写::属性名
。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input v-bind:type='bindtype'/>
</div>
<script>
var app = new Vue({
el: '#app'
data: {
bindtype: 'hidden'
}
})
</script>
</html>
v-model(双向绑定)
vue提供双向绑定支持,即修改页面的值vue对象data内的数据会随之更新,修改vue对象data内部的数据,页面显示的值也会随之更新。
一般用于表单输入时使用。
input元素的radio、text都是字符串接收。
textarea元素,字符串接收。
select元素,多选用数组接收,单选字符串接收。
input元素的checkbox,多个用数组接收,单个用boolean接收。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input v-model='name'/>
<input type='checkbox' value='Java' v-model='interests'/>
<input type='checkbox' value='PHP' v-model='interests'/>
<input type='checkbox' v-model='isOK'/>
</div>
<script>
var app = new Vue({
el: '#app'
data: {
name: '张三',
interests:['Java'],//多个复选框使用数组接收
name: true//单个复选框使用布尔接收
}
})
</script>
</html>
v-on(事件绑定)
vue提供事件绑定支持
语法:v-on:事件名
或简写:@事件名
。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type='button' v-on:click='show()'/>
</div>
<script>
var app = new Vue({
el: '#app'
methods: {
show: function(){
alert('show');
}
}
})
</script>
</html>
v-for(循环输出)
语法:v-for="itemXXX in arrayXXX"
或v-for="(itemXXX,indexXXX) in arrayXXX"
可以多层嵌套使用,也可以配合v-if嵌套使用。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<table>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td v-text="user.age"></td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#app'
data: {
users: [{name:'zhangsan',age:18},{name:'lisi',age:28}]
}
})
</script>
</html>
v-if(条件判断)
v-if控制元素是否渲染,也就是说如果条件为false,连所在的元素都不存在。
可以多层嵌套使用,也可以配合v-for嵌套使用。
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<label v-if="showLabel">A</label>
<span v-else-if="showSpan=='TRUE'">B</span>
<p v-else>C</p>
</div>
<script>
var app = new Vue({
el: '#app'
data: {
showLabel: false,
showSpan: true
}
})
</script>
</html>
生命周期
直接上官网的图:
太复杂了对不对,其实我们一般只关注vue给我暴露出来的钩子,也就是虚线箭头指向的created、mounted等等。
created函数在渲染之前执行。
mounted函数在渲染之前执行
栗子:
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<label v-if="showLabel">A</label>
<span v-else-if="showSpan=='TRUE'">B</span>
<p v-else>C</p>
</div>
<script>
var app = new Vue({
el: '#app'
created(){
console.log('渲染之前');
},
mounted(){
console.log('渲染之后');
}
})
</script>
</html>