码迷,mamicode.com
首页 > 其他好文 > 详细

vue的基本指令

时间:2019-03-17 19:58:26      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:top   users   method   回车   import   tip   ret   turn   添加   

基本指令

  • 项目入口文件
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>

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

vue的基本指令

标签:top   users   method   回车   import   tip   ret   turn   添加   

原文地址:https://www.cnblogs.com/zhuxiang1633/p/10548311.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!