1、Vue 模板

1. Vue 完整版，写在 HTML 中

<div id = "xxx">
    {{n}}
    <button @click="add">+</button>
</div>

new Vue({
    el:'#xxx',
    data:{
        n:0,
    },
    methods:{
        add(){}
    }    
})

2. Vue 完整版，写在选项里

<div id="xxx"></div>

new Vue({
    template:`
        <div>
            {{n}}
            <button @click="add">+</button>
        </div>
    `,
    data:{n:0},
    methods:{add(){this.n += 1}},
}).$mount('#xxx')
//注意：HTML 中的 <div id="xxx"> 会被替换为 template 中的 div

3. 非完整版 Vue，配合使用 demo.vue 文件

demo.vue

<template>
    <div>
        {{n}}
        <button @click="add">+</button>
    </div>
</template>

<script>
    export default{
        data(){ return {n:0} } //data 必须为函数
        methods:{
            add(){this.n += 1}
        }
    }
</script>

<style></style>

main.js

import Demo from './demo.vue'
//Demo 是一个 options 对象
new Vue({
    render:()=>render(Demo)
}).$mount('#app')

2、模板里有哪些语法 - HTML 模板就是 template

1. 展示内容

表达式
- {{ object.a }} 表达式
- {{ n + 1}} 可以写任何运算
- {{ fn(n) }} 可以调用 methods 中的函数
- 如果值为 undefined 或者 null 就不显示
- 另一种写法：
HTML 内容
- 假设 data.x 的值为 hi
- 即可显示粗体的 hi
我就想展示{{ n }}
- {{ n }}
- v-pre 不会对模板进行编译

2. 绑定属性

绑定 src
- <img v-bind:src="x" />
v-bind: 可简写为 :
- <img :src="x" />
绑定对象

<div :style = "{border:'1px solid red',height:100}">
</div>
//这里可以把 100px 写成 100

3. 绑定事件

v-on:事件名

<button v-on:click="add">+</button>
//点击之后，Vue 会运行 add()

<button v-on:click="xxx(1)">xxx</button>
//点击之后，Vue 会运行 xxx(1)

<button v-on:click="n+=1">xxx</button>
//点击之后，Vue 会运行 n += 1

也就是说，发现函数就自动加括号调用之，否则就直接运行代码
缩写：<button @click="add">+</button>

4. 调节判断

if...else

<div v-if="x>0">
    x > 0
</div>
<div v-else-if="x===0">
    x = 0
</div>
<div v-else>
    x < 0
</div>

5. 循环

for(value,key) in 对象或数组

<ul>
    <li v-for="(u,index) in users" :key="index">
        索引：{{index}} 值：{{u.name}}
    </li>
</ul>

<ul>
    <li v-for="(value,name) in obj" :key="name">
        属性名：{{name}}，属性值：{{value}}
    </li>
</ul>

注意：v-for 后方一定要加上：key
key 的值要有唯一性

6. 显示、隐藏

v-show
- <div v-show="n%2 ===0">n 是偶数</div>
- 表示，如果 n 为奇数，这个 div 就是不可见的
近似等于
- div :style="{display:n%2 ===0}？'block':'none'"> n 是偶数</div>
- 但是要注意，看得见的元素 display 不只有 block
- 如：table 的 display 为 table
- li 的 display 为 list-item

3、Vue 模板主要特点：

使用 XML 语法（不是 HTML）
- <div></div> = <div />
- 只能使用 <input />，<input> 是错误的
使用 {{ }} 插入表达式
使用 v-html，v-on，v-bind 等指令操作 DOM
使用 v-if 、v-for 等指令实现条件判断和循环

4、指令 Directive（命令、指示）

1. 指令

什么是指令
以 v- 开头的东西就是指令
语法
- v-指令名：参数=值，如 v-on:click = add
- 如果值里没有特殊字符，可以不加引号
- 有些指令没有参数和值，如 v-pre
- 有些指令没有值，如 v-on:click.prevent 阻止默认事件

2. 修饰符

有些指令支持修饰符
- @click.stop = "add" 表示阻止事件传播/冒泡
- @click.prevent="add" 表示阻止默认动作
- @click.stop.prevent="add" 表示上面二者都有
有哪些比较重要的修饰符：
- v-on 支持的：
  - .stop
  - .prevent
- v-bind 支持的：
  - .sync
- v-model 支持的有：
  - .lazy
  - .number
  - .trim

5、关于 .sync 修饰符

Vue 规则1：组件不能修改 props 外部数据
Vue 规则2：$emit 可以触发事件，并传参
Vue 规则3：$event 可以获取 $emit 的参数
示例：

// 儿子组件，从爸爸组件那里请求钱，然后消费
<template>
  <div class="child">
    {{money}}
    // 点击按钮，触发事件
    <button @click="$emit('update:money', money - 100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

// 爸爸组件，传钱给儿子，并监听儿子动态
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total"/>
    // 等价于<Child :money="total" v-on:update:money="total = $event"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

关键点：

<button @click="$emit('update:money', money - 100)">花钱</button>

<Child :money.sync="total"/>
// 父组件等价于<Child :money="total" v-on:update:money="total = $event"/>

其中 $event 获取的 $emit 参数就是 money - 100
总结：.sync 修饰符就是一种语法糖，帮助简化这种在父子组建之间相互通过 prps相互通信的情况。子组件通过 $emit('update:title',newTitle) 把数据 newTitle 传给父组件，父组件使用 :title="total"`v-on:update:title="total = $event" 对其进行监听，$event就是用于获取参数 newTitle 的，而 .sync 可以对其进行简化，简化为:title.sync="total"

6、其他修饰符

@click.stop="xxx"
- 阻止事件冒泡、传播

template:`
    <div v-on:click="dodo">
        <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
    </div>
`,
methods:{
    dodo: function () {
        alert("dodo");
    }, 
    doThis: function () {
        alert("noclick");
    },
}
//如果没有 .stop 最后运行结果为：依次弹出 “noclick” 和 "dodo" 
//加上 .stop 后，运行结果为："noclick"

@click.prevent="xxx"
- 取消该元素的默认事件，并执行 xxx 方法

template: `
    <a @click.prevent="xxx" href="http://www.baidu.com">baidu</a>
`,
methods:{
    xxx(){
      console.log('阻止了默认事件')
    }    
}
//每次点击这个 a 标签，都不会跳转到 baidu，并且会执行 xxx 方法，输出“阻止了默认事件”

@keypress.enter="xxx"
- 每次键盘敲击 enter 回车键，都会执行 xxx 方法

template:`
    <input @keypress.enter="xxx">
`,
methods: {
    xxx(){
        console.log('回车')
    }
}
//每次在 input 输入框中输入回车，都会在控制台输出 “回车”

Vue 模板、指令与修饰符

1、Vue 模板

2、模板里有哪些语法 - HTML 模板就是 template

3、Vue 模板主要特点：

4、指令 Directive（命令、指示）

5、关于 .sync 修饰符

6、其他修饰符