Vue.js 是用來開發(fā) Web 界面的前端庫，它有著配套的周邊工具，本篇問您介紹 Vue.js
響應(yīng)式編程
展示數(shù)據(jù)，對象例子：
var object = {
message: 'Hello World!'
}一個(gè)特殊的模板
<div id="example">
{{ message }}
</div>我們就可以把它們通過 Vue 進(jìn)行組裝
new Vue({
el: '#example',
data: object
})Vue 已經(jīng)將 object 對象更改為響應(yīng)式對象，在你修改 message 值時(shí)，渲染的 HTML 也會同步更新。
Vue 計(jì)算屬性
var example = new Vue({
data: {
a: 1
},
computed: {
b: function () {
return this.a + 1
}
}
})
// example 實(shí)例會同時(shí)代理 a 和 b 這兩個(gè)屬性.
example.a // -> 1
example.b // -> 2
example.a++
example.b // -> 3此時(shí)計(jì)算屬性 b 會將 a作為依賴進(jìn)行跟蹤，a 變化同時(shí) b 也會一起變化。
再來看一個(gè)計(jì)數(shù)器實(shí)例：
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>vue-w3cschool(編程獅)</title>
<script src="vue/Vue.demo/vue.js"></script>
</head>
<body>
<div id="app">
<p>計(jì)數(shù)器：{{counter}}</p>
<button @click="sub">-</button>
<button @click="add">+</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
counter:0
},
methods:{
sub(){
this.counter--;
},
add(){
this.counter++;
}
}
})
</script>
</body>
</html>以上就是小編為您帶來的 Vue.js 介紹 的全部內(nèi)容。
