模板

模板template三种写法

一、Vue完整版，写在HTML里

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

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

注意：这里是XML，需要在后面写上/,例如<input name="username"/>。

模板里有哪些语法

我们把HTML模板叫做template

展示内容

表达式

{{ 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-pro>{{ 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:事件名

条件判断

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 对象或数组

注意：写v-for是必须后面写上:key

显示、隐藏

v-show

总结

vue模板主要的特点有

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

指令

什么是指令

<div v-text="x"></div> <div v-html="x"></div>
以v-开头的就是指令

语法

v-指令名：参数=值，如 v-on:click=add
如果值里面没有特殊字符，则可以不加引号
有些指令没有参数和值，如v-pre
有些指令没有值，如v-on:click.prevent(阻止默认事件)

修饰符

注意：.stop、.prevent、.sync

.sync修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。

但是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

<text-document 
   v-bind:title="doc.title" 
   v-on:update:title="doc.title = $event" 
></text-document>

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

<text-document v-bind:title.sync="doc.title"></text-document>

.sync 修饰符，但是这次它只是作为一个编译时的语法糖存在,它会被扩展为一个自动更新父组件属性的 v-on 监听器。所以在这里我们说this.$emit('update:title', newTitle)是一个语法糖，是父组件监听子组件更新某个props的请求的缩写语法。

示例一：爸爸给儿子钱，儿子要花钱怎么办？答：儿子打电话（触发事件）向爸爸要钱

App.Vue

<template>
   <div class="app">
      App.vue 我现在有 {{total}}
      <hr>
      <!--首先，爸爸给儿子money-->
      <Child :money="total" v-on:update:money="total = $event"/>
      <!--等价于<Child :money.sync="total" />-->
      <!--当爸爸发现儿子有这个事件之后就会把儿子传过来的参数处理在钱上-->
   </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
    //告诉他家里的钱就10000块钱
  },
  components: { Child: Child }
  //声明组件里面的child对应的是child的对象
};
</script>
<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

Child.Vue

<template>
   <div class="child">
      {{money}}
   <!--儿子看见money多少钱，儿子想花钱的时候不能直接花钱，当想花钱的时候会触发一个警告-->
      <button @click="$emit('update:money', money-100)">
         <span>花钱</span>
      </button>
   </div>
</template>
<script>
export default {
  props: ["money"]
  //接受外部的数据，这个数据名字叫money
};
</script>
<style>
.child {
  border: 3px solid green;
}
</style>

总结：

VUe规则：组件不能修改props外部数据
Vue规则：this.$emit可以触发事件，并传参
Vue规则：$event可以获取$emit的参数

示例二：

代码：

<comp :foo.sync="bar"></comp>

会被扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

通过一个实例（弹窗的关闭事件）来说明这个代码到底是怎么运用的。

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
      template: `<div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props:['show'],
      methods: {
        closeDiv() {
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
      }
})
export default{
    data(){
        return{
            valueChild:true,
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
</script>

动态效果如下：

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。

Vue模板、指令与修饰符

模板