vue.js的一些知識點


1、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{count}}</span>
        <button @click="inc">+</button>
    </div>

    <script>
        var app = new Vue({
          // 1.
          // data () {
          //   return {count: 0}
          // },

          // 2.
          // data: {
          //   count: 0
          // },

          // 3.
          data: function() {
            return {
              count: 0
            }
          },

          methods: {
            inc () {this.count++}
          }
        })
        app.$mount('#app')
    </script>
</body> 
</html>

上述的data有三種寫法,都能夠運行,那有什么區別呢?

首先,1是3的語法糖,是新的ES6語法,和3一摸一樣。

1和2的區別:引用官網,簡而言之,在app = new Vue對象時,沒什么區別,因為你app對象不會被復用。但是在組件中,因為可能在多處調用同一組件,所以為了不讓多處的組件共享同一data對象,只能返回函數。

使用組件時,大多數可以傳入到 Vue 構造器中的選項可以在注冊組件時使用,有一個例外: data 必須是函數。 實際上,如果你使用的不是函數,那么 Vue 會在控制台發出警告,告訴你在組件中 data 必須是一個函數。

下面的例子會讓所有的組件都同時發生變化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

<script>
var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // data 是一個函數,因此 Vue 不會警告,
  // 但是我們為每一個組件返回了同一個對象引用
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})
</script>
</body> 
</html>

由於這三個組件共享了同一個 data , 因此增加一個 counter 會影響所有組件!我們可以通過為每個組件返回新的 data 對象來解決這個問題:

data: function () {
  return {
    counter: 0
  }
}

https://cn.vuejs.org/v2/guide/components.html#data-必須是函數

https://segmentfault.com/q/1010000007910818?_ea=1490198

 

2、

漸進式框架、采用自底向上增量開發(可以查看前面的文章)

核心思想:響應的數據綁定和組合的視圖組件

在沒有接觸 DOM 的情況下更新了應用的狀態 - 所有的 DOM 操作都由 Vue 來處理,你寫的代碼只需要關注基本邏輯。v-on可以實現。

注意每個 Vue 實例都會代理其 data 對象里所有的屬性,只有這些被代理的屬性是響應的。如果在實例創建之后添加新的屬性到實例上,它不會觸發視圖更新。

 

3、

不僅可以綁定 DOM 文本到數據,也可以綁定 DOM 結構到數據(v-if)。

需要注意的是:v-if不能綁定在所掛載的元素上,比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue組件</title>
</head>
<body>
    <div id="app" title="text" v-if="type">
        {{message}} {{text}}    
     </div>
    <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
     <script>
        var mes = {
                message:"hello"+ new Date(),
                text:"world"
            }
        var app = new Vue({
            el:"#app",
            data:mes,
            type:true
        })
     </script>
</body>
</html>

這樣會報錯:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM