【大白话】结合官方文档说Vue之基础模版语法指令

moocnanmo
177 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

前言

Vue和React属于当下主流框架，初学者（包括我）在选择的时候可能会犯难，我给个个人建议：初学选啥都一样，看个人爱好，想UI和JS一起写的推荐React，想数据渲染简单一点的选择React，两者在编码上存在 互相借鉴 ，都推荐使用Hooks编码，原理也大差不差，会其中一个，另一个在花个一周时间可以很快上手，相当于买一送一，很实惠了。

本系列主要介绍以下模块：

  • 1.基础模版语法指令
  • 2.比较常用的特性
  • 3.组件化开发
  • 4.前后端的一些交互功能
  • 5.一些路由知识

基础模版语法指令

基本模版：官方样例，这也是我学习Vue的第一个代码。很好理解：导入Vue.js文件，实例化一个样例在挂在到DOM上，如果打开网页控制台，修改app.msg的值，你会发现视图和数据间的更新是同步的。这块说下数据绑定，属性绑定，事件绑定，和分支循环吧。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>
</html>
  • el:元素挂载位置（值可以是css选择器或DOM元素），这里为#app
  • data：模型数据（值为对象）
  • 后续一些v-指令需绑定到DOM元素上使用

1.1、数据绑定指令（v-tetx,v-html,v-pre，v-bind）

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值: <span>Message: {{ msg }}</span> Mustache 标签将会被替代为对应数据对象上 msg 的property 值。若msg的值发生改变，就会发现视图和数据间的更新是同步的。 若不想同步，可使用v-once指令，这只会更新一次！ 另外还有：

  • v-text：填充纯文本。
  • v-html：填充HTML片段，但有安全性问题，容易导致XSS攻击。
  • v-pre：填充原始信息，跳过编译过程。
  • v-bind：Mustache 语法不能作用在 HTML attribute 上，此时需要到v-bind。
  • 官方API

1.2、双向数据绑定指令（v-model）

v-model 官方API，v-model的本质不过是语法糖，能在input 、textarea 及select 元素上创建双向数据绑定，监听用户的输入事件以更新数据，以及处理一些输入处理，比如使用修饰符：

trim：过滤用户输入的首尾空白字符、 .number：将用户的输入值转为数值类型、 .lazy：解决model在文本输入框内自动触发数据同步的情况，转为在 change 事件_之后才进行同步

这里设计到了MVVM的设计模式：M (model)，V (view)，VM (View-Model)。

这点最核心的就是双向绑定方式：从视图到模型用的是事件监听，从模型到视图用的是时间绑定。

1.3、事件绑定（v-on）

v-on 官方文档，这是绑定事件监听器，事件类型由参数指定。可监听原生DOM事件(" : " 后面可以添加事件名称)，自组件的触发事件，监听器键值对的对象。大致有：

  • v-on:click='函数名称'
  • v-on:[event] 动态事件
  • v-on:click="handel(a, b，$event)" 传递多个参数
  • @click.stop 阻止冒泡
  • @click.prevent 组织默认行为
  • @keyup.13 键修饰符(.enter回车键 .delete删除键)
  • v-on="{ mousedown: doThis, mouseup: doThat } 对象语法

如果是事件函数绑定调用，那么最后一个参数必须是事件对象(且名称必须为 $event).

1.4、属性绑定（v-bind）

v-bind 官方文档，动态的绑定一个或多个属性，在绑定class或style时，支持数组或对象格式的数据类型。大致有如下用法：

  • v-bind:src="属性值"
  • :class="{ red: isRed }" class 绑定
  • class="{ active: isActive }" isActive为布尔类型，只有为真时类名才显示
  • :style="{ fontSize: size + 'px' }" style 绑定

1.5、分支循环结构（v-if , v-else , v-else-if , v-show，v-for）

分支循环API，这块比较简单，基本看一遍就明白，没太多可以说的，值得注意的是，当v-for和v-if一起使用时，v-for的优先级比后者高！v-show为控制元素是否显示在页面（已经渲染成功）

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

//遍历对象  值，键，索引
<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>

这块就比较简单了，跟JS没啥两样，值得注意的就是v-show 和 v-if ,在实际项目中对组件的显隐操作使用的较为频繁。

avatar
文章
阅读
粉丝