开始学习vue2基础篇(指令)

一、 内容渲染指令

> {{}} 模板渲染(模板引擎)

  1. {{数据绑定}}

  2. {{简单计算}}

  3. {{简单逻辑运算}}(三元运算)

  4. {{做简单 js 判断}}

注意:不能写语句、不能解析 html 渲染、不能放在在属性身上

> v-text

设置标签的内容,元素的 innerText 必须是双标签

默认会替换标签内原来的全部内容,使用{{} }可替换指

定内容

支持内部写表达式

代码:

v-html

设置标签的内容,元素的 innerText 必须是双标签

会解析 HTML 标签

代码:

解析文本要使用 v-text,解析带有 html 标签的使用

二、属性绑定指令

> v-bind

² 语法:V-bind:属性名="挂载的数据 "

² 简写 :属性名= "挂载的数据 "

² 解析属性,单向的数据绑定

代码:

<div id="box">

<img v-bind:src="imgSrc" alt="">

<img :src="imgSrc" :title="imgTitle+'!!!'"alt=""> </div>

</body>

</html>

<script src="vue.js"></script>

<script>

new Vue({

el:"#box",

data: {

imgSrc:"1.PNG",

imgTitle:"奶茶"

}

})

</script>

三、事件绑定属性

> v-on

² 语法: v-on:事件名= "方法() "

² 为元素绑定事件

² 绑定的方法在 methods 属性中

² 可以在方法内部通过 this 直接获取 data 中的值

² v-on 可以简写成 @

² 事件绑定并且传参数

代码:

<div id="box">

<input type="text" value="v_on 单击" v-on:click="doIt()"> <input type="text" value="v_on 简写单击" @click="doIt()">

<input type="text" value="v_on 双击" @dblclick="gai()">

<input type="text" value="回车键" @keyup.enter="sayHi"> <br>

<span>{{message}}</span>

</div>

案例:计数器

$event

$event 是 vue 提供的特殊变量,用来表示原生的事件参数对象

event。$event 可以解决事件参数对象 event 被覆盖的问题

事件修饰符

按键修饰符

使用按键修饰符监听按键

四、条件渲染属性---显示切换

> v-show

² 条件渲染,判断是否隐藏,true 是现实 false 是隐藏

² 原理是修改 display 属性

代码

v-if,v-else 判断是否插值

² 根据条件的真假判断是否显示数据

² 原理是 append remove

代码:

案例:选项卡

五、列表渲染指令

> v-for 列表渲染

² 语法: v-for=" item in 数组 "

² 根据数据生成列表结构,隐式遍历

² 可以通过此语法获取到 item 子项,也可以获取到索引 index

当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,

从而提升渲染的性能。但这种

默认的性能优化策略,会导致有状态的列表无法被正确更新。

为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列

表被正确更新的前提下,提升渲

染的性能。此时,需要为每项提供一个唯一的 key 属性:

六、双向数据绑定指令

> v-model 控制表单产生数据,双向绑定数据

² 设置或者获取表单元素的值

相关推荐
冰茶_几秒前
.NET MAUI 发展历程:从 Xamarin 到现代跨平台应用开发框架
学习·microsoft·微软·c#·.net·xamarin
爱吃的强哥7 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信15 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安15 分钟前
CSRF请求伪造
前端·网络安全·csrf
帅云毅19 分钟前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆19 分钟前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
TT模板21 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩22 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真27 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
nenchoumi311941 分钟前
VLA 论文精读(十六)FP3: A 3D Foundation Policy for Robotic Manipulation
论文阅读·人工智能·笔记·学习·vln