② vue 基础语法

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>`

1. 使用数组的变更函数 push pop shift unshift splice sort reverse

2. 直接替换数组

3. 直接更新数组的内容

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'
}

1. 直接添加对象的内容，也可以自动的展示出来

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')

9.5 修饰符

• .lazy

• .number

• .trim