Vue.js是当下很火的一个JavaScript MVVM库,以数据驱动和组件化的思想构建的。
1.声明式渲染:
<div id="app">
<span v-bind:title="tip">{{message}}</span> <!--v-bind 指令 绑定dom元素属性-->
</div>
<script>
var app = new Vue({
el:'#app', //id
data:{
message:'鼠标悬停查看绑定提示信息', //{{message}}
tip:'页面加载于 ' + new Date().toLocaleString()
}
})
</script>
所有的元素都是响应式的。打开你的浏览器的控制台并修改
app.message
,你将看到上例相应地更新。2.条件与循环
v-if 判断为真是显示。
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
v-for:循环 <div id="app">
<ul>
<li v-for="text in todos">{{text.txt}}</li> <!--text指代{txt:'..'}-->
</ul>
</div>
<script>
var app = new Vue({
el:'#app', //id
data:{
todos:[
{txt:'1-1'},
{txt:'1-2'},
{txt:'1-3'}
]
}
})
</script>
3.处理用户输入:
v-on
指令绑定一个事件监听器:
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: '逆转'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
4.组件化应用构建: <div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:new_p="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script>
//注册组件
Vue.component('todo-item',{ //组件名字
props:['new_p'], //自定义属性名
template:'<li>{{new_p.text}}</li>'
})
var app2=new Vue({
el:'#app',
data:{
groceryList:[
{id:0,text: '1-1'},
{id:1,text: '1-2'},
{id:2,text: '1-3'}
]
}
})
</script>
5.数据
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 他们引用相同的对象!
vm.a === data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3
Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $
,以便与用户定义的属性区分开来。例如:
vm.$el === document.getElementById('example') // => true
6.生命周期
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 他们引用相同的对象!
vm.a === data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3
vm.$el === document.getElementById('example') // => true
生命周期钩子:钩子的 this
指向调用它的 Vue 实例。(不要在选项属性或回调上使用箭头函数,箭头函数是和父级上下文绑定在一起的)
二、模板语法
小胡子语法(双大括号),无论何时,绑定的数据对象上 msg
属性发生了改变,插值处的内容都会更新。
v-html 可解析html代码 (你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS攻击。)
对于所有的数据绑定,支持JavaScript 表达式,如:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
1.1参数 一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind
指令可以用于响应式地更新 HTML 属性:
<a v-bind:href="url">...</a>
在这里 href
是参数,告知 v-bind
指令将该元素的 href
属性与表达式 url
的值绑定。 另一个例子是 v-on
指令,它用于监听 DOM 事件:
<a v-on:click="doSomething">...</a>
1.2修饰符以半角句号
.
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。1.3缩写
v-bind:href="url" 可缩写为 :href="url"
v-on:click="do" 可缩写为 @click="do"
三、计算属性和观察者
对于复杂的逻辑应当使用计算属性:
<div id="app">
<p>{{mes}}</p>
<p>{{mess}}</p>
<p>{{message()}}</p>
</div>
<script>
// 将同一函数定义为一个方法 或 一个计算属性,达到同样的效果
var app=new Vue({
el:"#app",
data:{
mes:'hello'
},
computed:{
//计算属性
mess:function(){
return this.mes.split('').reverse().join('')
}
},
methods: {
//方法
message:function(){
return this.mes.split('').reverse().join('')
}
}
})
</script>
然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要mes
还没有发生改变,多次访问 mess
计算属性会立即返回之前的计算结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
三、Class与Style绑定
动态切换class: v-bind:class
如:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: {
isActive: true,
hasError: false
}
或
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
也可以绑一个返回对象的计算属性
data:{ isActive:true, error:null },
computed:{ classObject:function(){ isTrue=true return{ active:this.isActive && !this.error, 'text-danger':this.error && this.error.type === 'fatal', isTrue: isTrue } } }
或数组
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
结果为:class="active text-dager"
或三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
或对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>