vue學習筆記

一.環境搭建

1.全局安裝官方腳手架 vue-cli,腳手架安裝成功後能夠經過 vue -V來查看版本，若是顯示版本號。說明安裝成功了。

npm install -g @vue/cli

2.建立項目 vue-learn 爲項目名，可自定義。

vue create vue-learn

3.項目成功以後執行進入項目所在的文件夾並啓動項目。項目啓動成功以後會看到兩個地址一個local 一個Network。本地調試的時候打開loca便可

cd vue-learn 
npm run serve

二.模板語法
1.普通文本

<h1>{{ msg }}</h1>

2.須要解析的html,好比經過富文本編輯器提交的內容。利用v-html指令。msg裏面的內容會被解析到這個div裏面

<div v-html='msg'></div>

3.自定義指令 directive.好比說咱們想在數字面前加上錢的符號，$ 或者 ￥。咱們能夠這樣作。

在 components文件夾下新建一個文件叫 d.js。代碼以下。

import Vue from 'vue'
let getOptions = function(type) {
   return {
    bind: function (el, binding) {
        el.textContent = type + binding.value
    },
    update: function (el, binding) {
        el.textContent =type + binding.value
    }
  }
}
Vue.directive('md',getOptions('$'))

Vue.directive('mr',getOptions('￥'))

Vue.directive() 接受兩個參數：
1).指令名,如上的md和mr。這個參數相似默認指令裏v-if裏的if。
2).一個對象。這個對象裏面會有一些方法，bind,update等。這些都不是自定義的，都是框架自身的，直接用就能夠。這些方法(bind等)接收一些參數，如el(指令所在的dom元素),binding(包含一些信息)。具體能夠去看文檔。

自定義指令如何使用
1).能夠在App.vue裏引入

import './components/d.js'

2).在須要組件裏能夠直接使用，須要注意的是使用的時候必須加上v-前綴

<div v-md='m'> </div>
 <div v-mr='m'></div>


data() {
    return {
      m:'333333333'
    }
  }

---

更新時間 2018年12月10日。

---

三.計算屬性的簡單使用。
計算屬性的應用場景：具備依賴關係的數據簡體。
下面舉一個簡單的例子：
假設你欠了別人100(money)塊錢,還了5(a)塊錢。你想知道還須要還多少錢。下面的方式是使用表達式的方式實現的

<div>還須要還多少錢：{{money-a}}</div>

  data() {
    return {
      money:100,
      a:5
    }
  }

固然也能夠使用計算屬性。在computed裏面定義一個函數，這個函數會return一個值。

<div>還須要還多少錢：{{funB}}</div>
data() {
    return {
      money:1001,
      a:5
    }
  },
  computed:{
    funB:function(){
      return this.money-this.a
    }
  }