1. v-bind
One-way binding analysis expression, v-bind: xxx is abbreviated as : xxx
单向数据绑定:<input type="text" :value="name">
Two, v-model
Two-way data binding , v-model: xxx abbreviated v-model
双向数据绑定:<input type="text" v-model="name">
Three, v-for
Traverse arrays, objects, strings;
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{
{p.name}}-{
{p.age}}-{
{p.sex}}
</li>
</ul>
Four, v-on
Binding event listener , which can be abbreviated as @ , for example: @click="..."
五、v-if、v-else-if、v-else
Conditional rendering ( dynamically control whether the node exists )
<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>
Six, v-show
Conditional rendering (dynamically control whether the node is displayed )
<div v-show="n===1">html</div>
<div v-show="n===2">css</div>
<div v-show="n===3">js</div>
Seven, v-text
Render text content to the node it is in
The difference with the interpolation syntax: if there is content in the text , the original content will be replaced , but the interpolation syntax will not
<h2 v-text="text"></h2>
ps: text is a variable defined in new Vue
Eight, v-html
Can render the content of the html structure to the specified node , similar to v-text, can replace all existing content of the node
The following example structure is equivalent to: <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>"
}
})
There are security issues:
(1) Arbitrary rendering of html structures on the website is dangerous and can easily lead to xss attacks ;
(2) It must be used on credible websites , and never used on content submitted by users ;
cookie:
It is used to save personal information such as user accounts , and it is very important information to be able to log in to a user's account in other browsers by obtaining cookies;
Nine, v-cloak
This attribute has no value , and will be automatically destroyed when the vue instance takes over the container , and it is used to prevent the vue code from being directly displayed on the page with the css style;
<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>
10. v-once
This attribute has no value , and the node with v-once set will become static content after the first dynamic rendering , and subsequent data changes will not affect the content of v-once ;
The first n in the following example sets v-once, which is always equal to 1 ; the second n does not set v-once, and it will gradually increase with the click of the button ;
<div id="root">
<h3 v-once>n的初始值为:{
{n}}</h3>
<h3>n的实时变化值为:{
{n}}</h3>
<button @click="n++">点我实现n+1</button>
</div>
Eleven, v-pre
Acting on static content , it is used to skip parsing and speed up compilation;
<div id="root">
<h2 v-pre>这个部分没有用到vue语法,不需要解析</h2>
<!-- 如果给下面的语句加v-pre,就会跳过而无法解析 -->
<h2>{
{text}}</h2>
</div>