一、v-bind
单向绑定解析表达式,v-bind:xxx简写为:xxx
单向数据绑定:<input type="text" :value="name">
二、v-model
双向数据绑定,v-model:xxx简写v-model
双向数据绑定:<input type="text" v-model="name">
三、v-for
遍历数组、对象、字符串;
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{
{p.name}}-{
{p.age}}-{
{p.sex}}
</li>
</ul>
四、v-on
绑定事件监听,可简写为@,例:@click="..."
五、v-if、v-else-if、v-else
条件渲染(动态控制节点是否存在)
<div v-if="n===1">html</div>
<div v-else-if="n===2">css</div>
<div v-else-if="n===3">js</div>
<div v-else>hhhh</div>
六、v-show
条件渲染(动态控制节点是否展示)
<div v-show="n===1">html</div>
<div v-show="n===2">css</div>
<div v-show="n===3">js</div>
七、v-text
向其所在的节点中渲染文本内容
与插值语法的区别:如果文本中原本存在内容,则会替换掉原本的内容,而插值语法不会
<h2 v-text="text"></h2>
ps:text是new Vue中定义的一个变量
八、v-html
能够向指定节点中渲染html结构的内容,与v-text类似,都能够替换节点已存在的所有内容
下面例子结构相当于:<h3><a>...</a></h3>
<div id="root">
<h3 v-html="text"></h3>
</div>
new Vue({
el:"#root",
data:{
text:"<a href='http://www.baidu.com'>点我跳转到百度<a>"
}
})
存在安全性问题:
(1)在网站上任意渲染html结构是危险的,容易导致xss攻击;
(2)一定要在可信的网站上才使用,永远不要用在用户输入提交的内容上;
cookie:
用于保存用户账号等个人信息,获取cookie就能够在其他浏览器登录某一个用户的账号,是非常重要的信息;
九、v-cloak
该属性没有值,会在vue实例接管容器的一瞬间自动销毁,配合css样式用于防止vue代码直接显示在页面上;
<style>
[v-cloak]{
/* 当vue实例未接管节点时,所设置的v-cloak属性存在,display为none,实现将vue原代码隐藏的功能 */
display: none;
}
</style>
<div id="root">
<!-- 当vue实例解析完毕接管节点,v-cloak瞬间销毁,display不等于none,就可以显示在页面上 -->
<h2 v-cloak>{
{name}}</h2>
</div>
十、v-once
该属性没有值,设置了v-once的节点在初次动态渲染后就会成为静态内容,之后数据的改变不会影响v-once的内容;
下面例子的第一个n设置了v-once,一直都等于1;第二个n没有设置v-once,会随着按钮的点击逐渐增加;
<div id="root">
<h3 v-once>n的初始值为:{
{n}}</h3>
<h3>n的实时变化值为:{
{n}}</h3>
<button @click="n++">点我实现n+1</button>
</div>
十一、v-pre
作用于静态内容,用于跳过解析,加快编译速度;
<div id="root">
<h2 v-pre>这个部分没有用到vue语法,不需要解析</h2>
<!-- 如果给下面的语句加v-pre,就会跳过而无法解析 -->
<h2>{
{text}}</h2>
</div>