Vue.js 介紹

猿友 2021-03-30 13:14:58 瀏覽數(shù) (2590)

反饋

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í)例：

vue計(jì)數(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)容。

Vue.js

0 人點(diǎn)贊