Vue的模板、指令与修饰符

1. 模板 template 的三种写法

  1. 使用Vue完整版，写在HTML里
// index.html
<div id="xxx">
  {{n}}
<button @click="add"><button/>
</div>
// main.js
new Vue({
  el:"#xxx",
  data:{n:0},     // data也可以写成函数
  methods:{
    add(){
      ...
    }
  }
})
  1. 使用Vue完整版，写在选项里
// index.html
<div id="app">
</div>
// main.js
new Vue({
  data:{n:0},     // data也可以写成函数
  tmeplate:`
    <div id="xxx">
      {{n}}
    <button @click="add"><button/>
  </div>
  `,
  methods:{
    add(){
      ...
    }
  }
}).$mount('#app')  // 等于 el:'#app'
  • 这样写，HTML里面的 div#app 元素会被 template 外层的 div 替换。
  1. 使用 Vue 非完整版，配合 xxx.vue 文件
<template>  <!-- 这里不是HTML，而是 XML -->
    <div>
        {{n}}
        <button @click='add'>+1</button>
    </div>
</template>
<!-- XML中 有闭合标签 / 比如 <input /> <div />  空div可以这样写 -->
<script>
export default {
  data(){ return n:0 }  // data必须为函数
  method: {add(){ this.n += 1 }}
}
</script>
<style> 这里写CSS样式 </style>
// 在另一个地方写如下代码
import Xxx from './xxx.vue'
// Xxx
是一个 options 对象
new Vue({
  render: h => h{Xxx}
}),$mount('#app')

2. 模板 template 中的常用指令

2.1 展示内容

  1. 表达式
  • {{ object.a }} 表达式
  • {{ n+1 }} 可以写任何运算（不能写if else）
  • {{ fn(n) }} 可以调用函数
  • 如果值为 undefined 或 null 就不显示
  • 另一种写法
<div v-text="表达式"></div>
  1. HTML内容
  • 假设 data.x 值为 <strong>hi</strong>
<div v-html="x"></div>   <!-- 即可显示粗体的hi -->
  1. 展示内容{{ n }}
<div v-pre>{{ n }}</div>
  • v-pre 不会对模板进行编译

2.2 绑定属性

1.绑定 src

<img v-bind:src='x' />
  • v-bind: 简写为<img :src="x" />
  • 绑定对象
<div :style="{borde: '1px solid red', height: 100}"></div>

注意：这里可以把‘100px’写成100，默认为px，如果是'100em'就不可以省略em。

2.3 绑定事件

1.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>  <!-- 点击之后，Veu 会运行n+=1 -->

发现函数就加括号调用，否则就直接运行代码。为了在模板 template 中保持简便容易理解的代码，还是避免使用函数中再调用函数这样的偏复杂操作。
2.缩写

<button @click="add">+1</button>  <!-- 一般都会使用缩写 -->

2.4 条件判断

if...else

<div v-if="x >0"> <!-- 符合条件就显示div -->
    x大于0
</div>
<div v-else-if="x ===0">
    x为0
</div>
<div v-else>
    x小于0
</div>

2.5 循环

  • for (value, key) in 对象或数组
<ul>
    <li v-for=" (u,index) in users" :key="index">
        索引:{{index}}值:{{u.name}}
    </li>
</ul>

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

2.6 显示与隐藏

  • 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。

3. 指令通用用法

3.1 什么是指令

以 v- 开头的东西就是指令。（只有v-bind和v-on会省略）

3.2 语法

  • v-指令名： 参数=值，如 v-on:click=add
  • 如果参数值没有特殊字符，则可以不加引号
  • 有些指令没有参数和值，如 v-pre
  • 有些指令没有值，如 v-on:click.prevent (阻止默认事件)
    总结
    1.Vue模板主要特点有
  • 使用 XML 语法（不是HTML）
  • 使用 {{}} 插入表达式
  • 使用 v-html v-on v-bind 等指令操作DOM
  • 使用 v-if v-for 等指令视线条件判断和循环
    2.还没写出来的指令
  • v-model 关于Vue表单
  • v-slot 关于Vue插槽
  • v-cloak
    这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
  • v-once
    只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

3.3 事件修饰符

有些指令支持修饰符

  • @click.stop = 'add' 表示阻止事件传播，冒泡
  • @click.prevent = 'add' 表示阻止默认动作
  • @click.prevent.stop = 'add' 表示以上两种意思

常用的修饰符有很多

  • v-on 支持的有 .{ keycode | 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

3.4 .sync饰符

Vue的几个规则

  • 组件不能修改 props 外部数据
  • $emit 可以触发事件，并传参
  • event 可以获取$emit的参数
    在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。但是真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源会显得混乱。因此 Vue 推荐以 update:myPropName 的模式触发事件（发布订阅模式）取而代之。
    看一个场景，子组件要使用父组件传递的参数加以修改。
    这里是子组件，点击执行自定义事件 'update:money.' 执行内容 为 'money - 100'
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money',money - 100)">
      <span>花钱</span>>
    </button>
  </div>
</template>
<script>
export default {
  props:['money']
}
</script>

这里是父组件 ,传给子组件 :money='total' props 数据.父元素绑定'update:money'事件，子组件执行时便触发事件，执行 total = $event。$event表示子组件调用的参数。
当子组件修改父组件数据时，必须这样写，不可以直接修改。

<template>
  <div id="app">
    App.vue 我现在有 {{total}}
    <hr/>
    <Child :money="total" v-on:update:money="total = $event"/>
  </div>
</template>
<script>
import Child from './components/Child.vue'
export default {
  name: 'App',
  data(){
    return {
      total:10000
    }
  },
  methods:{
    add(){
      this.n++;
    }
  },
  components:{
    Child:Child
  }
}
</script>

用 .sync 修饰符时

<Child :money.sync="total"/>  
<!-- 等价于 -->
<Child :money="total" v-on:update:money="total = $event"/>

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

这是博客中的示例代码。
步骤

  • .sync修饰符监听子组件的 prop --show标志位。
  • 子组件的模板在页面中添加了一个由show控制是否显示的一个段落和一个按钮的div，show初始值为true，代表显示这个div。
  • 当点击关闭按钮调用 closeDiv() 触发事件，使show变为false，而 updata:show 将数据更新，使得 div 不显示。
  • 再去点击父组件 toggle 按钮将标志位取反为true，让这块div重新显示。
<myComponent :show.sync='valueChild' />
<!-- 等价于 -->
<myComponent :show='valueChild' v-on:'update:show'="valueChild=$event"/>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容