vue指令大全

布满荆棘的人生 2021-09-16 13:14 522阅读 0赞

我之前学了学angular

发现angular和vue的指令有点类似

先说一下

new  Vue(\{

el: "\#box", // element（元素） 当前作用域

data()\{

return \{ //用return返回对象

msg: "122"

\})

首先是

**v-model双向绑定数据**

**v-for循环**

1 <div id="box">
     2     <ul>
     3         
     4         <li v-for="item in arr">
     5             <span>{
       {item.name}}</span>
     6             <span>{
       {item.age}}</span>
     7         </li>
     8     </ul>
     9 </div>
    10 <script type="text/javascript">
    11     new Vue({
    12         el:'#box',
    13         data(){
    14             return{
    15 //                arr:['module','views','controlle','aaaaa']
    16                 arr:[
    17                     {"name":"xiaohong1","age":12},
    18                     {"name":"xiaohong2","age":12},
    19                     {"name":"xiaohong3","age":12},
    20                     {"name":"xiaohong4","age":12}
    21                 ]
    22             }
    23         }
    24     })
    25 </script>

**v-show 显示与隐藏**

<div id="box">
        <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
    </div>
    </body>
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    show: true
                }
            }
        })
    </script>

**v-if显示与隐藏  （dom元素的删除添加   个人理解）**

<div id="box">
        <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    </div>
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    show: true
                }
            }
        })
    </script>

**v-else**

<div id="box">
        <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
        <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
    </div>
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    show: true
                }
            }
        })
    </script>

## v-else-if ##

<div id="box">
        <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
        <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
        <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
    </div>
    
    
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    show: true
                }
            }
        })
    </script>

## v-bind ##

<div id="box">
        <input type="text" v-bind:value="msg">
        <a :href="link">点击</a>
    </div>
    
    
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    msg: "12222",
                    link:"1、v-model.html"
                }
            }
        })
    </script>

**v-on 事件**

<div id="box">
        
        <button v-on:click="say">按钮</button>
        
    </div>
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {}
            },
            methods: {
                say() {
                    alert(111);
                }
            }
        })
    </script>

**v-text读取文本不能读取html标签**

1 <div id="box">
     2     <div v-text="msg"></div>
     3 </div>
     4 
     5 <script>
     6     new Vue({
     7         el: "#box",
     8         data(){
     9             return {
    10                 msg:"11111"
    11             }
    12         },
    13         methods: {
    14             say() {
    15                 alert(111);
    16             }
    17         }
    18     })
    19 </script>

**v-html  能读取html标签**

<div id="box">
        <div v-html="msg"></div>
    </div>
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    msg:"<h1>121212</h1>"
                }
            },
            methods: {
                say() {
                }
            }
        })
    </script>

**v-class 类名**

1 <style>
     2         .red {
     3 
     4             background: red;
     5         }
     6 
     7         .blue {
     8             width: 100px;
     9             height: 100px;
    10             background: blue;
    11         }
    12 
    13     </style>
    14 
    15 
    16 <div id="box">
    17     <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
    18         
    19     
    20 
    21 </div>
    22 
    23 
    24 <script>
    25     new Vue({
    26         el: "#box",
    27         data(){
    28             return {
    29                 isred:false
    30             }
    31         }
    32     })
    33 </script>

**v-style  与v-class用法大致一样  这个我就不写了**

**v-once  与我下边的例子  就是  加载一次  如果用到事件中就是事件只执行一次（****@click.once="show"****）**

<div id="box">
        <div v-once>{
       {msg}}</div>
    </div>
    
    
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data(){
                return{
                    msg:"qwdqwdqwd"
                }
            }
        })
    </script>

**v-cloak防闪烁**

<div id="box">
        <div v-cloak="">欢迎--{
       {msg}}</div>
    </div>
    
    
    <script>
        new Vue({
            el:"#box",
            data(){
                return{
                    msg:"111111"
                }
            }
        })
    </script>

![复制代码][copycode.gif]

**v-pre  把标签内部的元素原位输出**

![复制代码][copycode.gif]

<div id="box">
        <div v-pre>欢迎--{
       {msg}}</div>
    </div>
    
    
    
    <script>
        new Vue({
            el:"#box",
            data(){
                return{
                    msg:"111111"
                }
            }
        })
    </script>

#  接下来就是一个总结了 #

1 vue 是什么
     2 
     3 轻量级的javascript框架    
     4 
     5     特点：mvvm       m=mvc   module 模型   v=view 视图    c=controller  控制器
     6          mvvm       m=mvc   module 模型   v=view 视图     vm (视图与数据之间的传递)
     7          vue1 双向数据绑定   vue2 单向数据流
     8          单页面应用
     9 
    10 
    11 
    12 
    13 v-model   数据绑定
    14 data  返回对象用 return
    15 
    16 v-for   循环   格式  v-for="字段名 in(of) 数组json"
    17 
    18 v-show   显示 隐藏     传递的值为布尔值  true  false  默认为false
    19 
    20 v-if   显示与隐藏     和v-show对比的区别 就是是否删除dom节点   默认值为false
    21 
    22 v-else-if  必须和v-if连用
    23 
    24 v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误
    25 
    26 v-bind  动态绑定  作用： 及时对页面的数据进行更改
    27 
    28 
    29 
    30 v-on 绑定事件  函数必须写在methods里面
    31 @click  快捷方法
    32 
    33 v-text  解析文本
    34 
    35 v-html   解析html标签
    36 
    37 v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'
    38 
    39 v-once  进入页面时  只渲染一次 不在进行渲染
    40 
    41 v-cloak  防止闪烁
    42 
    43 v-pre  把标签内部的元素原位输出

[copycode.gif]: /images/20210726/c417f89b8d594b93ae92ea9bb5fc487d.png