Vue.js 是用來開發(fā) Web 界面的前端庫,它有著配套的周邊工具,本篇問您介紹 Vue.js
響應(yīng)式編程
展示數(shù)據(jù),對象例子:
var object = {
message: 'Hello World!'
}
一個特殊的模板
<div id="example">
{{ message }}
</div>
我們就可以把它們通過 Vue 進行組裝
new Vue({
el: '#example',
data: object
})
Vue 已經(jīng)將 object 對象更改為響應(yīng)式對象,在你修改 message 值時,渲染的 HTML 也會同步更新。
Vue 計算屬性
var example = new Vue({
data: {
a: 1
},
computed: {
b: function () {
return this.a + 1
}
}
})
// example 實例會同時代理 a 和 b 這兩個屬性.
example.a // -> 1
example.b // -> 2
example.a++
example.b // -> 3
此時計算屬性 b 會將 a作為依賴進行跟蹤,a 變化同時 b 也會一起變化。
再來看一個計數(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>計數(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)容。