Vue的模板、指令与修饰符

Vue的模板

模板template三种写法

Vue完整版，写在HTML里

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

import Vue from "vue";
Vue.config.productionTip = false;
new Vue({
  data() {
    return {
      n: 0
    };
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
}).$mount("#app");

Vue完整版，写在选项中

//html
<div id="app">
</div>
//js
//注意一个细节，div#app会被替代
new Vue({
  template: `
    <div>
    {{n}}
    <button @click="add">+1</button>
    </div>
  `,
  data() {
    return {
      n: 0
    };
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
}).$mount("#app");

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

//Demo.vue
<template>
    <div class="red">
        这里是Demo的内部{{msg}}
        <button @click="fn">call fn</button>
    </div>
</template>

<script>
export default {
    props:['msg','fn']
}
</script>
<style scoped>
.red{
    color: red;
    border: 1px solid blue;
}
</style>

//main.js
const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from './Demo.vue'
new Vue({
    components:{Demo},
    data(){
        return {
            visible:true,
            n:0
        }
    },
    template:`
    <div>
        {{n}}
        <Demo :msg="n" :fn=" add "/>
    </div>
    `,
    methods:{
        add(){
            this.n += 1;
        },
        toggle(){
            this.visible = !this.visible
        }
    }
}).$mount("#xiaobangsky");

模板总结

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

Vue的指令（Directive）

指令

• 以v-开头的就是指令

<div v-on:"click=add"></div>

• 语法

//v-指令名，如v-on:"click=add"
//如果值里面没有特殊修饰符，可不加引号
//有些指令没有参数值，如 v-pre
//有些指令没有值，如v-on:click.prevent

Vue的修饰符

官方文档：Vue修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从2.3.0 起我们重新引入了.sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器

代码示例

//html
<div id="app">
  <div>{{bar}}</div>
  <my-comp :foo.sync="bar"></my-comp>
  <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> --></div>
//js
Vue.component("my-comp", {
  template: '<div @click="increment">点我+1</div>',
  data: function () {
    return { copyFoo: this.foo };
  },
  props: ["foo"],
  methods: {
    increment: function () {
      this.$emit("update:foo", ++this.copyFoo);
    }
  }
});
new Vue({
  el: "#app",
  data: { bar: 0 }
});

有些指令支持修饰符

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

修饰符列表