Vue指令

一，Vue框架介绍

Vue是一个构建数据驱动的web界面的渐进式框架。

目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

能够构建复杂的单页面应用。

// HTML 页面
<div id="app">
    <span>你的名字是{{name}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>

// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        name: "ggg"
    }
});

二，Vue指令

Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，

它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。

1，v-text v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <h1 v-text="name"></h1>
    <div v-html="html"></div>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "glh",
            html: `<h3>${this.name}</h3>`
        }
    })
</script>

</body>
</html>
v-text v-html

2, v-model :  input, select, textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label for="name">用户名:</label>
    <input type="text" v-model="name" id="name" >{{name}}
    <label for="gender">男</label>
    <input type="radio" v-model="gender" id="gender" value="1">
    <label for="gender1">女</label>
    <input type="radio" v-model="gender" id="gender1" value="2"> {{gender}}

    <hr>
    <input type="checkbox" value="男" v-model="gender">男
    <input type="checkbox" value="女" v-model="gender">女
    <input type="checkbox" value="保密" v-model="gender">保密
    {{gender}}
    <hr>
    <select name="" id="" v-model="gender" multiple>
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">保密</option>
    </select>
    {{gender}}
    <hr>
    <textarea name="" cols="30" rows="10" v-model="article"></textarea>
    {{article}}
    <input type="text" v-model.trim.lazy="name">  <!-- 修饰符 -->
    <input type="text" v-model.number="name"> {{typeof name}}
    <pre>{{name}}</pre>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            name:"",
            gender: [],
            article: "文章文章文章文章文章文章文章文章文章文章文章文章文章"
        }
    })
</script>
</body>
</html>
View Code

3, v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>爱好</h2>
    <div>
        <ul>
            <li v-for="hobby in hobby_list">{{hobby}}</li>
        </ul>
    </div>
    <h2>学生列表</h2>
    <p v-for="obj in student_list">姓名：{{obj.name}}, 年龄：{{obj.age}}</p>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            hobby_list:["妹子1", "妹子2", "妹子3"],
            student_list: [
                {name: "胡大炮", age: 18},
                {name: "胡小炮", age: 8},
                {name: "觉先生", age: 28},
            ]
        }
    })
</script>
</body>
</html>
View Code

4,v-if, v-else-if, v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3 v-if="role == '会员'">会员</h3>
    <h3 v-else-if="role == '白金会员'">白金会员</h3>
    <h3 v-else="role == '白金会员'">员工</h3>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            role: "会员"
        }
    })
</script>
</body>
</html>
View Code

5, v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box" v-show="is_show"></div>
    <button v-text="btn_text" @click="my_click"></button>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            is_show:true,
            btn_text:"隐藏"
        },
        methods: {
            my_click: function () {
                this.is_show = ! this.is_show;
                if (this.is_show){
                    this.btn_text = "隐藏"
                }else {
                    this.btn_text = "显示"
                }
            }
        }
    })
</script>
</body>
</html>
View Code
v-show 是控制元素的display属性
v-if等 是动态的appendchild的方式

6,v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .my_style{
            text-decoration: none;
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <a v-bind:href="link">Go</a>
    <a :href="link" :class="{my_style: isActive}">Go1</a>
    <div :test="name">{{name}}</div>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            link: "https://www.baidu.com/",
            isActive: true,
            name: ["胡达帕", "湖兄炮", "觉先生"],
        }
    })
</script>
</body>
</html>
View Code

7,v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="my_click">按钮</button>
    <button @click="my_click">按钮</button>
    <button @click="my_click" @mouseenter="my_mouseenter" @mouseleave="my_mouseleave">按钮</button>
    <button v-on="{click:my_click,mouseenter:my_mouseenter, mouseleave:my_mouseleave}">按钮</button>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
        },
        methods: {
            my_click: function () {
                console.log("点我了")
            },
            my_mouseenter: function () {
                console.log("移入")
            },
            my_mouseleave: function () {
                console.log("移出")
            }
        }
    })
</script>
</body>
</html>
View Code

8,指令修饰符

//  我们现在要获取用户的注册信息
//  用户名以及手机号 用指令修饰符能够让我们更加便捷
// HTML 页面
<div>
    用户名: <input type="text" v-model.lazy.trim="username"><br>
    {{username}}
    手机号: <input type="text" v-model.number="phone"><br>
    {{phone}}
</div>
// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        username: "",
        phone: "",
    },
});
View Code

三，自定制Vue指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: solid 2px black;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box" v-my_cmd.right.top="fix"></div>
    <button @click="my_click">点我定位</button>
</div>

<script src="../vue.js"></script>
<script>
    // directive中第一个是指令名称，第二个是函数，函数右两个参数
    Vue.directive("my_cmd", function (el, bindding) {
        console.log(el);  // 指令作用的元素
        console.log(bindding); // obj 包含指令信息的对象
        if (bindding.value){   // value在这里就是我们的fix的值，也就是控制我们这个指令是否作用于的标签的值
            // el.style.position = "fixed";
            // el.style.right = 0;
            // el.style.bottom = 0;

            el.style.position = "fixed";
            for(let key in bindding.modifiers){
                el.style[key] = 0  // key就是指令中的位置
            }
        }else{
            el.style.position = "static"
        }

    });
    const app = new Vue({
        el: "#app",
        data: {
            fix: false
        },
        methods: {
            my_click: function () {
                this.fix = ! this.fix
            }
        }
    })
