模板template三种写法

Vue完整版，写在HTML里

<div id="xxx">
  {{n}}
  <button @click="add">+1</button>
</div>
----------------------------------
new Vue({
  el: "#xxx",
  data: { n: 0 },
  methods: { add() {} },
});

Vue完整版，写在选项里

new Vue({
  template: `
  <div>
    {{n}}
    <button @click="add">+1</button>
  </div>`,
  el: "#app",  //注意一个细节，div#app会被替代
  data: { n: 0 },   //data 可以改成函数
  methods: {
    add() {
      this.n += 1;
    },
  },
});

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 scoped>
   这里写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}">  //注意这里可以把'100px'写成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">n+1</button>
点击之后，Vue会运行n+=1

即发现函数就加括号调用，否则就直接运行代码
这导致一个问题，如果xxx(1)返回一个函数咋办
答：先把xxx赋值给一个a,再click="a()"就可以了

缩写 <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}}
</li>
</ul>

隐藏、显示

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

指令 Directive

什么是指令

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

语法

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

修饰符

有些指令支持修饰符

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

.sync修饰符

子组件要更改父组件的数据怎么办
答：子组件通过触发事件更改
Vue规则：组件不能修改props外部数据
Vue规则：$emit可以触发事件，并传参
Vue规则：$event 可以获取$emit的参数

由于这种场景很常见 所以尤雨溪发明了.sync，
:money.sync="total"等价于 :money="total" v-on:updata:money="total=$event"

Vue模板