ArcherWong博客
首页
博客
vue笔记1-模板语法
作者:ArcherWong
分类:vue
时间:2019-01-04 10:38:16
阅读:622
[TOC] # 1. 插值 ## 1.1. 文本 ``` //使用双大括号形式 <span>Message: {{ msg }}</span> //使用v-once会只执行一次,不会被更新 <span v-once>这个将不会改变: {{ msg }}</span> ``` ## 1.2. 原始HTML 双大括号会将数据解释为纯文本,如果想要输出纯html则需要使用v-html ``` //rawnhtml内容: <sapn style="color:red"> 样式生效则为红色 </span> //两种不同的使用方法 <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> ``` 使用双大括号 <sapn style="color:red"> 样式生效则为红色 </span> 使用v-html指令,文字显示为红色 样式生效则为红色 注意,使用v-html的时候要注意xss攻击,只对可信内容使用v-html ## 1.3. 特性 双大括号语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令: ``` //使用v-bind 在html的特性上 <div v-bind:id="dynamicId"></div> //下面这种写法,是不存在的 <div id="{{ dynamicId }}"></div> ``` ## 1.4. 使用js表达式 支持单个表达式 ``` {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} //带有变量的字符串拼接 <div v-bind:id="'list-' + id"></div> ``` 下面列子不会生效 ``` <!-- 这是语句,不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效,请使用三元表达式 --> {{ if (ok) { return message } }} ``` # 2. 指令 指令 (Directives) 是带有 v- 前缀的特殊属性 # 3. 缩写 ## 3.1 v-bind 缩写 ``` <!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> ``` ## 3.2. v-on 缩写 ``` <!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> ```
标签:
上一篇:
vue笔记13-vue中使用echarts
下一篇:
vue笔记2-计算属性和观察者
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
letsencrypt证书-管理工具certbot
centos7.3配置guacamole
golang笔记---关联数组(map)
golang笔记---template模板语法
nginx笔记-proxy_cache缓存详解
友情链接
node文件
laravel-vue
ArcherWong的博客园