vue的基本指令

Posted 2021-02-13 zhuxiang1633

基本指令

• 项目入口文件

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

• 组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

支持ES6语法：

<h1>{{ `${msg}` }}</h1>

• v-html，以HTML形式输出

<div v-html="msg"></div>

• v-text，以纯文本形式输出

<div v-text="msg"></div>

• v-bind: 绑定属性

<img v-bind:src="url" />

简写形式： <img :src="" />

• v-on:click 事件绑定

条件渲染

• v-if v-else-if v-else

<div v-if="ok">aaa</div>
<div v-else>bbb</div>

• 在template上使用条件渲染

<template v-if="ok">aaa</template>
<template v-else>bbb</template>

• v-show ：``display:none

列表渲染

• v-for

<ul>
    <li v-for="user in users">
        {{user.username}} | {{user.age}}
    </li>
</ul>
<ul>
    <li v-for="(item,index) in users" :key="index">
        {{item.username}}
    </li>
</ul>

事件监听

• v-on:click

<button v-on:click="handlerAddUser">添加用户</button>
<button @click="handlerAddUser">添加用户</button>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    handlerAddUser() {
      alert(this.msg)
    }
  }
}
</script>

• 参数传递

<button @click="handlerAddUser(msg, $event)">添加用户</button>

事件修饰符

• .stop 阻止事件冒泡

• .prevent 阻止默认时间

• .once 一次

• .submit 提交事件

• .keyup.enter 回车事件

• .keydown.enter 回车事件

变异方法

这些变异方法会引起视图的变化：

• push({})
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

计算属性

<h1>{{ msgReverse }}</h1>
<script>
computed: {
    msgReverse(){
        return this.msg.split('').reverse().join('')
    }
}
</script>

计算属性和方法的优势：计算属性存在缓存