</script>
</body>
</html>

四，Vue计算属性

我们的模板表达式非常的便利，但是逻辑复杂的时候，模板会难以维护，vue提供了计算属性。

我们用方法也能达到效果，那么我们为什么要用计算属性呢~

其实在vue中方法和计算属性达到的效果是一样的，但是计算属性是基于依赖进行缓存的，

只有依赖的数据发生改变的时候，才会重新执行计算属性的函数，每次调用都会从缓存中拿之前算好的数据。

而方法是每调用一次，执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>科目</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>语文</td>
            <td><input type="text" v-model.number="chinese"></td>
        </tr>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model.number="math"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model.number="english"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum_num}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{avg_num}}</td>
        </tr>
        </tbody>
    </table>

</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            chinese:80,
            math: 100,
            english: 100,
        },
        // 放在缓存  只有在数据改变的时候才更新
        computed:{
            sum_num:function () {
                return  this.chinese + this.math + this.english
            },
            avg_num:function () {
                return Math.round(this.sum_num/3)  // 取整
            }
        }
    })
</script>
</body>
</html>
计算属性

五，Vue获取DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div ref="my_box"></div>
    <div ref="my_box1"></div>
    <button @click="my_click">点我</button>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        methods: {
            my_click: function () {
                let ele = this.$refs.my_box;  // 获取dom
                let ele1 = this.$refs.my_box1;
                console.log(ele);
                ele.innerText = "hello world";
                ele.style.color = "red";
                ele1.innerText = "hahhahah";
                ele1.style.backgroundColor = "red";
            }
        }
    })
</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

ex，使用element_ul制作一个小清单操作：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 7     <style>
 8         .text {
 9             font-size: 14px;
10         }
11 
12         .item {
13             margin-bottom: 18px;
14         }
15 
16         .clearfix:before,
17         .clearfix:after {
18             display: table;
19             content: "";
20         }
21 
22         .clearfix:after {
23             clear: both
24         }
25 
26         .box-card {
27             width: 480px;
28         }
29 
30         .line {
31             text-decoration: line-through;
32             color: red;
33         }
34     </style>
35 </head>
36 <body>
37 <div id="app" style="margin-left: 500px">
38     <el-card class="box-card">
39         <div slot="header" class="clearfix">
40             <span>清单</span>
41             <input type="text" v-model="current.title">
42             <el-button style="float: right; padding: 3px 0" type="text" @click="my_click">添加</el-button>
43         </div>
44         <div v-for="(obj, index) in data_list" v-if="obj.title != ''" :key="index" class="text item" :class="{line: obj.is_show}" @click="click_event(index)">
45             <el-alert :title="obj.title" :key="index" type="success" show-icon @close="my_close(index)"></el-alert>
46         </div>
47     </el-card>
48     {{data_list}}
49     </div>
50 <script src="../vue.js"></script>
51 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
52 <script>
53     const app = new Vue({
54         el: "#app",
55         data: {
56             current: {
57                 title: "",
58                 is_show: false
59             },
60             data_list: [],
61             is_show: false
62         },
63         methods: {
64             my_click: function () {
65                 let copy_current = Object.assign({}, this.current);
66                 this.data_list.unshift(copy_current)  // 使用对象的方式时，一定要注意，先深拷贝一份，不然每次修改的都是同一个对象
67             },
68             my_close:function (index) {
69                 this.data_list[index].title = ""  // 直接改为空字符串，然后在循环的时候判断一下，是否title有值，有值才渲染
70                 // this.data_list.splice(index, 1)  // 不适用这种方式，删除元素的话，数组的索引会发生改变，就会有bug
71             },
72             click_event:function (index) {
73                 this.data_list[index].is_show = true
74             }
75         }
76     })
77 </script>
78 </body>
79 </html>
数据 使用对象 完成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
        }

        .line {
            text-decoration: line-through;
            color: red;
        }
    </style>
</head>
<body>
<div id="app" style="margin-left: 500px">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>清单</span>
            <input type="text" v-model="current">
            <el-button style="float: right; padding: 3px 0" type="text" @click="my_click">添加</el-button>
        </div>
        <div v-for="(arry, index) in data_list" v-if="arry[0] != ''" :key="index" class="text item" :class="{line: arry[1]}" @click="click_event(index)">
            <el-alert :title="arry[0]" :key="index" type="success" show-icon @close="my_close(index)"></el-alert>
        </div>
    </el-card>
    {{data_list}}
    </div>
<script src="../vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            current: "",
            data_list: [],
            is_show: false
        },
        methods: {
            my_click: function () {
                this.data_list.unshift([this.current, false])
            },
            my_close:function (index) {
                this.data_list[index][0] = "";
                console.log(event);
                // 阻止事件冒泡
                event.stopPropagation();  // W3C标准的 不支持IE
                event.cancelBubble = true;  // 只支持IE
            },
            click_event:function (index) {
                console.log(666);
                this.data_list[index][1] = true
            }
        }
    })
</script>
</body>
</html>
数据 使用数组 完成

阻止事件冒泡的：

// 阻止事件冒泡
event.stopPropagation();  // W3C标准的 不支持IE
event.cancelBubble = true;  // 只支持IE

 

posted @ 2018-09-10 00:29  Mr.GLH  阅读(210)  评论(0)    收藏  举报
Top↑