zoukankan      html  css  js  c++  java

  • vue之指令

    vue之指令

    一、什么是VUE？

    它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）

    二、怎么使用VUE？

    1、引入vue.js

    2、展示HTML

    <div id="app">
    <p>{{msg}}</p>
    <p>{{ 80+2 }}</p>
    <p>{{ 20>30 }}</p>
    <h1 v-text="msg"></h1>
    <h1 v-html="hd"></h1>
    <h1 v-html="str"></h1>
</div>

    3、建立一个vue对象

    <script>
    new Vue({
        el:"#app",  //表示当前这个元素开始使用vue
        data:{
            msg:"你好啊",
            hd:"<input type='button' value='啦啦'>",
            str:"你妹的"
        }
    })
</script>

    三、数据绑定

    1、插入文本{{ }}。如上例，也可以放表达式

    2、插入html：v-html

     

    四、vue的指令

    指令：是带有v-前缀的特殊属性，通过属性来操作元素

    1、v-text：在元素当中插入值

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app" v-text="str"> </div>
<div id="app1">{{str}}</div>


<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的


    new Vue({
        el: '#app',
        data: {
            str: 'hello vue'
        }
    });
    new Vue({
        el: '#app1',
        data: {
            str: 'hello vue'
        }
    })

</script>

</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <p>{{ 80+2 }}</p>
    <p>{{ 20>30 }}</p>
    <h1 v-text="msg"></h1>
    <h1 v-html="hd"></h1>
    <h1 v-html="str"></h1>
</div>
<script>
    new Vue({
        el:"#app",  //表示当前这个元素开始使用vue
        data:{
            msg:"你好啊",
            hd:"<input type='button' value='啦啦'>",
            str:"你妹的"
        }
    })
</script>
</body>
</html>

示例
    View Code

    2、v-html：在元素当中不仅可以插入文本，还可以插入标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app" v-html="string"> </div>
<div id="app1" v-html="str"></div>


<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的


    new Vue({
        el: '#app',
        data: {
            string: '<h1>hello</h1>'
        }
    });
    new Vue({
        el: '#app1',
        data: {
            str: 'hello vue'
        }
    })

</script>

</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h1>问卷调查</h1>
    <form action="" method="post">
        <input type="checkbox">香蕉
        <input type="checkbox">苹果
        <input type="checkbox">橘子
        <input type="checkbox"  @click="qita">其他
        <div v-html="htmlstr" v-show="test"></div>
    </form>
</div>
<script>
    new Vue({
        el:"#app",  //表示当前这个元素开始使用vue
        data:{
            htmlstr:'<textarea></textarea>',
            test:false  //默认是隐藏的
        },
        methods:{
            qita:function () {
                this.test = !this.test  //当一点击其他的时候让显示
            }
        }

    });

</script>

</body>
</html>

示例
    View Code

    3、v-if和v-else：根据表达式的真假值来动态插入和移除元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app">

    <div v-if="role=='var'">
        <h1>美女</h1>
    </div>
    <div v-else-if="role == 'vvar'">
        <h1>男</h1>
    </div>
    <div v-else>
        <h1>不</h1>
    </div>


</div>


<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的


    new Vue({
        el: '#app',
        data: {
            role: 'var'
        }
    });

</script>

</body>
</html>
    View Code

    4、v-show：根据表达式的真假值来显示和隐藏元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="pick">我是海燕</p>
    <p v-show="temp">呼啦啦呼啦啦</p>
    <p v-show="ok">你喜欢我吗?</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",  //表示当前这个元素开始使用vue
        data:{
//           pick:true  //显示
           pick:false,   //移除，用注释给替换了
//            temp :true ,  //显示
           temp :false,   //隐藏
           ok:true
        }
    });
    window.setInterval(function() {
        vm.ok =! vm.ok;
    },1000)  //1000代表1秒
</script>

</body>
</html>

if-show示例
    if-show

    5、v-for：根据变量的值来循环渲染元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app">

    <ul>
        <li v-for="like in hobby">{{ like }}</li>
    </ul>

    <ul>
        <li v-for="student in students">姓名：{{student.name}} <br> 年龄：{{student.age}}</li>
    </ul>

