vue入門：簡單指令介紹

這是我參與 8 月更文挑戰的第 11 天，活動詳情查看： 8月更文挑戰css

1.爲何使用vue

業務愈來愈複雜，更多操做在前段進行。
漸進式
不須要操做dom
雙向綁定
環境構建方便
組件開發
社區活躍

2.vue入口

main.js爲主入口html

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App }, //指定進入app.vue
  template: '<App/>'
})
複製代碼

3.基本指令

1.{{}}與v-html

用於打印與輸出。vue

<template>
<div>
<!-- 表達式 -->
<p>{{1+1>1 ? '是':'否'}}</p>
{{msg}}
<div v-html = "msg"></div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',

data () {
  return {
    msg:'<h1>我是消息</h1>'
}
}
}
</script>
複製代碼

2.v-bind

v-bind就是用於綁定數據和元素屬性的。web

<template>
<div v-bind:class = "active" v-bind:id=id>
{{msg}}  
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    msg:'<h1>我是消息</h1>',
    active:"active",
    id:19
}
}
}
</script>
複製代碼

3.class與style

class的綁定方式。數組

<template>
<div>
<p v-bind:class="{ active: isActive }" v-bind:id=id>aaa</p>
<p v-bind:class="{ active: 10>1?true:false,test:true }" >bbb</p>
<p v-bind:class='[msg]' >ccc</p>
<p v-bind:class="[{active :0 > 1},'test']" >ddd</p>
<ul>
<li v-bind:class ="[{active :index/2==0},'test']" v-for = "(item,index) in names">
{{item.name}}
</li>
</ul>
<p v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }">eee</p>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    msg:'<h1>我是消息</h1>',
    isActive:false,
    names:[{
      name:"aaa"
    },{
      name:"bbb"
    },{
      name:"ccc"
    }],
    activeColor: 'red',
    fontSize: 30
}
}
}
</script>
複製代碼

4.觀察指令method和computed

method和computed區別：緩存

咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。然而，不一樣的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會從新求值。這就意味着只要 msg尚未發生改變，屢次訪問 showMessage計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。markdown

函數執行須要數據屬性裏面的 message 值做爲參數。app

● 若是使用 methods 執行函數，vue 每次都要從新執行一次函數，無論msg的值是否有變化；dom

● 若是使用computed 執行函數，只有當msg這個最初的數據發生變化時，函數纔會被執行。（依賴-監測數據變化）函數

<template>
<div id="example">
  {{ msg.split('').reverse().join('') }}
  {{ showMessage}}
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    msg:'我是消息'
}
},
computed: {
  showMessage(){
    return this.msg.split('').reverse().join('')
  }
}
}
</script>
複製代碼

5.條件渲染

v-if,v-else顧名思義，判斷是否能夠顯示。

<template>
<div >
<p v-if="sign">1111</p>
<p v-else>2222</p>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    active:"active",
    id:19
}
}
}
</script>
複製代碼

v-if：每次都會從新刪除或建立元素，具備較高的切換性能消耗；
v-show：每次切換元素的 display：none 樣式，具備較高的初始渲染消耗。
v-show只編譯一次，後面其實就是控制css，而v-if不停的銷燬和建立，故v-show性能更好一點。

<template>
<div >
<p v-show="sign">1111</p>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    active:"active",
    id:19
}
}
}
</script>
複製代碼

6.列表輸出

v-for用於循環列表。

<template>
<div >
<ul>
<li v-bind:key ="index" v-for = "(item,key,index) in names">
{{item.age}}-{{item.name}}-{{index}}||{{item}}||{{key}}
</li>
</ul>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    names:[{
      name:"aaa",
      age:19,
      sex:"1"
    },{
      name:"bbb",
      age:20,
      sex:"1"
    },{
      name:"ccc",
      age:21,
      sex:"1"
    }]
}
}
}
</script>
複製代碼

7.數組更新

注意：filter()、concat() 和 slice()不發生更新。

<template>
<div >
<ul>
<li v-bind:key ="index" v-for = "item in names">
{{item.name}}
</li>
</ul>
<button v-on:click = "clickbutton" name = "button" type = "button">按鈕</button>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    sign:true,
    msg:'<h1>我是消息</h1>',
    names:[{
      name:"aaa"
    },{
      name:"bbb"
    },{
      name:"ccc"
    }]
}
},
methods: {
  clickbutton(event){
        this.names.push({name:"ddd"})
  }
},
}
</script>
複製代碼

8.事件處理

v-on：當執行xx動做時執行xx函數。

<template>
<div>
<button v-on:click = "count +=1" type = "button" name = "button">按鈕</button>
<p>{{count}}</p>
<button v-on:click = "clickhandle" type = "button" name = "button">按鈕2</button>
<p>{{demoshow}}</p>
<button v-on:click = "chance" type = "button" name = "button">按鈕3</button>
<button v-on:click.once = "senddate('你好',$event)" type = "button" name = "button">按鈕4</button>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    count:1,
    demoshow:"帥小夥"
}
},
methods: {
  clickhandle(event){
    console.log("觸發")
  },
  chance(event){
    this.demoshow = "我不是帥小夥"
  },
  senddate(data,event){
    console.log(data,event)
  }
}
}
</script>
複製代碼

9.事件修飾

<!-- 阻止單擊事件繼續傳播 -->
<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>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
複製代碼

10.鍵盤事件

<template>
<div>
<input  v-on:keyup.enter = "showlog" name = "button">輸入框</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    count:1
}
},
methods: {
  showlog(event){
     console.log(event)
  }
}
}
</script>
複製代碼

其他鍵盤操做介紹：

.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta 
等 請參考文檔
複製代碼

11.表單輸入

雙向數據綁定指令lazy，number，trim。

<template>
<div>
<input v-model.lazy="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<button v-on:click = "getMsg" type = "button" name = "button">按鈕</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
    message:"這是一個消息"
}
},
methods: {
  getMsg(event){
     console.log(this.message)
  }
}
}
</script>
複製代碼

.lazy
在默認狀況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你能夠添加 lazy 修飾符，從而轉變爲使用 change 事件進行同步：
<!-- 在「change」時而非「input」時更新 -->
<input v-model.lazy="msg" >

.number
若是想自動將用戶的輸入值轉爲數值類型，能夠給 v-model 添加 number 修飾符：
<input v-model.number="age" type="number">
這一般頗有用，由於即便在 type="number" 時，HTML 輸入元素的值也總會返回字符串。若是這個值沒法被 parseFloat() 解析，則會返回原始的值。


.trim
若是要自動過濾用戶輸入的首尾空白字符，能夠給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
複製代碼