用vue语法写html,Vue -- 模板语法

Vue 模板语法

1.vue 和大多数后台语言，甚至是和art-template 这种前端模板库一样，都有一套，特定的语法来把数据渲染在html上。

Mustache -- 大胡子语法

1.大胡子的语法格式双大括号'{{}}',用在html标签之间，不能写在标签属性中

2.大胡子语法中可以使用js表达式，但只限于Vue实例作用域的和Vue沙盒白名单，白名单规定的一些全局变量例如Math和FDate。

3.表达式一些基本表达式，和一些三元运算例如：

'{{num + 1}}'、'{{status ? 'succeed' : 'failed'}}'

'{{changeTime()}}'、'{value.replace(/,/g,"")}'

4.但不支持流控制例如:'{{ if (ok) { return message } }}'

大胡子语法案例

Title

var vm = new Vue({

el:"#app",

data:{

msg:"将会被大胡子语法渲染"

}

})

v-text -- 模板渲染

1.v-text 能展示对应data中数据内容，也能在数据基础上做运算

2.v-text 会吧标,签中的内容替换

v-text -- 使用案例

Title

我被覆盖掉了

var vm = new Vue({

el:"#app",

data:{

msg:"将会被v-text渲染"

}

})

展示效果

image.png

v-html -- html标签渲染

1.将标签语义化展示在页面上

2.容易产生xss攻击，请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

3.如何防止xss攻击:

3.1 前端过滤

3.2 后台转义(< > < >)

3.3 给cookie 加上属性 http例如:

click

v-html 案例

Title

var vm = new Vue({

el:"#app",

data:{

msg:"v-html渲染"

}

})

三种将数据渲染到页面的方法总结

1.虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是'{{}}'

2.'{{}}' 最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方法)，无法将html格式数据渲染，只能当字符串展示

3.'v-text' 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。

4.'v-html' 谨慎使用会出现xss攻击的风险

用vue语法写html,Vue -- 模板语法相关推荐

Vue学习心得记录之模板语法
下面是我这半年以来总结的Vue学习笔记,帮助自己复习学习Vue的基本用法.有需要的同志可以参考下. Vue的模板语法 Vue有很简单的模板语法,这些Vue指令用来响应式改变渲染DOM可以快速入门上手这 ...
Vue官网学习（模板语法：一、{{}}双大括号语法）
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析 ...
Vue入门（一）—— 模板语法
Vue.js 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. 什么是渐进 ...
vue加载时闪现模板语法-处理方法
问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ item.name }}等解决办法: 1.可以通过VUE内置的指令v-cloak解决这个问题(推荐) 具体实现: <ul v-clo ...
VUE 学习代码监视和模板语法回调函数
文章目录 HelloWorld 模板语法 03_计算属性和监视 HelloWorld <!DOCTYPE html> <html lang="en"> &l ...
Vue3零基础学习指南之Vue基础（1）— 模板语法与指令
目录概述安装实例化文本渲染(v-text.v-html) 属性渲染(v-bind) 条件渲染(v-if.v-else-if.v-else) 列表渲染指令(v-for) 遍历数组遍历对象范围 ...
从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
html 的模板语法,art-template模板语法
art-template模板语法支持两种模板语法,分别是标准语法和原始语法. 标准语法: 标准语法可以让模板更容易读写,例如:{{ 数据 }} 原始语法: 原始语法具有强大的逻辑处理能力,例如: 纯文 ...

用vue语法写html,Vue -- 模板语法

用vue语法写html,Vue -- 模板语法相关推荐

最新文章

热门文章