vue 第二天（常用指令及插值语法）

插值语法

1、Mustache语法

<div id="vue_one"><h1>{{site}}</h1><h1>{{one + 1}}</h1><h1>{{one + site}}</h1><h1>{{one +"-"+ site}}</h1><h1>{{one}},{{site}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {site: "1234",one: 2}})
</script>

2、v-once 只能执行一次，不能被修改

<div id="vue_one"><h1>{{site}}</h1><h1 v-once>{{site}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {site: "我的第一个vue程序",}})
</script>

3、v-html 格式化格式可以写带有标签的格式（如有必须别用，会造成xxs安全问题）

<div id="vue_one"><h1>{{site}}</h1><h1 v-html="site"></h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {site: "<a href='http://www.baidu.com'>我是百度</a>",}})
</script>

4、v-text 覆盖原有标签里面的text文本

<div id="vue_one"><h1>{{site}},123</h1><h1 v-text="site">123</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {site: "1234",}})
</script>

5、v-pre 格式化最初的样子（原本的语法）

<div id="vue_one"><h1>{{site}}</h1><h1 v-pre>{{site}}</h1>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {site: "1234",}})
</script>

6、v-cloak 插值表达式存在的问题"闪动",并定义style样式

<style type="text/css">[v-cloak] {display: none !important;}
</style>
<body>
<div id="vue_one"><h1>{{site}}</h1><h1 v-cloak>{{site}}</h1>
</div>
<script type="text/javascript">setTimeout(function () {const vm = new Vue({el: '#vue_one',data: {site: "1234",}})},1000)
</script>

花开一千年,花落一千年,花叶永不见

vue 第二天（常用指令及插值语法）相关推荐

Vue指令系统的常用指令
0. 指令介绍 1. 指令 (Directives) 是带有"v-"前缀的特殊属性. 2. 每一个指令在vue中都有固定的作用. 3. 在vue中,提供了很多指令,常用的有:v-h ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
vue.js语法和常用指令
如果已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创 ...
微信小程序插值语法和数组变量检测踩过的坑
引言微信小程序用的是vue,但是又不同于vue,这就导致我们容易基于vue的思维来踩坑插值语法我当时尝试在wxml文件给插值语法的数据调用js内部的方法,但是显示的却是NAN,我查了一下,发现w ...
vue基础--模板语法、常用指令：v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
一.模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
Vue 常用指令汇总
文章目录 1,vue简介 2,选择器:根据id.class等查找 3,静态绑定数据 data 4,插值 {{}}单项绑定 5,数据动态绑定:computed 6,数据双向绑定 :v-model 7,类 ...
01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)
01- vue是什么: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
vue 快速入门、常用指令（1）
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站中文:https://cn.vuejs. ...
Vue 常用指令自定义指令
v-bind, v-model v-bind 为单向绑定: 数据只能从data流向页面 v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data, 一般应用在表单类元素上,(如 ...

vue 第二天（常用指令及插值语法）

vue 第二天（常用指令及插值语法）

插值语法

1、Mustache语法

2、v-once 只能执行一次，不能被修改

3、v-html 格式化格式可以写带有标签的格式（如有必须别用，会造成xxs安全问题）

4、v-text 覆盖原有标签里面的text文本

5、v-pre 格式化最初的样子（原本的语法）

6、v-cloak 插值表达式存在的问题"闪动",并定义style样式

vue 第二天（常用指令及插值语法）相关推荐

最新文章

热门文章