vue.js學習總結

時間 2019-11-10

標籤 vue.js vue 學習總結欄目 JavaScript 简体版

原文原文鏈接

下面使用的命令工具爲git bashjavascript

使用命令行工具搭建vue.js項目css

vue.js官網命令行工具安裝html

爲了提高安裝速度，建議將 npm 的註冊表源設置爲國內的鏡像vue

1.輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org，後續將使用cnpm代替npm進行安裝java

2.輸入命令：cnpm -v，查看當前cnpm的版本號node

3.輸入命令：cnpm install -g vue-cli，給全局安裝vue-cli，這樣才能使用vue這個命令webpack

4.輸入命令：vue init webpack my-first-vue-project，建立一個基於webpack模板的項目,項目名爲my-first-vue-projectgit

5.輸入命令：cnpm install，下載依賴，文件夾目錄中多了一個node_modulesweb

6.輸入命令：cnpm run dev，將項目運行起來，服務啓動起來，端口爲8080http://localhost:8080vuex

sublime能夠下載vue syntax highlight插件來語法高亮.vue

vue.js實例中的重要選項

data：存儲數據

methods：方法，內部可使用this.屬性名取data裏面定義的數據

watch：監聽數據的變化，與data中的數據對應

vue對象經過html指令將view層與model進行關聯

重要的指令有：

v-text：渲染數據

v-if：控制顯示

v-on：綁定事件

v-for：循環渲染

當頁面每次編輯完保存時，vue的腳手架工具會自動將.vue的文件轉換成瀏覽器可以識別的代碼，而且實現熱更新，不用刷新便可在頁面上看到咱們編輯完後的展現。

vue.js的watch監聽：

舉例：var obj = {a: '1',b: '2'};

　　　修改b的值：obj.b = '3';

　　　當watch的deep爲true，則會觸發監聽的回調函數；但爲普通監聽的時候，則不會觸發監聽的回調函數

vue.js的組件名最好使用短橫線法：

由於在HTML中，標籤的標籤名是大小寫不敏感的，而在javascript中變量名是大小寫敏感的
換句話說，在HTML中，ComponentA和componenta算是同一個標籤
而在javascript中，ComponentA和componenta卻不是同一個變量
要解決這種差別問題，就必須得在兩種標準之間作一個轉換，因此vuejs的做者就實現了將駝峯法(camelCase)轉換到短橫線法(kebab-case)

vue.js組件之間如何通訊

父組件向子組件傳遞數據：父組件是使用 props 傳遞數據給子組件

子組件向父組件傳遞數據以及非父子組件之間傳遞數據：情景爲B組件使用A組件，在B組件使用A組件的地方用v-on:（A組件的$emit方法名）來監聽A組件觸發的事件，在A組件的事件中用this.$emit('B組件監聽的事件名','傳遞的數據')來觸發事件，給A組件傳遞數據

<template>
    <div>
        <div>{{ newmsg }}</div>
        <div>{{ fathermsg }}</div>
        <button v-on:click="onClickMe">click Me!</button>
    </div>
</template>

<script type="text/javascript">
    export default {
        data () {
            return {
                newmsg: '我是componetA組件裏的第一句話',
                childmsg: '我是從componetA傳給App的話'
            }
        },
        props: ['fathermsg'],//父組件向子組件傳遞數據，子組件經過props選項配置來接收數據
        methods: {
            onClickMe () {
                this.$emit('childClick' , this.childmsg);//子組件向父組件傳遞數據或者非父子組件之間傳遞數據，在被引用組件中用this.$emit()觸發事件，並傳遞數據到引用組件中
            }
        }
    }
</script>

<style type="text/css">
    div{ color: red; font-size: 16px; font-weight: bold;}
</style>

子組件componentA.vue

<template>
  <div id="app">
    <h1 v-html="title"></h1>
    <!--v-model實現input、select、textarea與數據進行雙向綁定，v-on:keyup.enter爲鼠標按下的事件-->
    <input v-model="newItem" v-on:keyup.enter="addNew">
    <ul>
      <!--v-for實現數據循環展現，v-bind:class爲動態綁定一個或多個特性-->
      <li v-for="item in items" v-bind:class="[defaultLi,{isFinished: item.isFinished}]" v-on:click="toggleFinished(item)" >
        {{item.label}}
      </li>
    </ul>
    <!--引用組件中經過v-on:被引用組件emit方法名來監聽被引用組件的事件觸發-->
    <component-a fathermsg="我是APP.vue傳給子組件ComponentA的話" v-on:childClick="childTellMe"></component-a>
    <div>child tell me:{{childMsg}}</div>
  </div>
</template>

<script>
import Store from './store.js';
import ComponentA from './components/componentA'
//export default暴露出來的數據，至關於new Vue()裏面的參數，這裏的數據能夠直接應用到頁面上
export default {
  data: function () {//數據
    return {
      title: '<span>???</span>this is todo list',
      items: Store.fetch(),
      defaultLi: 'defaultLi',
      newItem: '',
      childMsg: ''
    }
  },
  components: { ComponentA },//要使得引入的模塊做爲標籤插入，則須要經過componets這個參數進行配置
  methods: {//方法，要獲取data裏面的數據使用this去取值
    toggleFinished: function(item){
      item.isFinished = !item.isFinished;
    },
    addNew: function(){
      this.items.push({
        label: this.newItem,
        isFinished: false
      })
      this.newItem = '';
    },
    childTellMe (msg) {
        this.childMsg = msg;
    }
  },
  watch: {
    items: {
      handler: function (items){
        Store.save(items);
      },
      deep: true//若是是深度watch，object的值無論是其中一個值發生變化仍是新增鍵值，都會監測到，並觸發handler函數
    }
    // items: function(items){
    //   Store.save(items);//普通watch，若是隻是object的一個值發生變化，則不會觸發該函數
    // }
  }
}
</script>

<style>
.defaultLi{color: red;}
.isFinished{ text-decoration: underline; }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>