② vue 基礎語法

阿新 • • 發佈：2022-03-16

vue基礎語法

1 應用和元件的基礎概念

// createApp 建立一個 vue 應用
// 引數：這個應用最外層的元件應該如何展示
// mvvm 設計模式 viewmodel 檢視資料連線層
const app = Vue.createApp({
  data() {
    return {
      message: 'hello world'
    }
  },
  
  template: `
    <div>{{message}}</div>
  `
})
// vm 代表vue應用的根元件
const vm = app.mount('#root')
vm.$data.message = 'bye'

2 生命週期函式

生命週期函式：在某一時刻會自動執行的函式

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

3 常用模板語法

3.1 插值表示式

{{}}

3.2 指令

v-html
v-on => @
v-bind => :
- 屬性名未知：動態引數

const app = Vue.createApp({
  data() {
    return {
      message: 'hello world',
      name: 'title',
      event: 'click'
    }
  },
  template: `
    <div 
      :[name]="message"
      @[event]="handleClick"
    ></div>
  `
})
const vm = app.mount('#root')

v-once：減少無用渲染
v-if
v-show

3.3 修飾符

.prevent

4 資料方法計算屬性監聽器

4.1 data

vm.$data.message = hello

4.2 methods

也可以在插值表示式中使用

const app = Vue.createApp({
  data() {
    return {
      message: 'hello world',
    }
  },
  methods: {
    handleClick() {
      console.log('click', this)
    },
    formatString(string) {
      return string.toUpperCase()
    }
  },
  template: `<div @click="handleClick">{{formatString(message)}}</div>`
})
const vm = app.mount('#root')

4.3 computed

宣告式地描述了一個值依賴於其它屬性

const app = Vue.createApp({
  data() {
    return {
      message: 'hello world',
      count: 1,
      price: 5,
    }
  },
  computed: {
    total() {
      return this.count * this.price
    },
    // computed內部具有快取機制，只有當它依賴的響應式屬性值發生改變時才會被重新計算
    timeNow() {
      return Date.now()
    },
    timeNow2() {
      return Date.now() + this.count
    }
  },
  methods: {
    // methods: 只要頁面重新渲染，才會重新計算
    getTime() {
      return Date.now()
    }
  },
  template: `
    <div>{{total}}</div>
    <div>{{timeNow}}</div>
    <div>{{timeNow2}}</div>
    <div>{{getTime()}}</div>
  `
})

4.4 watcher

computed 和 methods 都能實現的功能，建議使用 comoputed，因為有快取
computed 和 watcher 都能實現的功能，建議使用 comoputed，因為更加簡潔

5 樣式繫結語法

5.1 基礎用法

const app = Vue.createApp({
  data() {
    return {
      classString: 'red',
      classObject: { red: true, green: true },
      classArray: ['red', 'green', { brown: true }]
    }
  },
  template: `
    <div :class="classString">Hello World</div>
    <div :class="classObject">Hello World</div>
    <div :class="classArray">Hello World</div>
  `
})
const vm = app.mount('#root')

5.2 樣式傳遞【子元件最外層多標籤】

const app = Vue.createApp({
  data() {
    return {
      classString: 'red',
    }
  },
  template: `
    <div :class="classString">
      Hello World
      <demo class="green" />
    </div>
  `
})
app.component('demo', {
  template: `
    <div :class="$attrs.class">one</div>
    <div>two</div>
  `
})
const vm = app.mount('#root')

5.3 行內樣式

const app = Vue.createApp({
  data() {
    return {
      styleString: 'color: yellow',
      styleObject: {
        color: 'orange',
        background: 'yellow'
      }
    }
  },
  template: `
    <div :style="styleObject">
      Hello World
    </div>
  `
})
const vm = app.mount('#root')

6 條件渲染

v-if | v-else-if | v-else
v-show

7 列表渲染

v-for key

7.1 改變陣列內容

template: `<div>
  <div v-for="(item, index) in listArray" :key="item">
    {{item}} -- {{index}}
  </div>
  <button @click="handleAddClick">新增</button>
</div>`

使用陣列的變更函式 push pop shift unshift splice sort reverse
直接替換陣列
直接更新陣列的內容

7.2 改變物件內容

template: `<div>
  <div v-for="(value, key, index) in listObject">
    {{value}} -- {{key}} -- {{index}}
  </div>
  <button @click="handleAddClick">新增</button>
</div>`
handleAddClick() {
  this.listObject.age=100
  this.listObject.sex='man'
}

直接新增物件的內容，也可以自動的展示出來

7.3 v-for && v-if 同時出現

v-for 優先順序高於 v-if

8 事件繫結

8.1 事件物件 event $event

const app = Vue.createApp({
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    handleBtnClick(num, event) {
      console.log(event.target);
      this.counter += num
    }
  },

  template: `
    <div>
      {{counter}}
      <button @click="handleBtnClick(2, $event)">button</button> 
    </div>
  `
})
const vm = app.mount('#root')

8.2 呼叫多個事件 +()

const app = Vue.createApp({
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    handleBtnClick() {
      alert(0)
    },
    handleBtnClick1() {
      alert(1)
    }
  },

  template: `
    <div>
      {{counter}}
      <button @click="handleBtnClick(), handleBtnClick1()">button</button> 
    </div>
  `
})
const vm = app.mount('#root')

8.3 事件修飾符

@click

.stop
.self
.prevent
.capture
.once
@scroll.passive

8.4 按鍵修飾符 @keydown

.enter
.tab
.delete
.esc
.up
.down
.left
.right

8.5 滑鼠修飾符

.left
.right
.middle

8.6 精緻修飾符

.exact

<input @click.ctrl.exact="handleKeydown" />

9 表單中雙向繫結指令的使用

v-model

9.1 input

9.2 textarea

9.3 checkbox

const app = Vue.createApp({
  data() {
    return {
      message: []
    }
  },
  template: `
    <div>
      {{message}}
      jack <input type="checkbox" v-model="message" value="jack" />
      dell <input type="checkbox" v-model="message" value="dell" />
      lee <input type="checkbox" v-model="message" value="lee" />
    </div>
  `
})
const vm = app.mount('#root')

true-value false-value

const app = Vue.createApp({
  data() {
    return {
      message: 'hello'
    }
  },
  template: `
    <div>
      {{message}}
      <input type="checkbox" v-model="message" true-value="hello" false-value="world" />
    </div>
  `
})
const vm = app.mount('#root')

9.4 radio

const app = Vue.createApp({
  data() {
    return {
      message: ''
    }
  },
  template: `
    <div>
      {{message}}
      jack <input type="radio" v-model="message" value="jack" />
      dell <input type="radio" v-model="message" value="dell" />
      lee <input type="radio" v-model="message" value="lee" />
    </div>
  `
})
const vm = app.mount('#root')