built-in directives in vue

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>