03vue_模板语法_插值

痛定思痛。 2022-05-31 10:23 188阅读 0赞

# 模板语法 #

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

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

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，[直接写渲染 (render) 函数][_render_]，使用可选的 JSX 语法。

## 插值 ##

Vue用来实现使用数据绑定的一种方式，常用的方式如下：

1、文本     
2、原始html  
3、属性  
4、使用JavaScript表达式

代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>		
    		<div id="app1">
    			
    			这是纯文本：{
       {txtmsg}}<br/>
    			
    			<div v-html="htmltag"></div>
    			
    			<input type="button" value="按钮" v-bind:disabled="isButtonDisabled" />
    			
    			<p>我今年:{
       {age}}岁了，明年肯定就是:{
       {age+1}}岁了</p>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		txtmsg:"hello vue",
    		htmltag:"<p style='background-color:red'>我是一个红色的段落</p>",
    		isButtonDisabled:true,
    		age:20
    	}
    });
    </script>

[_render_]: https://cn.vuejs.org/v2/guide/render-function.html

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3 的模板语法：指令、插值语法和其他相关特性

在使用 Vue3 开发应用时，我们通常使用模板来定义应用的用户界面。Vue3 的模板语法通过扩展普通 HTML，添加了一些特殊的指令和插值语法，以实现数据的动态渲染和交互。本文

傷城~/ 2024年03月17日 21:13/ 0 赞/ 88 阅读

相关 Vue模板-插值表达式详解

聚沙成塔·每天进步一点点本文内容 ⭐ 专栏简介基本用法表达式与操作插值表达式中的方法调用注意事项

比眉伴天荒/ 2024年02月05日 22:56/ 0 赞/ 28 阅读

相关 vue模板语法: 插值语法和指令语法以及v-bind指令使用

准备工作首先新建一个页面，写好基本的代码 <!DOCTYPE html> <html> <head> <meta c

迷南。/ 2023年09月27日 09:54/ 0 赞/ 149 阅读

相关 Vue模板语法

一、Vue模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个

阳光穿透心脏的1/2处/ 2022年11月01日 13:41/ 0 赞/ 198 阅读

相关 vue模板语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年10月27日 01:38/ 0 赞/ 205 阅读

相关 Vue插值语法

> Vue的插值语法：\{ \{\}\} chacao中需要写 js 表达式，且能够自动读取到data中定义的属性  <div

以你之姓@/ 2022年09月14日 01:59/ 0 赞/ 169 阅读

相关 03vue_模板语法_插值

模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，

痛定思痛。/ 2022年05月31日 10:23/ 0 赞/ 189 阅读

相关 Vue_模板语法

1.插值表达式：\{ \{\}\} 2.v-text=“name” ：该指令指向的“name”并不是字符串。它指的一定是JS的表达式 3.v-html: 指向实例中的数据

布满荆棘的人生/ 2022年05月22日 13:20/ 0 赞/ 313 阅读

相关 vue模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。插值： 1：文本最常见的数据绑定形式：使用 \{

柔光的暖阳◎/ 2022年05月10日 05:22/ 0 赞/ 406 阅读

相关 vue模板语法,插值表达式和v-text,v-html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

「爱情、让人受尽委屈。」/ 2022年04月25日 08:24/ 0 赞/ 153 阅读