Vue.js-指令系统

Vue.js 指令系统

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

在双大括号内可以写一些简单的逻辑处理，但一般不写。

常用指令

指令以v-开头，用来操作标签的文本值，操作标签的属性，绑定事件

操作标签的文本值

v-text: 渲染文本值
v-html: 渲染原始标签
v-for: ，注意 v-bind:key=数据唯一值、优先级高
v-if, v-else-if, v-else: 判断标签是否显示
1. 只渲染出需要显示的页面，用appendChild, appendChild, 实现
v-show：判断标签是否显示
1. 渲染出所有页面，用display实现
2. v-show与v-if
  1. 渲染的开销,v-if低，v-show高
  2. 切换的开销，v-if高，v-show低

操作标签的属性（class，href，src）

v-bind:href=""
v-bind:class=""

简写 :

将标签的某个属性与Vue实例里的数据属性绑定

绑定事件 methods

v-on:click="myClick"
绑定事件，必须要有一定的触发条件才能执行，如点击事件
只要发生重新渲染，method 调用总会执行该函数

注意：属性通过vue绑定的时候，必须加上冒号

简写 @

计算属性 computed

可以监听多个值（只要数据修改，就触发重新计算）
HTML DOM加载后马上执行的，如赋值；
computed计算属性是基于它们的依赖进行缓存的，computed只有在它的相关依赖发生改变时才会重新求值

侦听属性 watch

它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

methods与computed区别

方法，每次都执行

计算属性，计算属性的数据没变就直接使用之前的结果

computed与watch区别

侦听器适用于那些

当某个值发生变化之后，我就要做什么事情这种场景！

其他的场景都用计算属性就可以了

双向数据绑定

v-model，双向数据绑定获取用户输入的标签 <==> Vue实例里的数据属性

指令修饰符

v-model.number 输入格式化为数字
v-model.lazy 延迟加载
v-model.number.lazy 输入格式化为数字且延迟加载

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./static/vue.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box" v-pos="flag"></div>
</div>

<script>
    // directive就是vue实现指令系统的后台的功能函数
    Vue.directive("pos", function (el, binddings) {
        if (binddings.value === true) {
            el.style.position = 'fixed';
            el.style.bottom = '0';
            el.style.left = '0';
        }
    });
    new Vue({
        el: '#app',
        data: {
            flag: true,
        },
    });

</script>
</body>
</html>

获取DOM源


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./static/vue.js"></script>
</head>
<body>
<div id="app">
    <div ref="myRef"><h2>hahha</h2></div>
    <button @click="changeColor">变绿</button>
</div>

<script>
    new Vue({
        el: "#app",
        methods: {
            changeColor: function () {
                this.$refs.myRef.style.color = 'green';
            }
        }

    });
</script>
</body>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./static/vue.js"></script>
</head>
<body>
<div id="app">
    <img :src="imgAry[cur]" alt="" style="height: 150px;">
    <br>
    <button v-on:click="pre">上一张</button>
    <button v-on:click="next">下一张</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            imgAry: ['./images/timg.jpg', './images/timg2.jpg', './images/timg3.jpg'],
            cur: 0,
        },
        methods: {
            pre: function () {
                if (this.cur === 0) {
                    this.cur = this.imgAry.length - 1;
                } else {
                    this.cur--;
                }
            },
            next: function () {
                if (this.cur === this.imgAry.length - 1) {
                    this.cur = 0;
                } else {
                    this.cur++;
                }
            },

        }
    })
</script>
</body>
</html>

小清单 todolist

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小清单</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="./static/vue.js"></script>
    <style>
        .doneColor {
            color: green;
        }

        .doneLine {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div id="todoList" class="container">
    <div class="row " style="margin-top: 50px">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">小清单</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入待办事项..." v-model="todo.title">
                                <span class="input-group-btn">
                                    <button class="btn btn-success" type="button" v-on:click="add"><span
                                            class="glyphicon glyphicon-plus"></span></button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <ul class="list-group">
                        <li class="list-group-item" v-for="(val,index) in todoList" :key="index">
                            <span class="glyphicon glyphicon-ok-sign"
                                  v-bind:class="{doneColor : val.status }" v-on:click="complete(index)"></span>
                            <span v-bind:class="{doneLine:val.status }">{{ val['title'] }}</span>
                            <span class="glyphicon glyphicon-remove-sign pull-right" v-on:click="del(index)"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    let app = new Vue({
        el: '#todoList',
        data: {
            todo: {'title': '', 'status': false},
            todoList: [
                {'title': '吃饭', 'status': true},
                {'title': '睡觉', 'status': false},
                {'title': '洗澡', 'status': false},
            ]
        },
        methods: {
            add() {
                if (this.todo.title.trim() === '') {
                    return
                }
                this.todoList.push(this.todo);
                this.todo = {'title': '', 'status': false};
            },
            complete(index){
                this.todoList[index].status=true;
            },
            del(index){
                this.todoList.splice(index,1);
            }
        }
    })

</script>
</body>
</html>

posted @ 2019-08-16 16:05 写bug的日子阅读(112) 评论(0) 编辑收藏举报

刷新页面返回顶部

写bug的日子