Vue模板语法

Vue具有自己的模板语法，如果你已经有了后端的学习经验，那么你应该知道，在后端框架中具有框架自带的前端语法，比如django就有自带的模板语法，可以直接写在后端，与服务器进行交互。

一、插值

插值就类似于变量，可以使用js代码控制

1. 文本

就是你第一节看到的Hello World的方法，他的{{ a }}就是模板语法，你可以通过Vue的函数来设置这个a的值，当然，数字也是可以的

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_HelloWorld</title><script src="js/vue.js"></script>
</head>
<body><div id="hello">相加的结果为：{{ a + b }}  <!-- 类似于变量，用于显示字符串，可以随意修改，但是大括号不能变  --></div><script>const hello = {  // 定义一个函数，用于显示变量所代表的字符串data(){      // 它是一个函数，具体效果不用管，他是必须要有的return{a: 10,b: 20}}}Vue.createApp(hello).mount("div")    // 使用vue，并通过ID选择器将div选择</script>
</body>
</html>

你看，精准的计算出来了两个数相加的值，你也可以自己去动手写写别的，诸如加法，减法，乘法，除法等运算

2. html代码

一般我们使用文本的haul，HTML代码只会直接显示成字符串，不信的话，来看看吧

使用文本测试HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_HelloWorld</title><script src="js/vue.js"></script>
</head>
<body><div id="hello">字符串：{{ a }}  <!-- 类似于变量，用于显示字符串，可以随意修改，但是大括号不能变  --></div><script>const hello = {  // 定义一个函数，用于显示变量所代表的字符串data(){      // 它是一个函数，具体效果不用管，他是必须要有的return{a: "<p>我是一个段落，会与上面的代码换行显示</p>"}}}Vue.createApp(hello).mount("div")    // 使用vue，并通过ID选择器将div选择</script>
</body>
</html>

显示结果：

可以看到，他并没有达到我们的效果，那么我们这个时候就应该用到这个东西了v-html，他的作用就是将字符串的HTML代码在网页上面正常显示。

看看例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="js/vue.js"></script><title>Document</title>
</head>
<body><div>使用vue展示html代码<span v-html="vhtml"></span></div><script>const ht = {data(){return{vhtml: '<p style="color:red">我是用vue生成的</p>'}}}Vue.createApp(ht).mount("div")</script>
</body>
</html>

效果：

你可以将v-html看做是一个属性，这个的作用大概就是动态显示HTML了吧

结语

兴趣是最好的老师，坚持是不变的真理。
学习不要急躁，一步一个脚印，踏踏实实的往前走。
每天进步一点点，日积月累之下，你就会发现自己已经变得很厉害了。

我是布小禅，一枚自学萌新，跟着我每天进步一点点吧！

Vue模板语法——插值相关推荐

Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
4.Vue 模板语法
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. Vue模板语法这篇文章我们来 ...
（vue基础试炼_08）Vue模板语法
文章目录一.插值表达式二.v-text 中不是字符串而是js表达式三.v-html 四.js表达式,可以和字符串拼接五.源码链接一.插值表达式 <!DOCTYPE html> & ...
用vue语法写html,Vue -- 模板语法
Vue 模板语法 1.vue 和大多数后台语言,甚至是和art-template 这种前端模板库一样,都有一套,特定的语法来把数据渲染在html上. Mustache -- 大胡子语法 1.大胡子的语 ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
Vue模板语法的缩写是什么？
Vue模板语法缩写是VTL(View Template Language),这是一种用于构建用户界面的声明式编程语言.它基于HTML,但具有更强大的数据绑定功能.下面是一些VTL的例子: 绑定文本: ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
Vue框架---Vue模板语法（二）
样式绑定 1.class绑定使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 <div id="ad& ...
vue模板语法是什么？
在项目中,可以看到很多.vue结尾的文件,它们是什么呢? 1)vue文件是单文件组件后缀名是.vue webpack会使用额外的loader来处理它一个.vue文件就是一个组件(页面) 整个项目( ...

Vue模板语法——插值

Vue模板语法

一、插值

1. 文本

2. html代码

结语

Vue模板语法——插值相关推荐

最新文章

热门文章