手把手教你學Vue-1(vue指令)

最近由於要重構APP項目，在對比了react和Vue，加上前期已經有了react開發的經驗，仍是想嘗試一下VUE，更小更便捷的開發方式。

1.vue 初始化安裝官網提供的NPM方法

$ npm install vue
 # 全局安裝 vue-cli
 $ npm install --global vue-cli
 # 建立一個基於 webpack 模板的新項目
 $ vue init webpack my-project
 # 安裝依賴，走你
 $ cd my-project
 $ npm run dev

2.初入Vue-demo

<div id="vue_det">
   <h1>site : {{site}}</h1>
   <h1>url : {{url}}</h1>
   <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
   var vm = new Vue({
       el: '#vue_det',
       data: {
           site: "菜鳥教程",
           url: "www.runoob.com",
           alexa: "10000"
       },
       methods: {
           details: function() {
               return  this.site + " - 學的不只是技術，更是夢想！";
           }
       }
   })
</script>

3.Vue-js 指令

• 數據data顯示 用{{}}

  • 當咱們給一個好比 props 中，或者 data 中被觀測的對象添加一個新的屬性的時候，不能直接添加，必須使用 Vue.set 方法。

• Vue.set 方法用來新增對象的屬性

• • vue-html 模版指令 vue不是字符串模版渲染，因此須要用vue-html來渲染dom

    <div id="app">
     <div v-html="message"></div>
    </div> 
     <script>
        new Vue({
          el: '#app',
          data: {
            message: '<h1>菜鳥教程</h1>'
          }
        })
        </script>

  • v-bind HTML 屬性中的值應使用 v-bind 指令（縮寫方式 ：tile='XXXX'）。 屬性v-bind:title='我是title屬性'
• v-if v-else v-else-if 條件判斷語句

• v-show 簡單語句 ，有緩存，若是是屢次操做，建議用v-show

  • 通常來講，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換 v-show 較好，若是在運行時條件不大可能改變 v-if 較好。
• v-on 綁定事件 縮寫方式 @click:{{functionName()}}
• v-for 循環迭代 for-in
• v-model用在表單控件上的，用於實現雙向數據綁定，因此若是你用在除了表單控件之外的標籤是沒有任何效果的。

4.Vue.js 計算屬性

<div id="app">
 <p>原始字符串: {{ message }}</p>
 <p>計算後反轉字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {
   message: 'Runoob!'
 },
 computed: {
   // 計算屬性的 getter
   reversedMessage: function () {
     // `this` 指向 vm 實例
     return this.message.split('').reverse().join('')
   }
 }
})
</script>

咱們可使用 methods 來替代 computed，效果上兩個都是同樣的，可是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值。而使用 methods ，在從新渲染的時候，函數總會從新調用執行。
詳細請參考

5.Vue.js 監聽屬性

<div id = "computed_props">
    公里 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = val * 1000;
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch 是一個實例方法
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 這個回調將在 vm.kilometers 改變後調用
    document.getElementById ("info").innerHTML = "修改前值爲: " + oldValue + "，修改後值爲: " + newValue;
})
</script>

詳細參考

6.v-on事件

.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符能夠串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素自己（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能點擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

7 .自定義事件 咱們可使用 v-on 綁定自定義事件,

每一個 Vue 實例都實現了事件接口(Events interface)，即：
使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件

8. v-model 雙向綁定修飾符

.lazy
在默認狀況下， v-model 在 input 事件中同步輸入框的值與數據，但你能夠添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
若是想自動將用戶的輸入值轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值），能夠添加一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">
這一般頗有用，由於在 type="number" 時 HTML 中輸入的值也老是會返回字符串類型。

.trim
若是要自動過濾用戶輸入的首尾空格，能夠添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">

入門文檔