1.2 Vue 模块语法，常用指令，事件绑定

1. 前置准备

使用npm方式创建一个vue项目
开发工具：Visual Studio Code
手动创建package.json

创建一个文件夹，用来放这个项目，在该文件夹中创建一个index.html文件
有终端的跳过该步骤
点击插件，搜索terminal，点击install安装
右击index.html文件选中终端进入命令行
终端输入命令npm init
创建的步骤

还有一种快捷的方式可以一键生成package.json
命令npm init -y会使用默认的配置生成package.json

生成后的package.json也可以随意改动，这里面的license看一下是不是MIT

安装vue
安装vue命令：npm install vue
完成后package.json会写入vue的版本，并且文件夹下多出node_modules文件夹，在该文件夹下的dist中就有下载的vue所有的源码，在node_moudules下面的LICENSE打开可以看见，是刚刚配置的开源协议中的一种——MIT协议
在这里插入图片描述
入口文件引入vue
在index.html中引入<script src="node_modules/vue/dist/vue.min.js"></script>即可

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{title}}
    </div>
    <script>
        let app = new Vue({
            el: '#app',// 告诉Vue实例，数据要往哪个dom结构上绑定
            data: {
                title: 'hello world'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2. 模块语法

什么是模块语法
基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。

文本（变量）差值

使用“Mustache”语法（双大括号）
<div>title:{{title}}</div>
在标签上使用v-once,执行一次绑定，title改变，视图不会再发生改变
<div v-once>title:{{title}}</div>
标签上属性插值，使用v-bind指令插值（id），通常可以简写为冒号+变量的形式
<div v-bind:id="myId"></div> 也可以简写为 <div :id="myId"></div>

HTML内容

如果使用“Mustache”语法(双大括号)，html内容将会原样输出
var htmlStr = '<div style="color:red">xxx</div>
<div>title:{{htmlStr}}</div>
在标签上使用v-html，可以解析出正常的html填充下面的div
<div v-html='htmlStr'></div>
注意：使用v-html要防止被XSS攻击（可信内容或处理用户输入内容之后插值）

使用JS表达式

Vue支持JavaScript表达式插值
{{number + 1}},{{ok ? 'YES' : 'NO'}},
{{message.split('').reverse().join('')}}
<div v-bind:id="'list'-' + id"></div>
注意：不能再{{}}中定义变量或者是写一些if语句

3. 常用指令

什么是指令
指令（Directives）是带有v-前缀的特殊特性
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

常规内置指令

v-clock 解决初始化慢导致页面闪动的最佳实践，它会在ue实例结束编译时从绑定的HTML元素上移除。
v-if、v-else-if、v-else 将根据表达式绑定值的真假，插入或删除所绑定的元素。
v-show 将根据表达式绑定值的真假，显示或隐藏所绑定的元素。
v-on 用于监听DOM事件。
比如:<a v-on:click="doSomething">...</a>
也可以缩写为<a @click="doSomething">...</a>
v-bind 可以用于响应式地更新HTML特性。<a v-bind:href="url">...</a>
也可以缩写为<a :href="url">…</a>在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式url的值绑定。

表单内置指令

v-for 将一个数组遍历或枚举一个对象循环显示。
lessonArray = [{name:'test1'},{name:'test2'},{name:'test3'}]
<ul><li v-for='(item,index) in lessonArray'>{{item.name}}</li></ul>
注意:一般在渲染列表时，我们需要加上key，优化渲染。
v-model 用于在表单类元素上双向绑定数据。
<input type='text' v-model='name'/>
注意：使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，如果希望实时更新，可以用@input来替代。
<input type='text' @input='handleInput'/>

4. 事件绑定

可以用v-on指令监听DOM事件，并在触发时运行一些 JavaScript代码。
内联处理器
使用v-on指令去监听DOM事件,后面可以接事件类型。

<button v-on:click="say('hello Vue', $event)">Say hello Vue</button>
say: function(message){
alert(message)
}

有时也需要在內联语句处理器中访问原始的DOM事件,此时传入$event。
事件修饰符
修饰符是由点开头的指令后缀来表示。
v-on:click.stop、v-on:submit.prevent、v-on:click.stop.prevent、 v-on:click.capture、v-on:click.self、v-on: click.once、v-on:scroll.passive
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
按钮修饰符
监听键盘事件时，经常需要检査详细的按键。允许为ν-on在监听键盘事件时添加按键修饰符。
v-on:keyup.enter、v-on:keyup.page-down、v-on:click.stop.prevent、 v-on:click.capture、v-on:click.self、v-on:click.once、v-on:scroll.passive
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
另外 keyCode事件用法已经被废弃(老旧浏览器可能支持)。
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl、.alt、.shift、.meta

<div @click.ctrl="doSomething">Do something</div>
其他修饰符

.exact修饰符
允许你控制由精确的系统修饰符组合触发的事件。
有且只有Ctrl被按下的时候才触发
<button @click.ctrl.exact="onCtrlClick">A</button>
鼠标按钮修饰符
限制处理函数仅响应特定的鼠标按钮。
·.left、 .right、 .middle

痴心的萝卜

发布了56 篇原创文章 · 获赞 20 · 访问量 7372

私信关注