</div>


<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的

    new Vue({
        el: '#app',
        data: {
            hobby: ['抽烟', '喝酒', '烫头'],
            students: [
                {
                    name: '张三',
                    age: 2,
                },
                {
                    name: '李四',
                    age: 2,
                }
            ]
        }
    })


</script>

</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="item in arr">   <!-- 对一个数组的循环 -->
               {{ item }}
           </li>
       </ul>
         <ul>
           <li v-for="(item,index) in arr">
               {{ item }}:{{index}}
           </li>
       </ul>
         <ul>
           <li v-for="item in obj">
               {{ item }}
           </li>
       </ul>
          <ul>
           <li v-for="(item,key,index) in obj">
               {{ item }}:{{ key }}:{{ index }}
           </li>
       </ul>
          <ul>
           <li v-for="item in obj2">
               {{ item.username }}
               {{ item.age }}
               {{ item.sex }}
           </li>
       </ul>
        <div v-for="i in 8">  <!--循环8次，打印1 2 3 4 5 6 7 8 -->
            {{ i }}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arr:[11,22,33,34],
                obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
                obj2:[
                    {username:"jason"},
                    {age:20},
                    {sex:"male"}
                ]
            }
        })
    </script>
</body>
</html>
    View Code

    6、v-on：监听元素事件，并执行相应的操作

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: red;
        }

    </style>
</head>
<body>

<div id="app">

     <!--v-bind是可以省略的-->
    <h1 :class="{ active: isActive }">55555</h1>
    <button @click="changeColor">点击</button>

</div>


<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的

    new Vue({
        el: '#app',
        data: {
            isActive: false,
        },
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive;
            }
        }
    });

</script>

</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="item in arr">   <!-- 对一个数组的循环 -->
               {{ item }}
           </li>
       </ul>
         <ul>
           <li v-for="(item,index) in arr">
               {{ item }}:{{index}}
           </li>
       </ul>
         <ul>
           <li v-for="item in obj">
               {{ item }}
           </li>
       </ul>
          <ul>
           <li v-for="(item,key,index) in obj">
               {{ item }}:{{ key }}:{{ index }}
           </li>
       </ul>

        <input type="button" value="点我吧" v-on:click="show()">
        <input type="button" value="点我吧" @click="show()">

        <!--以下三种方式都可以-->
        <a href="http://www.baidu.com">我想去百度</a>
        <a v-bind:href="url">我想去百度</a>
        <a :href="url">我想去百度</a>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arr:[11,22,33,34],
                obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
                str:"我来了",
                url:"http://www.baidu.com"
            },
            methods:{
                show:function () {
                    alert(123);
                    alert(vm.str);
//                    alert(this.str)  //如果没有vm,就直接用this
                }
            }
        })
    </script>
</body>
</html>
    View Code

    7、v-bind：绑定元素的属性并执行相应的操作

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .bk_1{
             200px;
            height: 200px;
            background-color: silver;
        }
        .bk2_2{
              200px;
            height: 200px;
            background-color: darkorange;
        }
       .bk_3{

            border: 5px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" v-bind:title="msg">腾讯</a>   <!--绑定标题-->
        <a href="http://www.baidu.com" title="啦啦啦">点我</a>   <!--绑定标题-->
        <div v-bind:class="bk"></div>
        <div v-bind:class="bk2"></div>

        <div :class="{bk_1:temp,bk_3:temp}">加油,吧</div>  <!-- #temp一定是一个布尔值，为true是就使用bk_2,为false就不为他-->
        <div :class="[bk2,bk3]"></div> <!--如果是多个类就用[bk1,bk2,],就显示两个类的样式-->
    </div>
    <script>
        var vm = new Vue({
            el:"#app",//表示在当前这个元素开始使用VUe
            data:{
                msg:"我想去腾讯上班",
                bk:"bk_1",
                bk2:"bk2_2",
                bk3:"bk_3",
//                temp: false,
                temp: true
            }
        })
    </script>
</body>
</html>
    View Code

    8、v-model：把input的值和变量绑定了，实现了数据和视图的双向绑定

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: red;
        }

    </style>
</head>
<body>

