Vue學習筆記第一天--知識點

數據流

• 1向：js內存屬性發生改變，影響頁面的變化
• 1向：頁面的改變影響js內存屬性的改變

vue中經常使用的v-指令演示

• 經常使用指令
• v-text 是元素的innerText只能在雙標籤中使用
• v-html 是元素的innerHTML，不能包含<!--{{xxx}} -->
• v-if 元素是否移除或者插入
• v-show 元素是否顯示或隱藏
• v-model 雙向數據綁定，v-bind是單向數據綁定(內存js改變影響頁面)

class結合v-bind使用

• 須要根據可變的表達式的結果來給class賦值，就須要用到v-bind:class="xxx"

• v-bind:屬性名="表達式"，最終表達式運算結束的結果賦值給該屬性名

  • 簡化的寫法是: :屬性名="表達式"

• class:結果的分類

  • 一個樣式: 返回字符串(三元表達式和key和樣式的清單對象)
  • 多個樣式：返回對象(樣式作key，true或flase作值)

methods和v-on的使用

• 綁定事件的方法

  • v-on:事件名="表達式||函數名"
  • 簡寫: @事件名="表達式||函數名"
• 函數名若是沒有參數，能夠省略() 只給一個函數名稱

• 聲明組件內函數，在export default這個對象的根屬性加上methods屬性，其是一個對象

  • key 是函數名 值是函數體

• 在export default這個對象的根屬性加上data屬性，其是一個函數，返回一個對象

  • 對象的屬性是咱們初始化的變量的名稱
• 凡是在template中使用變量或者函數，不須要加this
• 在script中使用就須要加上this

v-for的使用

• 可使用操做數組 (item,index)
• 可使用操做對象 (value,key,index)
• key 是相似trank by 的一個屬性
• 爲的是告訴vue，js中的元素，與頁面之間的關聯，當識圖刪除元素的時候，是單個元素的刪除而不是正版替換，因此須要關聯其關係，設置(必須,性能)
• 2.2.0+ 的版本里，當在組件中使用 v-for 時，key 如今是必須的。

漂亮的列表

父子組件使用

• 父和子，使用的是父，被用的是子
• 父須要聲明子組件，引入子組件對象，聲明方式以下

import 子組件對象 from './xxx.vue';

    {
        components:{
            組件名:子組件對象
        }
    }

• 全局組件，使用更爲方便，不須要聲明，直接用
• 在main.js中引入一次，在main.js中使用 vue.component('組件名',組件對象);
• 全部的組件就能夠直接經過組件名，使用

父傳子

• 父組件經過子組件的屬性將值進行傳遞

  • 方式有2:

    • 常量: prop1="常量值"
    • 變量: :prop2="變量名"

• 子組件須要聲明

  • 根屬性props:['prop1','prop2']
  • 在頁面中直接使用{{prop1}}
  • 在js中應該如何使用prop1？ this.prop1獲取

看文檔的對象分類

• 1:全局的表明Vue.的
• 2:實例的表明this.或者new Vue().
• 3:選項表明 new Vue() 的參數
• 或者 export default裏邊的屬性

子向父組件通訊（vuebus）(擴展)

• 經過new Vue()這樣的一個對象，來$on('事件名',fn(prop1,pro2))
• 另外一個組件引入同一個vuebus, 來$emit('事件名',prop1,pro2)

總結

• -1 : 已經存在node_modules包，已經存在package.json和webpack.config.js文件
• 1: 建立index.html,看看其所在文件和webpack.config.js文件中描述的關係
• 2: 在index.html div->id->app
• 3: 建立main.js,看看其所在文件和webpack.config.js文件中描述的關係
• 4: 在main.js中引入vue,和相關組件對象
• 5: new Vue(選項options) , 目的地el 渲染內容 render:c=>c(App) 渲染App的內容

• 6: 編寫app.vue

  • template 在2.x之後只能有一個根節點
  • script 格式是export default { 選項options}
  • style 加上scoped（範圍的）以後，樣式只對當前模板有效

• 7: 可能使用組件或者使用函數或者接受參數

  • options(根屬性):

    • data 是一個函數,return一個對象
    • methods 是一個對象,key是函數名,value是函數體
    • components 是一個對象,key是組件名,值是組件對象
    • props 是一個數組,元素是多個接受的參數

• 8: 套路總結

  • 凡是在上邊可使用的東西
  • 在下邊就可使用，經過this.

• 9:啓動

  • 進入到webpack.config.js 和package.json文件同在的目錄中啓動命令行

  • 輸入: 正在編碼: npm run dev

    • 報錯: 檢查命令所執行的../ 上級,是否存在node_modules目錄及相關文件是否存在
  • 輸入: 代碼編寫完畢，提交到公司 : npm run build