模板template三种写法

完整版，写在HTML里

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

完整版，写在选项里

  1. <div id="app">
  2. </div>
  1. new Vue({
  2.     data:{n:0},
  3.     template:`    
  4.         <div>
  5.             {{n}}
  6.       <button @click="add">+1</button>
  7.         </div>
  8.     `,
  9.     methods:{
  10.         add(){
  11.             this.n += 1
  12.         }
  13.     }
  14. }).$mount('#app')

注意 ： div#app 会被 tempalte 里的东西代替。

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

src/xxx.vue

  1. <template>
  2.     <div>
  3.       {{n}}
  4.     <button @click="add">
  5.           +1
  6.       </button>
  7.   <div>
  8. </template>
  9. <script>
  10.     export default {
  11.       data(){
  12.         return {n:0},
  13.     },
  14.     methods:{
  15.         add(){
  16.           this.n +=1
  17.       }
  18.     }
  19.   }
  20. </script>
  21. <style>
  22.     这里写css
  23. </style>

src/main.js

  1. import Xxx from './xxx.vue'
  2. //Xxx是一个options对象
  3. new Vue({
  4.     render: h => h(Xxx)
  5. }).$mount('#app')

在template展示内容

  • {{object.a}} 表达式
  • {{n + 1}} 可以写任何运算
  • {{fn(n)}} 可以调用函数
  • 如果值为undefined 或 null 就不显示
  • 写法为 <div v-text="表达式"></div> ，例子如下

假设 data.x 的值为 <strong>hi</strong> ,就<div v-html="x">

指令

指令，是带有 v- 前缀的特殊attribute。值预期是单个JavaScript表达式。当表达式的值改变时，响应式地作用于DOM。

语法：v-指令名:参数=值 ，如： v-on:click=add

  • 如果值没有特殊字符，可以不加引号。
  • 有些指令没有参数和值，如 v-pre
  • 有些指令没有值，如： v-on:click.prevent

v-pre

如果我想在页面中展示 {{n}} ,则

  1. <div v-pre>
  2.   {{n}}
  3. </div>

作用和 <pre> 差不多。

v-bind: 绑定属性

基本用途是动态更新 HTML 元素上的属性，比如 id 、 class 等

  • 可以绑定 src ： ```vue Vue 的模板语法 - 图1

Vue 的模板语法 - 图2

  2. - 可以绑定对象：
  3. ```vue
  4. <div :style="{border: '1px solid red', height: 100}">
  5.     注意这里可以把‘100px’写成 100
  6. </div>

v-on: 绑定事件

  1. <button v-on:click="add">点击运行add()</button>
  2. <button v-on:click="xxx(1)">点击运行xxx(1)</button>
  3. <button v-on:click="n+=1">点击运行n+=1</button>
  4. <!-- 可以简写 -->
  5. <button @click="n+=1">点击运行n+=1</button>

条件判断

  • if…else

    1. <div v-if="x > 0">
    2.   x大于0
    3. </div>
    4. <div v-else-if="x === 0">
    5.   x为0
    6. </div>
    7. <div v-else>
    8.   x小于0
    9. </div>

  • 循环

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

    v-show 显示与隐藏

    1. <h1 v-show="n%2 === 0">显示还是隐藏</h1>
    2. <!-- 近似 -->
    3. <div :style="{display:n%2 === 0?'block':'none'}">
    4.   显示还是隐藏
    5. </div>

修饰符

上面的v-on:click.prevent 的 .prevent 是修饰符。
修饰符是用来修饰一个指令的，如常用的：

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

v-on支持的修饰符有：

  • {keycond | keyAlias}
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
  • .native
  • 快捷键相关
    • .ctrl
    • .alt
    • .shift
    • .meta
    • .exact
  • 鼠标相关
    • .left
    • .right
    • .middle

v-bind支持的修饰符有：

  • .prop
  • .camel
  • .sync

v-model支持的有：

  • .lazy
  • .number
  • .trim