Vue 模板、指令与修饰符

模板 template 的三种写法

一、Vue 完整版，写在 HTML 里

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

    new Vue({
        el: '#xxx',
        data:{n:0},   // data 可以改成函数
        methods:{data(){}}
    })

二、Vue 完整版，写在选项里

    <div id=app>
    </div>
    
    new Vue({
        template:`
            <div>
                {{n}}
                <button @click="add">+1</button>
            </div>
        `,
        data: {n:0},   // data 可以改成函数
        methods:{add(){ this.n += 1 }}
    }).$mount('#app')   // div#app 会被替代

三、Vue 非完整版，配合 xxx.vue 文件

    <template>                             
        <div>                              
            {{n}}                              
            <button @click="add">              
                +1                             
            </button>                     
        </div>                            
    </template>
    
    <script>
        export default{
            data(){ return {n:0} }
            //  data 必须为函数
            methods: {add(){ this.n += 1 }}
        }
     </script>
     
      <style>这里写 CSS </style>
      
      
    // 在另一个地方写如下代码
    import Xxx from './xxx.vue'
    // Xxx 是一个 options 对象
    new Vue({
        render: h => h(Xxx)
    }).$mount('#app')

展示内容

表达式

• {{ object.a }} 表达式
• {{ n + 1 }} 可以写任何运算
• {{ fn(n) }} 可以调用函数
• 如果值为 undefined 或 null 就不显示
• 另一种写法为 <div v-text="表达式"</div>

HTML 内容

• 假设 data.x 值为 <strong>hi</strong>
• <div v-html="x"></div> 即可显示粗体的 hi

就是展示 {{n}}

• <div v-pre>{{ n }}</div>
• v-pre 不会对模板进行编译

绑定属性

绑定 src

• <img v-bind:src="x" />

v-bind: 简写为:

• <img :src="x" />

绑定对象

• <div :style="{border: '1px solid red', height:100}"></div>

绑定事件

v-on: 事件名

• <button v-on:click="add">+1</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">+1</button>

条件判断

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>

循环

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>

• :key="index" 有 bug

显示、隐藏

v-show

• <div v-show="n%2===0"> n 是偶数 </div>

近似等于

• <div :style="{display:n%2===0?'block':'none'}"> n 是偶数 </div>
• 但是要注意，看得见的元素 display 不只有block
• 如 table 的 display 为 table
• 如 li 的 display 为 list-item

Vue 模板的主要特点

• 使用 XML 语法（不是 HTML）
• 使用 {{}} 插入表达式
• 使用 v-html v-on v-bind 等指令操作 DOM
• 使用 v-if v-for 等指令实现条件判断和循环

指令 Directive

什么是指令

<div v-text="x"></div>
<div v-html="x"></div>

• 以 v- 开头的东西就是指令

语法

• v-指令名:参数=值，如 v-on:click=add
• 如果值里没有特殊字符，则可以不加引号
• 有些指令没有参数和值，如 v-pre
• 有些指令没有值，如 v-on:click.prevent

修饰符

有些指令支持修饰符

• @click.stop="add"表阻止事件传播/冒泡
• @click.prevent="add"表示阻止默认动作
• @click.stop.prevent="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
• v-model 支持的有：.lazy .number .trim

.sync 修饰符

场景描述

• 爸爸给儿子钱，儿子要花钱
• 儿子打电话（触发事件）向爸爸要钱

Vue 规则

• 组件不能修改 props 外部数据
• $emit 可以触发事件，并传参
• $event 可以获取$emit 的参数

上述场景经常用到

• 就有了 .sync
• :money.sync="total" 等价于 :money="total" v-on:update:money="total=$event"

重要的四个修饰符

@click.stop="xxx"

@click.prevent="xxx"

@keypress.enter="xxx"

:money.sync="total"