模板语法:
以下写法是正确的写法
<span>{{ msg }}</span>
<div>
//一元运算符
<p>hello {{`world + '!'`}} </p>
//模板字符串
<p>{{`hello${world}!`}} </p>
//三元运算符
<p>{{ true ? 'yes' : 'no' }}</p>
//字符串操作
<p>{{ message.split('').reverse().join('') }}</p>
</div>
指令:
v-text
<span v-text="msg"></span>
//和下面一样
<span>{{msg}}</span>
v-html
为了输出真正的HTML,你需要使用v-html指令,可以类比js的innerHtml属性:
<div v-html="rawHtml"></div>
这个div的内容将会被替换成属性值rawHtml,直接作为html进行渲染。
值得注意的是,在网站上动态渲染任意HTML是非常危险的,因为容易导致XSS攻击。
v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程,可以用来显示原始的标签。
<div>
<span v-pre>{{message}}</span>
<span>{{message}}</span>
</div>
第一个span里的内容不会被编译显示为{{message}},第二个span里面的内容会被编译,显示为hello world。
v-cloak:
使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变量名。
案发现场的 HTML 代码
<ul v-for="item in items">
<li>{{ item.name }}</li>
</ul>
页面加载时,会闪现
{{ item.name }}
v-cloak 可以解决这个问题,非常简单
HTML 修改成
<ul v-cloak v-for="item in items">
<li>{{ item.name }}</li>
</ul>
CSS 中添加
[v-cloak] {
display: none;
}
v-once:
v-once在日常开发中用的很多,只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。
<section id="content">
插值:
<p id="Mustache">{{msg}}</p>
<p>v-once:当数据改变时,插值处的内容不会更新</p>
<span v-once>{{msg}}</span>
</section>
v-if
<template v-if="ok">
<h1>title</h1>
<p>title</p>
</template>
//v-else
<a v-if="ok">yes</a>
<a v-else>no</a>
//v-else-if
<div id="app5">
<div v-if="status == 'loading'">
<div style="background-color:blue">loading</div>
</div>
<div v-else-if="status === 'success'">
<div style="background-color:green">success</div>
</div>
<div v-else="status == 'fail'">
<div style='background-color:red'>fail</div>
</div>
</div>
v-show
<p v-show="ok">v-show</p>
v-for
<ul>
<li v-for="tab in tabs">
{{ tab.text }}
</li>
</ul>
v-for也可以用在template中
对象遍历属性
<ul id="vfor">
<template v-for="item in object">
<li v-bind:key="item.id">{{item}}</li>
<li v-bind:key="item.id">-------</li>
</template>
</ul>
为了提高vue更新DOM的性能,你需要为每一项提供一个唯一的key属性,有了相同父元素的子元素必须有独特的key, 重复的key会造成渲染错误。