模板

template 三种写法 (xml 标签)

一、Vue 完整版，写在 HTML 里

  1. <div id=xxx>
  2.   {{n}}
  3.     <button @="add">+1</button>
  4. </div>
  5. new Vue({
  6.   el: "#xxx",
  7.   data:{n:0},         //data 可以改成函数
  8.   methods:{add(){ this.n += 1 }}
  9. })

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

  1. <div id=xxx></div>
  2. new Vue({
  3.   data:{n:0},         //data 可以改成函数
  4.   template:` 
  5.         <div>
  6.             {{n}}
  7.             <button @="add">+1</button>
  8.         </div>`
  9.   methods:{add(){ this.n += 1 }}
  10. }).$mount("#xxx")

三、Vue 非完整版，写在 xxx.Vue 文件里

  1. <div id=xxx></div>
  2. //xxx.Vue
  3. <template>
  4.   <div>
  5.       {{n}}
  6.     <button @="add">+1</button>
  7.     </div>
  8. </template>
  9. <script>
  10.  export defaule {
  11.   data(){return {n:0}},         //data 必须函数，避免组件复用时 data 被覆盖
  12.   methods:{add(){ this.n += 1 }}
  13. }
  14. <style>写 CSS</style>
  15. //main.js
  16. import Xxx from './xxx.Vue'
  17. new Vue({
  18.   render:h=>h(Xxx)    
  19. }).$mount("#xxx")

指令

展示内容

表达式

  • {{ object.a } 表达式
  • {{ n+1 }} 可以写任何运算
  • {{ fn(n) }} 可以调用函数
  • 如果值为 undefined 或 null 就不显示

  • 另一种写法为 <div v-text="表达式"> </div>

    HTML内容

  • 如果 data.x 值为 <strong>hi</strong>

  • <div v-html="x"> </div> 即可显示粗体的 hi

    v-pre

  • <div v-pre>{{ n }} </div> 不会对模板进行编译

    绑定属性

    绑定 src

  • <img v-bind:src="x" />

  • 简写 <img :src="x" />

    绑定 css 样式

  • <div :style="{ border: '1px solid red'，heigh=100}"></div>

    绑定事件

  • <button v-on:事件名="add || add(1) || n += 1">+1</button>

  • 简写 <button @click="add">+1</button>

    表单输入绑定 v-model

    if…else

    1. <div v-if="X>0"> </div>   //x 大于 0
    2. <div v-else-if="X===0"> </div>  //X 为 0
    3. <div v-else> </div>    //X 小于 0

    for 循环

  • v-for="(value,key) in obj || array" :key="index" (使用 index 会有 bug,最好用 id)

    1. <ul>
    2. <1i v-for="(item, index)in users"  :key="index">    
    3. 索引：{{ index }}, 值：{{ item.name }}
    4.   </1i>
    5. </ul>
    6. <ul>
    7. <li v-for="(value, name)in obj" :key="name">
    8. 属性名：{{ name }}, 属性值：{{ value }}
    9. </1i>
    10. </ul>

    显示、隐藏

  • <div v-show=" n%2 === 0">n是偶数</div>

  • 近似等于 <div :style="{display: n%2 === 0 ? block : none">n是偶数</div>

    修饰符

    @click.stop="add" 表示阻止捕获、冒泡
    @click.prevent="add"表示阻止默认动作
    @click.stop.prevent="add"同时表示两种意思

  • v-on 支持的有： .{keycode | keyAlias} .stop .prevent .capture .self .once .passive .native

  • v-bind 支持的有：.prop .camel .sync
  • v-model 支持的有：.lazy .number .trim
  • 快捷鍵相关：.ctrl .alt .shift .meta .exact
  • 鼠标相关：.left .right .middle

    .sync 修饰符