前端培训-中级阶段(35)- Vue 语法

linong

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

模板语法

插值(模板字符串)

可以使用 {{ }} 来显示变量。这样的话,如果内部修改 author 的话,页面上也会实时更新。
v-once 指令,可以执行单次渲染,后续变化不在更新。
delimiters: ['${', '}'] 通过这个配置项,我们可以修改为习惯的分隔符。

<template>
    <span>Message: {{ author }}</span>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top'
        }
    }
}
</script>

v-text 和 v-html

插值的写法基本等价于 v-text
当然有些时候我们有可能会需要渲染 HTML,比如说 表情、富文本等等,这个是我们可以使用 v-html
当然,不建议使用 v-html ,因为有可能会有 xss 的问题。

<template>
    <div>
        <span>Message: {{ author }}</span>
        <span v-text="author"></span>
        <span v-html="author"></span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top,<span style="red>lilnong.top</span>'
        }
    }
}
</script>

属性

绑定动态属性需要使用 v-bind(缩写是:)。下面这两种写法是等价的

<span v-bind:id="author"></span>
<span :id="author"></span>

如果是 disabled 这类的属性,在值为 false 时是不会渲染在DOM 上的。因为这种属性在 HTML5 规范中,存在即为 true。

style

style 属性是特殊处理过的,你可以 直接使用对象形式

<template>
    <div>
        <span :style="authorStyle">Message: {{ author }}</span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top,<span style="red>lilnong.top</span>',
            authorStyle: {
                color: '#0cc'
            }
        }
    }
}
</script>

class

class 属性是特殊处理过的,你可以 直接使用对象形式

  1. 对象形式。如下,item.checked 为真时,会增加 checked 这个 classitem.checked && item.age >= 18 为真时,会增加 isHigh 这个 class

    {
         checked: item.checked,
         isHigh: item.checked && item.age >= 18
    }
  2. 数组形式。默认给所有都加上了 checkbox 这个 class

    ['checkbox',{
         checked: item.checked,
         isHigh: item.checked && item.age >= 18
    }]

事件

事件是我们开发中必不可少的东西。比如 clickinput 等等。
我们在 Vue 中,绑定事件使用 v-on(缩写是 @)来绑定事件。下面两种写法是等价的。

<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>

指令

指令 (Directives) 带有 v- 前缀,如刚才我们用到的 v-bindv-onv-textv-html
指令的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>
<span v-text="author"></span>
<span v-html="author"></span>

Vue 自带的指令

  1. v-text 更新元素 textContent,我个人感觉还是模板字符串好用
  2. v-html 更新元素的 innerHTML,这里需要注意 XSS 防护哟。
  3. v-show 切换元素的 display,来实现显示隐藏。
  4. v-if、v-else、v-else-if 通过组件销毁重建,来实现显示隐藏。
  5. v-for 遍历,这里要注意使用 :key

     <div v-for="(item, index) in items"></div>
     <div v-for="(val, key) in object"></div>
     <div v-for="(val, name, index) in object"></div>
  6. v-on 用于绑定事件。组件上如果想触发元素的原生事件可以用 .native 。缩写是 @

    1. 修饰符

      • .stop- 调用 event.stopPropagation()
      • .prevent- 调用 event.preventDefault()
      • .capture- 添加事件侦听器时使用 capture 模式。
      • .self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
      • .{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。
      • .native- 监听组件根元素的原生事件。
      • .once- 只触发一次回调。
      • .left- (2.2.0) 只当点击鼠标左键时触发。
      • .right- (2.2.0) 只当点击鼠标右键时触发。
      • .middle- (2.2.0) 只当点击鼠标中键时触发。
      • .passive- (2.3.0) 以 { passive: true } 模式添加侦听器
  7. v-bind 设置属性。缩写是 :

    1. 修饰符:

      • .prop- 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里?)
      • .camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
      • .sync(2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的v-on侦听器。
  8. v-model 用于实现数据双向绑定,其实是个语法糖

    1. <input v-model="value"> 等价于 <input :value="value" @input="value = $event.target.value">
    2. 只可以在指定的元素上使用

      • <input><select><textarea> 元素的表单 DOM
      • components 自定义的组件
    3. 修饰符

      • .lazy- 取代 input 监听 change 事件
      • .number- 输入字符串转为有效的数字
      • .trim- 输入首尾空格过滤
  9. v-slot 为插槽传入 prop 的时候使用。默认是 default,缩写是 #
  10. v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
  11. v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以 隐藏未编译的 Mustache 标签直到实例准备完毕
  12. v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

动态指令

从 2.6.0 开始,可以用 方括号\[\])括起来的 JavaScript 表达式作为一个指令的参数:

<a v-bind:\[attributeName\]="url"\> ... </a\>
<a v-on:\[eventName\]="doSomething"\> ... </a\>

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

微信公众号:前端linong

clipboard.png

参考文献

  1. 前端培训目录、前端培训规划、前端培训计划
阅读 1.1k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.7k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.7k 声望
4.8k 粉丝
文章目录
宣传栏