Vue學習筆記1

ytmaylover發表於2018-09-06
Vue筆記

1.vue init

  • 初始化vue ,建立main.js 建立app.vue,建立router/index.js
  • 在main.js中引入元件，之後在此處引入框架宣告
    import vue from 'vue'
import APP from './app.vue'
import router from './router'
複製程式碼
  • 在app.vue 模版中
    • 每個vue檔案 定義一個根div
    • app.vue 的根div中，有佔位
      <template>
<div id="app">
    <router-view/>
</div>
</template>

<script>
export default {
name: 'App'
}
</script>
複製程式碼
  • 在main.js 檔案中

    • 在main.js中init Vue 1個專案是一個Vue例項初始化 new Vue({})

    • el:#app 目的地，入口是#app

    • router:router,ES6之後，key 和value 相同可以省略key, ```Vue Vue.config.productionTip = false

      Vue.use(Vuex)
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
```
複製程式碼
  • 變數的匯出 匯入
    • 預設匯出 export default temp1 對應匯入import xxx from './xx.js'
    • 宣告式匯出
      • export var obj1 = '宣告式匯出1'
      • export var obj2 = '宣告式匯出2'
      • var obj3 = '宣告式匯出3' export {obj3}
      • 匯入：import {obj1,obj2} from './xxx.js'

2.值繫結 v-model v-for

  • 繫結到UI 在模版內使用例項的屬性不需要使用this，直接使用{{text}}

    • 在<script></script>標籤內export default ({例項})
    • 例項右data 屬性，data:funcction(){ return 物件}
    • 也可以寫成data(){return 物件}
    export default {
    //配置
    // 類似$scope.xxx = '初始化'
    // data:function(){
        
    // },
    data(){
        return {  //放資料的地方
            text:'大家好',
            list:[{name:'jack'},{name:'rose'}]
        }
    }
}
複製程式碼

  • 繫結到例項屬性 使用v-model

    • <input type='text' v-model="text">
    • 文字輸入到data 內的text屬性中。再繫結到{{text}} UI中

  • 列表的資料繫結 v-for in 結合li 和td 一起使用

    • <li v-for='person in list'>{{person.name}}</li>
    • list是data的list物件陣列 person是其中一個物件，繫結person.name到每一個li標籤上面

3.vue指令簡單介紹

  • v-text 是元素的innerText只能在雙標籤中使用
    • <span v-text='text1'></span> 和 <span>{{text1}}</span> 等價
  • v-html 是元素的innerHTML，插入帶標籤的html 不能包含{{xxx}}
  • v-show 元素是否顯示或隱藏 等價操作dispaly屬性 觸發又過渡效果
  • v-if 元素是否移除或插入 按條件進行渲染標籤
  • v-else 條件渲染和 v-if v-else-if 結合使用
  • v-for 列表渲染 優先順序大於v-if
  • v-on 繫結時間監聽器 可以簡寫為@
    • <button @click="clickfunc"></button>
  • v-bind 繫結一個或多個屬性到表示式 簡寫為:
    • <img :src="imageSrc">
    • <img v-bind:src="imageSrc">
  • v-modle 資料繫結到UI 在表單控制元件或元件上雙向繫結
  • v-pre 跳過這個元素和子元素的編譯過程，加快編譯
  • v-cloak 這個指定一直關聯元素上知道編譯結束 結合css中 display:none
    [v-cloak] { display: none; }
複製程式碼
    <div v-cloak> {{ message }} </div>
複製程式碼
  • v-once 只渲染元素和元件一次

4.vue 繫結class

  • 使用v-bind:class=表示式
  • 1對1
    <div v-bind:class="{ active: isActive }"></div>
複製程式碼
    data: {
isActive: true,
hasError: false
}
複製程式碼
  • 1對多 和普通的class共存
    <div class="static"  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
複製程式碼
  • 1選擇1 再v-for 中，單/雙行不同背景色，
    <p :class="{'colom2':true,'backg1':index%2==0,'backg2':index%2==1}"> {{Number(amode.riskRatio * 100).toFixed(2)}}%</p>
複製程式碼
  • 也可以從一個物件中根據不同key取處不同的value class
    <ul>
    <li v-for="stu in stus" :class="{'A':'red','B':'green'}[stu.score]">
        {{stu.name}}
    </li>
</ul>
複製程式碼

5.vue 的v-on click

  • 修飾符 .stop .prevent .capture .self .native .once .left .right .middle .passive

  • v-on:click 可以簡寫為@click

    <button v-on:click="isRed = !isRed">點我大變化</button> 