<div id="app">

    <!--v-bind是可以省略的-->
    <input type="text" v-model="name">
    <input type="checkbox" value="男" v-model="gender">
    <input type="checkbox" value="女" v-model="gender">
    <select v-model="girls">
        <option>11</option>
        <option>22</option>
        <option>33</option>
    </select>

    <textarea></textarea>

    <hr>
    {{ name }}
    {{ gender }}
    {{ girls }}
</div>


<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的

    new Vue({
        el: '#app',
        data: {
            name: 'ward',
            gender: [],
            girls: [],
        },
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive;
            }
        }
    });

</script>

</body>
</html>
    View Code
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg">
    <input v-model="msg" value="this is test">
    <p>{{msg}}</p>
    <input type="button" value="变化" @click="change">
</div>
<script>
    new Vue({
        el:"#app",  //表示当前这个元素开始使用vue
        data:{
//            msg:"",
            msg:"aaaaa"
        },
        methods:{
            change:function () {
                this.msg=512
            }
        }
    });

</script>

</body>
</html>

示例1
    View Code

    9、对数组的操作

        - push  #从末尾添加
    - pop  #从末尾删除
    - shift #从头添加
    - unshift #从头删除
    - splice #删除元素。splice(index,1)  #删除这个索引的那一个
    - reverse  #反转

     

    10、指令修饰符

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: green;
        }
    </style>
</head>
<body>

    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>学科</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python</td>
                    <!--将进行数据的计算，不用number这个修饰符将会进行字符串的拼接-->
                    <td><input type="text" v-model.number.lazy="python"/></td>
                </tr>
                <tr>
                    <td>Vue</td>
                    <!--失去焦点后计算-->
                    <td><input type="text" v-model.lazy="vue"/></td>
                </tr>
                <tr>
                    <td>Go</td>
                    <!--trim去掉左右两边的空白格-->
                    <td><input type="text" v-model.trim="go"/></td>
                </tr>
                <tr>
                    <td>总成绩</td>
                    <td>{{ sumScore }}</td>
                </tr>
            </tbody>
        </table>
        <hr>
        {{ python }}
        {{ vue }}
        {{ go }}
        {{ sumScore }}
    </div>

    <script>
        // 数据模板引擎
        // v-开头的指令是帮助我们渲染数据用的
        let vm = new Vue({
            el: "#app",
            data: {
                python: 88,
                vue: 100,
                go: 65
            },
            computed: {
                sumScore: function () {
                    console.log(1);
                    return this.python + this.vue + this.go;
                },
            },
            watch: {
                python: function () {
                    return this.python + 1;
                }
            }
        })
    </script>

</body>
</html>
    View Code

    11、指令获取DOM元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
           color: red;
        }
        .a {
           color: #b2dba1;
        }

    </style>
</head>
<body>

<div id="app">
    <div ref="myRef" class="a">Peiqi</div>
    <!--<button v-on:click="changeColor">点击</button>-->
    <button @click="changeColor">点击</button>

</div>

<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的

    new Vue({
        el: '#app',
        data: {
            bd: 'https://www.baidu.com/',
            isActive: 'active'
        },
        methods: {
            changeColor: function () {
                console.log(this);
                // 将class中的东西都覆盖掉了
                this.$refs.myRef.className = this.isActive;
            }
        }
    });

</script>

</body>
</html>
    View Code

    12、指令计算属性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: red;
        }

    </style>
</head>
<body>

    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>学科</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python</td>
                    <td><input type="text" v-model="python"/></td>
                </tr>
                <tr>
                    <td>Vue</td>
                    <td><input type="text" v-model="vue"/></td>
                </tr>
                <tr>
                    <td>Go</td>
                    <td><input type="text" v-model="go"/></td>
                </tr>
                <tr>
                    <td>总成绩</td>
                    <td>{{ sumScore }}</td>
                </tr>
            </tbody>
        </table>
        <hr>
        {{ python }}
        {{ vue }}
        {{ go }}
        {{ sumScore }}
    </div>


