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
  • 相关阅读:
    flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array
    为什么引入进程20年后，又引入线程？
    As of Flume 1.4.0, Avro is the default RPC protocol.
    Google Protocol Buffer 的使用和原理
    Log4j 2
    统一日志 统一订单
    网站行为跟踪 Website Activity Tracking Log Aggregation 日志聚合 In comparison to log-centric systems like Scribe or Flume
    Percolator
    友盟吴磊：移动大数据平台的架构、实践与数据增值
    Twitter的RPC框架Finagle简介
  • 原文地址：https://www.cnblogs.com/xiao-xue-di/p/9703354.html
Copyright © 2011-2022 走看看