模板template的三种写法

Vue完整版，完全写在html中 html文件，根节点id=app

<div id="app">{{n}}</div>

在js文件中加载这个视图

new Vue({
  el: "#app",
  data: {n:0},
});

Vue完整版，写在选项中首先，html文件中要有个div，用于被选项中的模板替换；

<div id="app"></div>

在js文件中创建实例的时候，传入模板，并替换掉html中的div

new Vue({
  data: {n:0},
  template:`
    <div>{{n}}</div>
  `,
}).$mount("#app");

Vue非完整版，配合demo.vue文件首先在demo.vue文件中写上模板、数据、和方法

<template>
<div>{{n}}</div>
</template>
<script>
export default {
  name: "DemoTemp",
  data(){
    return {n: 0};
  }
}
</script>
<style scoped>
</style>

然后再js文件中引用

import DemoTemp from "./demo"
new Vue({
  render: h => h(DemoTemp),
}).$mount("#app");

注意，demo.vue文件template中用的是xml语法，必须用闭合标签（<div></div>）或者自闭合标签(<div/>)；

template中xml的语法，常见指令

表达式 {{obj.a}}
v-html，把内容作为html显示 <div v-html="content"></div>，其中content是一个变量，等于<div>内容</div>这种
v-pre，不计算双括号内容，就是要显示双括号，<div v-pre>{{n}}</div>，这是没有参数和值的指令；
v-bind，设置标签的属性 <img v-bind:src="src"/>，简写<img :src="src"/>，属性值也可以是对象，比如<div :style="{border: '1px solid red', height: 100}"></div>
v-on，绑定事件，

<button v-on:click="add"></button>
<button @click="add"></button>
<button @click="add(1,2)"></button>
<button @click="a += 1"></button

v-if，条件判断 <div v-if="n>0" >{{n}}</div>
v-for，循环，v-for后面必须接一个key，而且这个key是唯一的

<ul>
  <li v-for="(u,index) in displayUsers" :key="index">{{ u.name }} {{ u.gender }}</li>
</ul>

或者

<ul>
  <li v-for="(v,name) in obj" :key="name">{{v}}</li>
</ul>

v-show，显示与隐藏，<div v-show="n===0"></div>

template中xml的语法，常见指令修饰符

v-开头的就是指令，比如，v-on:click,v-bind:src,v-model,v-if,v-for,指令后面可以接修饰符，比如，

    @click.stop = 'add' // 阻止事件传播/冒泡，并执行add函数
    @click.prevent // 阻止默认动作
    @click.prevent = 'add' // 阻止默认动作，并执行add函数
    @click.stop.prevent = 'add'
    @keypress.enter = 'add'

指令后面可以接修饰符，常见的修饰符有，

v-on支持的有，.{keyCode|keyAlias}，和.stop.prevent.capture.self.once.passive.native，还有与快捷键操作相关的.ctrl.alt.shift.meta.exact，与鼠标操作相关的有.left.right.middle；
v-bind支持的有，.prop.camel.sync，其中.sync最重要
v-model支持的有，.lazy.number.trim
下面是keyCode修饰符的例子，注意@keypress.13和@keypress.enter：

import Vue from "vue/dist/vue"
Vue.config.productionTip = false;
new Vue({
  template: `
    <div>
    <input v-on:input="onUserInput"/>
    <hr>
    <input @keypress="onKeypress"/>
    <hr>
    <input @keypress.13="onKeypress13"/>
    <hr>
    <input @keypress.enter = "onKeypress13">
    </div>
  `,
  methods: {
    onUserInput(e) {
      console.log("onUserInput", e.target.value);
    },
    onKeypress(e) {
      console.log("onKeypress", e.keyCode); // keypress
    },
    onKeypress13() {
      console.log("onKeypress13: 用户按下回车键", ); // keypress
    }
  }
}).$mount("#app");

sync修饰符，用于组件之间通信，子组件通知父组件修改数据

1. 父子组件通过eventbus通信，传递任意对象

父组件的数据传给子组件，子组件如果想修改数据，怎么修改，子组件通过eventbus发送消息给父组件，让父组件修改；
eventbus在哪里？vue内置了eventbus，子组件可以直接使用,怎么用？

在子组件中，通过emit发送事件和参数，@click="$emit('moneyUpdate',(money-100))"
在调用子组件的父组件中，订阅消息，<Child v-on:moneyUpdate="onMoneyUpdate"/>，其中onMoneyUpdate时候处理消息的函数；
在处理消息的函数中取出参数，处理消息，

methods: {
  onMoneyUpdate(value) {
    this.total = value.new;
    console.log("onMoneyUpdate");
  }
}

2. 父子组件通过eventbus通信，更新数据

在子组件中，通过emit发送事件和参数，@click="$emit('moneyUpdate',(money-100))"，其中moneyUpdate是事件名，(money-100)是传递的事件参数；
在调用子组件的父组件中，订阅消息，
<Child :money="total" v-on:moneyUpdate="total = $event"/>，
其中moneyUpdate是时间名，$event是事件的参数；

3. sync修饰符

sync就是这种组件通信的语法糖：

moneyUpdate改成"update:money"这个字符串，如下
<Child :money="total" v-on:update:money="total = $event"/>
vue规定这种语句简写为：
<Child :money.sync="total"/>
此时，子组件这样写：
<button @click="$emit('update:money',(money-100))">花钱</button> {{money}}
可以实现money数据在父子组件之间同步；

总结：1）主组件将total的值通过money同步传递给子组件，子组件通过发送update:money事件更新total的值；2）:money.sync="total"这种形式，实际上子组件没有更新主组件传递的值（发送消息主组件更新），但是形式上，是子组件在更新；

5 Vue2 模板、指令与修饰符