Vue模板语法基础使用

前端打手
151 阅读1分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 3 天，点击查看活动详情。

模板语法

插值文本

1、数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

2、Mustache 语法不能作用在 HTML attribute 上，这时应该用v-bind指令（简写:）

列表渲染

v-for指令

表单输入绑定

v-model指令，本质上是个语法糖。 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

input中使用v-model指令双向绑定，等价于v-bind:value与input事件

事件处理

v-on指令（简写@）

  • 可以通过传入特殊的变量 $event，操作原始dom事件

  • 事件修饰符

    1. .stop: 阻止事件继续传播
    2. .prevent: 对于触发的事件调用 event.preventDefault()
    3. .capture: 添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
    4. .self: 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
    5. .once: 事件将只会触发一次；还能被用到自定义的组件事件上
    6. .passive: 告诉浏览器你不想阻止事件的默认行为；
    7. 不要把 .passive 和 .prevent 一起使用
    8. 修饰符可以串联，顺序很重要

  • 按键修饰符,Vue 提供了绝大多数常用的按键码的别名

    1. .enter
    2. .tab
    3. .delete(捕获“删除”和“退格”键)
    4. .esc
    5. .space
    6. .up
    7. .down
    8. .left
    9. .right
    10. 可以通过全局** config.keyCodes **对象自定义按键修饰符别名
    // 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

  • 系统修饰键

    1. .ctrl
    2. .alt
    3. .shift
    4. .meta
    5. 在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
    6. 请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl
    7. .exact: 修饰符允许你控制由精确的系统修饰符组合触发的事件。
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

  • 鼠标按钮修饰符, 限制处理函数仅响应特定的鼠标按钮。

    1. .left
    2. .right
    3. .middle

class与style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

class

  • 定义一个样式类，通过变量控制是否给这个dom添加class
<style>
    .active {
        background-color: #ddd;
    }
</style>
<li v-for="item in courses" :key="item" 
    :class="{active: selectedCourse === item}"
    @click="handleSelectCourse(item)">
    {{item}}
</li>

style

<li v-for="item in courses" :key="item" 
    :style="{backgroundColor: selectedCourse === item ? '#ddd' : 'transparent'}"
    @click="handleSelectCourse(item)">
    {{item}}
</li>

条件渲染

v-if VS v-show

  • v-show: 通过css属性display控制元素显示，这个元素始终是存在的
  • v-if：惰性渲染元素，若一开始条件为false, 元素是不存在的。元素动态的创建新增或者移除元素 image.png

模板和渲染函数

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

<div id="app">
     <!-- 模板内容 巴拉巴拉一大坨 -->
</div>

const app = new Vue({
    el: "#app"
})
// 输出vue生成的渲染函数
console.log(app.$options.render)
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('h1',{attrs:{"title":title}},[_v(_s(message))]),_v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(course),expression:"course"}],attrs:{"type":"text"},domProps:{"value":(course)},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return addCourse.apply(null, arguments)},"input":function($event){if($event.target.composing)return;course=$event.target.value}}}),_v(" "),_c('button',{on:{"click":addCourse}},[_v("添加课程")]),_v(" "),_c('div',[(vifflag)?_c('p',[_v("使用vif控制显示")]):_e(),_v(" "),_c('p',{directives:[{name:"show",rawName:"v-show",value:(vshowflag),expression:"vshowflag"}]},[_v("使用vshow控制显示")]),_v(" "),_c('button',{on:{"click":function($event){vifflag = !vifflag}}},[_v("v-if")]),_v(" "),_c('button',{on:{"click":function($event){vshowflag = !vshowflag}}},[_v("v-show")])]),_v(" "),_c('ul',[(courses.length === 0)?_c('p',[_v("没有课程")]):_l((courses),function(item){return _c('li',{key:item,style:({backgroundColor: selectedCourse === item ? '#ddd' : 'transparent'}),on:{"click":function($event){return handleSelectCourse(item)}}},[_v("\n                    "+_s(item)+"\n                ")])})],2)])}
})

改成直接使用渲染函数一样：

<div id="app"></div>

const app = new Vue({
    el: "#app",
    render() {
        with(this){
            return _c('div',{attrs:{"id":"app"}},[_c('h1',{attrs:{"title":title}},[_v(_s(message))]),_v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(course),expression:"course"}],attrs:{"type":"text"},domProps:{"value":(course)},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return addCourse.apply(null, arguments)},"input":function($event){if($event.target.composing)return;course=$event.target.value}}}),_v(" "),_c('button',{on:{"click":addCourse}},[_v("添加课程")]),_v(" "),_c('div',[(vifflag)?_c('p',[_v("使用vif控制显示")]):_e(),_v(" "),_c('p',{directives:[{name:"show",rawName:"v-show",value:(vshowflag),expression:"vshowflag"}]},[_v("使用vshow控制显示")]),_v(" "),_c('button',{on:{"click":function($event){vifflag = !vifflag}}},[_v("v-if")]),_v(" "),_c('button',{on:{"click":function($event){vshowflag = !vshowflag}}},[_v("v-show")])]),_v(" "),_c('ul',[(courses.length === 0)?_c('p',[_v("没有课程")]):_l((courses),function(item){return _c('li',{key:item,style:({backgroundColor: selectedCourse === item ? '#ddd' : 'transparent'}),on:{"click":function($event){return handleSelectCourse(item)}}},[_v("\n                    "+_s(item)+"\n                ")])})],2)])
        }
    },
})
avatar
文章
阅读
粉丝