<script>

    //数据模板引擎
    //v-开头的指令是帮助我们来渲染数据用的

    new Vue({
        el: '#app',
        data: {
            python: 99,
            vue: 100,
            go: 98,
        },
        computed: {
            sumScore: function () {
                return this.python + this.vue + this.go
            },
        },
        // 为了解耦
        watch: {
          python: function () {
              return this.python + 1
          }
        },
        // 事件对应的函数
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive;
            }
        }
    });

</script>

</body>
</html>
    View Code

     

    五、自定义指令

     

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    <style>
        .box {
             100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div id="app">
        <div v-bind:class="{ box: isShow}" v-pos.right.bottom="leftBottom">Hello Vue!</div>
    </div>

    <script>
        // 数据模板引擎
        // v-开头的指令是帮助我们渲染数据用的

        Vue.directive("pos", function (el, bindding) {
            console.log("el: ", el);
            console.log("bindding: ", bindding);
            if (bindding.value) {
                el.style['position'] = 'fixed';
                for (let key in bindding.modifiers) {
                    el.style[key] = 0;
                }
                // el.style['right'] = 0;
                // el.style['bottom'] = 0;
            }
        });

        let vm = new Vue({
            el: "#app",
            data: {
                leftBottom: true,
                isShow: true,
            },
        })
    </script>

</body>
</html>
    View Code

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-focus>
</div>
<script>
       new Vue({
            el:"#app",
            data:{

            },
           directives:{ //directives定义指令的
                focus:{   //focus指令的名字
                    inserted:function (els) {    //els绑定的这个元素
                        //inserted当绑定的这个元素  <input type="text" v-focus>显示的时候，
                        els.focus();  //获取焦点的一个方法，和以前的时候是一样的
                        els.style.backgroundColor="blue";
                        els.style.color='#fff'
                    }
                }
           }
        })
    </script>
</body>
</html>
    View Code

    六、Vue过滤器

    过滤器是在数据到达用户的最后一步进行简单的过滤处理，复杂的还是要用计算属性或者方法。

    // 我们两个需求 一个是价格展示后面自动加“元”
//  单位 毫米和米的转换
// HTML页面
<div>
        <p>价格展示</p>
        <input type="text" v-model="price">
        {{price | currency('USD')}}
</div>
<div>
        <p>换算</p>
        <input type="text" v-model="meters">
        {{meters | meter}}
 </div>
// js 代码
Vue.filter('currency', function (val, unit) {
    val = val || 0;
    var ret = val+ unit
    return ret
});

Vue.filter('meter', function (val) {
    val = val || 0;
    return (val/1000).toFixed(2) + "米"
});
new Vue({
    el: '#app',
    data: {
        price: 10,
        meters: 10,
    }
});

过滤器 filter
    View Code

    七、实现tag切换的小示例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid cornflowerblue;
            height: 50px;
             200px;
            background: cornflowerblue;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>

<body>
<div id="mybox">
    <ul>
        <li><span v-on:click="qh(true)">二维码登录</span></li>
        <li><span v-on:click="qh(false)">邮箱登录</span></li>
    </ul>
    <div v-if="temp">
        <img src="erweima.png" alt="">
    </div>
    <div v-if="!temp">  <!--取反-->
        <form action="http://mail.163.com" method="post">
            <!--method是为了安全   ，action：提交的地址-->
            <p>邮箱：<input type="email"></p>
            <p>密码：<input type="password"></p>
            <p><input type="submit" value="登录"></p>
        </form>
    </div>
</div>
<script>
    new Vue({
        el:"#mybox",  //表示当前这个元素开始使用vue
        data:{
            temp:true
        },
        methods:{
            qh:function (t) {
                this.temp=t
            }
        }
    })
</script>
</body>
</html>
    View Code
  • 相关阅读:
    Vuejs
    Vuejs
    Vuejs
    Vuejs
    JS高级之面试必须知道的几个点
    用vue快速开发app的脚手架工具
    作为一名前端开发工程师，你必须掌握的WEB模板引擎：Handlebars
    REST接口设计规范总结
    eclipse实现JavaWeb应用增量打包
    转载：作为面试官，我是怎么快速判断程序员能力的？
  • 原文地址：https://www.cnblogs.com/xiao-xue-di/p/9703354.html
Copyright © 2011-2022 走看看