vue 入门：简单指令介绍

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

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

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

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

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

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

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

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

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

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

<!-- 阻止单击事件继续传播 --><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>

<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 等 请参考文档

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