Vue模板、指令与修饰符

模板template三种写法

一. Vue完整版，写在HTML中

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

new Vue({
        el: '#xxx',
        data: {n: 0},
        methods:{add(){this.n += 1}}
})

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

<div id=xxx></div>

new Vue({
        template: `
            <div>
                {{n}}
                <button @click="add">+1</button>
            </div>`,
            data: {n: 0},
            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必须为函数，如果不是函数就会出现一个data被多个组件共用。
    data(){return {n: 0}},
    methods:{add(){this.n += 1}}
}
</script>
<style>这里写 CSS</style>
</script>


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

注意：template中的代码不是HTML，而是XML。
区别：XML是自闭和标签

// HTML
<input name="username">
<div></div>
// XML
<input name="username" />
<div />

模板里有哪些语法

模板就是用来表示HTML的一段字符串

指令与修饰符

指令(Directive)同义词：命令、指示。

//表示阻止事件冒泡/传播
@click.stop="add"
//表示阻止默认动作click
@click.prevent="add"

.sync修饰符

“:” 是指令 “v-bind”的缩写
“@”是指令“v-on”的缩写；
“.”是修饰符。
重点4个修饰符

• @click.stop="xxx"
• @click.prevent="xxx"
• @keypress.enter="xxx"
• :money.sync="total"
  作用：当子组件需要改变外部数据props的值时，使用$emit向父组件发送更新，再由父组件接受更新响应事件修改数据。
  new Vue({})
  参考文章