<button @click="change">點我大變化</button>
複製程式碼
    data(){
    return {
        isRed:false,
        stus:[{name:'jack',score:'A'},{name:'rose',score:'B'}]
    }
},
 //宣告函式，屬於元件物件的
 methods:{
    //包含多個函式名做key，函式體做value
    change(){
        //在script中能使用的物件，基本template中也能使用，但是
        //在script中加this,template中不需要this
        this.isRed = !this.isRed;
        this.stus.push({
        name:'mick',score:'A'
        })
    }
}
複製程式碼

  • 內聯語句 傳入引數

    <button v-on:click="doThat('hello', $event)"></button>
複製程式碼

  • 停止冒泡 阻止單擊事件繼續傳播

    <button @click.stop='stopAction'></button>
複製程式碼

  • 阻止預設行為

    <button @click.prevent='preventAction'></button>
複製程式碼

  • 阻止預設行為沒有表示式 提交事件不再過載頁面

    <form @submint.prevent></from>
複製程式碼

  • 串聯修飾符

    <button @click.stop.prevent></button>
複製程式碼

  • 鍵修飾符 鍵盤別名 有.enter .tab .delete .esc .down .up .left .right .space

    <input @keyup.enter='enterAction'>
複製程式碼

  • 鍵修飾符 鍵盤碼

    <input @keyup.13='enterAction'>
複製程式碼

  • 點選只會觸發一次

    <button @click.once='clickAction'></button>
複製程式碼

  • 物件語法 {系統方法名a:自定義方法a,系統方法名b:自定義方法b,}

    <button @click="{mousedown:downAction,mouseup:upAction}"></button>
複製程式碼

  • 新增事件監聽器時使用事件捕獲模式

  • 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理

    <div @click.capture='captureAction'></div>
複製程式碼

  • 修飾符self 只當在 event.target 是當前元素自身時觸發處理函式,點選的是自己，不是子試圖 即事件不是從內部元素觸發的

    <button @click.self='selfAction'><button>
複製程式碼

  • @click.self.prevent阻止自己元素的點選 @click.prevent.self 組織所有的點選

6.vue 的v-for 列表渲染

  • v-for 使用 item in items 語法 items 是源資料陣列，item是資料陣列中迭代的別名

  • 可以使用 (item ,index) in items 第二個引數為順序index

  • 一個物件的v-for value

    • <li v-for="value in object"> 繫結的是物件屬性對應的值。 無序的。
    • 也可以使用 <li v-for="(value, key) in object">
    <li v-for="value in object">
    {{ value }}
</li>
結果為：
John
Doe
30
複製程式碼
    new Vue({
el: '#v-for-object',
data: {
    object: {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
    }
}
})
複製程式碼

  • 資料來源的更改方法 重新整理UI psuh() pop() shift() unshift() sort() reverse() splice()

  • 資料來源不改變UI的方法 filter() concat() slice() 這些不重新整理UI的方法，進行重新賦值資料來源 整個替換

    example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
複製程式碼

  • 刪除某個資料

    del(index){
    this.heros.splice(index,1);
}
複製程式碼

  • 注意事項 陣列中vm.items[indexOfItem] = newValue 和 vm.items.length = newLength 進行修改是不會觸發重新整理，用Vue.set(vm.items,indexOfItem,newValue)

  • 物件的屬性的增加刪除也是不觸發重新整理，用Vue.set(aobject,key,value) 強制觸發。

  • 為已有物件賦予多個新屬性 比如使用Object.assign()或者_.extend()

    vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
複製程式碼

  • 顯示排序/過濾結果

    • 有時，我們想要顯示一個陣列的過濾或排序副本，而不實際改變或重置原始資料。在這種情況下，可以建立返回過濾或排序陣列的計算屬性。
    • 在計算屬性不適用的情況下 (例如，在巢狀 v-for 迴圈中) 你可以使用一個 method 方法：
      <li v-for="n in even(numbers)">{{ n }}</li>
複製程式碼
      data: {
    numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
    even: function (numbers) {
        return numbers.filter(function (number) {
        return number % 2 === 0
        })
    }
}
複製程式碼

  • 取一段範圍的v-for <span v-for='n in 10'>{{n}}</span>

  • v-for on a <template> 類似於 v-if，你也可以利用帶有 v-for 的 <template> 渲染多個元素 table 的cell

    <ul>
  <template v-for='item in items'>
      <li>{{item.name}}</li>
      <li>{{item.age}}</li>
  </template>
</ul>
複製程式碼

  • v-for with v-if

    • v-for 比 v-if 優先順序高，即在for的每個子項中 都會查詢v-if
      <li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
複製程式碼

相關文章