三、模板语法

介绍：vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM操作次数减到最少。如果熟悉虚拟DOM并且偏爱JavaScript的原始力量，也可以不用模板，直接编写渲染函数及render，使用可选的JSX语法(react采用的就是jsx语法)。

1.插值：

(1)文本

<span>Message: {{msg }}</span>
<!-- {{msg}} 用双大括号将data数据模型中的字段渲染到页面中 -->
<!-- {{ msg + 'Nihao' }} 双大括号内部可以放js表达式-->

(2)原始html

<span v-html="rawHtml"></span>

(3)属性

<div v-bind:id="dynamicld"></div>

(4)事件

<a v-on:click="dosomething">...</a>

(5)Javascript表达式

<div>{{ number+ 1 }}</div>

2.指令：

v-bind：动态绑定元素上的属性

v-bind:title 简写--> :title="title"

v-html：绑定html代码片段；富文本编辑器

有格式的内容 --> 相应html代码片段

v-on:动态绑定事件

v-on:click="clickHandler" 简写 --> @click="clickHandler"

3.条件渲染：

v-if v- else：当exp返回true的时候h1的内容会被渲染，否则渲染v-else指令中的内容，v-if可以单独使用

例：

<h1 v-if="exp">Vue is awesomel</h1>
<h1 v-else>Oh no</h1>

v-show：只是简单地切换元素的CSS property display。如果需要非常频繁地切换，使用v-show比较好

<h1 v-show="ok">Hello!</h1>

区别：

v-if v-else 通过控制dom节点的渲染，实现显示与隐藏

v-show 通过控制dom节点css样式中display，来实现显示与隐藏

频繁的显示与隐藏某个组件时，用v-show较好；v-if会频繁渲染dom数，占用资源，影响代码运行效率。

4.列表渲染：

v-for：用于将列表数据进行渲染。v-for指令需要使用item in items形式的特殊语法，其中 items是源数据数组，而item则是被迭代的数组元素的别名。

使用：

<ul><li v-for="(item, index) of arr" :key="index">{{item}}{{index}}</li>
</ul>

注意：不推荐同时使用v-if和v-for。当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

5.class绑定

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

:class

<div :class="{ active: isActive }">块级元素</div>

<div :class="[active1, box1]">块级元素</div>

<div :class="[isActive? active1 : box1]">块级元素</div>

6.style绑定

v-bind:style的对象语法十分直观-->看着非常像CSS，但其实是一个JavaScript对象。CSS property名可以用驼峰式或短横线分隔(记得用引号括起来)来命名。

:style

<div :style="{color: 'red', fontSize: '24px'}">块级元素</div>

<div :style="style1">块级元素</div>

<div :style="[style1, style2]">块级元素</div>

7.属性绑定

v-bind 指令可以用于响应式地更新HTML attribute，v-bind指令名称之后以冒号表示要接受的参数。

<a v-bind:href="url"></a>

url为变量，表示将url变量的值动态赋值给a标签的href属性，注意，这里url在vue中是什么类型就传递给href属性什么类型。

简写：

<a :href="url"></a>

ggggxc学习笔记----Vue学习笔记II----模板语法相关推荐

学习Vue3 第四章（模板语法 vue指令）
模板插值语法在script 声明一个变量可以直接在template 使用用法为{{变量名称}} <template><div>{{ message }}</div> ...
ggggxc学习笔记----Vue学习笔记VI----可复用技术
九.可复用技术 1.混入mixin:混入是非常灵活的技术. 介绍:用来分发Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合&q ...
前端入门学习：Vue学习笔记（二）
一. 数据请求 1. fetch why XMLHttpRequest 是一个设计粗糙的 API,配置和调用方式非常混乱, 而且基于事件的异步模型写起来不友好. 兼容性不好 polyfill //ht ...
Vue学习（组件的定义及调用、路由）-学习笔记
文章目录 Vue学习(组件的定义及调用.路由)-学习笔记 Vue学习(组件的定义及调用.路由)-学习笔记可见代码参考学习:https://gitee.com/monkeyhlj/vue-learni ...
VUE 学习代码监视和模板语法回调函数
文章目录 HelloWorld 模板语法 03_计算属性和监视 HelloWorld <!DOCTYPE html> <html lang="en"> &l ...
Vue学习——【第二弹】
前言上一篇文章 Vue学习--[第一弹] 中我们学习了Vue的相关特点及语法,这篇文章接着通过浏览器中的Vue开发者工具扩展来进一步了解Vue的相关工作机制. Vue的扩展我们打开Vue的官方文档 ...
VUE 学习代码理解(1~5课时代码)
文章目录 HelloWorld 模板语法 03_计算属性和监视 04_class与style绑定 05_条件渲染 HelloWorld <!DOCTYPE html> <html l ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
遇见 vue.js --------阿文的vue.js学习笔记（4）------模板语法
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
Vue 学习第六天学习笔记
Vue 学习第六天学习笔记 1.webpack 使用复习第一步:先建立文件夹. 第二步,用webpack将其初始化,建立管理.npm 的包管理工具管理起来, npm init -y .注意{查 ...

ggggxc学习笔记----Vue学习笔记II----模板语法