Vue模版

模版template三种写法

一、Vue完整版，写在HTML里

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

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

二、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文件

在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>

在另一个main.js文件里

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 text内容
• 展示{{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>这里可以把'100px'写成100（默认）

绑定事件

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="idnex">
    索引：{{index}} 值：{{value}}
  </li>
</ul>

<ul>
  <li v-for="(value,name) in obj" :key="name">
    属性名:{{name}},属性值:{{name}}
  </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>

修饰符

@click.stop="add" 表示阻止事件传播/冒泡同时执行add @click.prevent="add" 表示阻止默认动作 @click.stop.prevent="add" 同时阻止传播和默认动作 @keypress.enter="xxx"

.sync修饰符

场景描述

• 爸爸给儿子钱，儿子要花钱怎么办
• 答：儿子打电话（触发事件）向爸爸要钱
• 组件不能修改props外部数据
• this.$emit可以触发事件，并传参
• $event可以获取$emit的参数

//App.vue

<template>
    <div class="app">
      App.vue 我现在有{{total}}
      <Child :money.sync="total">
    </ div>
</template>

<script>
import Child from "./Child.vue"
//传给main.js
export default {
  data(){
    return {total:10000}
  },
  components:{
    Child:Child
  }
}
</script>

<style>
.app{
  border:3px solid red;
  padding:10px;
}
</style>

//Child.Vue

<template>
  <div class="child">
    {{money}}
    <buttton @click="$emit('updata:money',money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
  export default {
    props:["money"]
  }
</script>

<style>
  .child{
    border:3px solid green;
  }
</style>

//main.js  非完整版

import Vue from "vue"
import App from "./App.vue"

new Vue({
  render:h=>h(App)
}).$mount("#app")

用.sync代替

:money.sync="total"
等价于
:money="total" v-on:updata:money="total=$event"