Vue 渐进式 Js 框架(一):常见关键字的使用

chan 作者
阅读 246 喜欢 0

什么是 Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

官方网站:https://cn.vuejs.org/

MVVM 模式的实现者 —— 双向数据绑定模式

  • Model:模型层,在这里表示 JavaScript 对象
  • View:视图层,在这里表示 DOM(HTML 操作的元素)
  • ViewModel:连接视图和数据的中间件,Vue.js 就是 MVVM 中的 ViewModel 层的实现者

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
</head>
<body>
    <div class="app">
        {{message}}
        <input type="text" v-model="message">
    </div>
</body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: ".app",
        data: {
            message: "hello vue"
        }
    });
</script>
</html>

插值表达式

插值表达式的作用是在View中获得Model中的内容

<div class="app">
    {{message}}<br>
    <!--数组-->
    {{[1,2,3,4][0]}}<br>
    <!--对象-->
    {{ {name: "chan", age: 18}.name }}
    <!--方法-->
    {{say()}}
</div>
new Vue({
    el: ".app",
    data: {
        message: "hello vue"
    },
    methods: {
        say: function () {
            alert("hi vue");
        }
    }
});

Vue 中的关键字

都是作为 Html 标签中的属性


v-model

MVVM 数据的双向绑定,标签的 value 绑定 vue 对象中的 data 属性值。

<div class="app">
    请输入名字:<input type="text" v-model="name"><br>
    {{name}},你好!<br>
</div>
new Vue({
    el: ".app",
    data: {
        name: ""
    }
});

v-on

绑定事件,属性格式为:v-on:<事件>
当 input 标签触发事件(比如 input、click 等等),会调用 consoleText() 方法。

<div class="app">
    <input type="text" v-on:input="consoleText()">
</div>
new Vue({
    el: ".app",
    methods: {
        consoleText: function () {
            console.log("input");
        }
    }
});

@

简化 v-on,属性格式为:@<事件>

event.target.value:表示获取当前事件的目标节点

event 可以获取事件的状态
target 返回触发此事件的元素(事件的目标节点)

以下代码同样可以实现输入 input 标签,改变 message 的值。

<div class="app">
    <input type="text" @input="consoleText">
    当前输入的内容为:{{message}}
</div>
new Vue({
    el: ".app",
    data: {
        message: "",
    },
    methods: {
        consoleText: function (event) {
            // 当前 Vue 对象的 message 属性 = 事件对象(input标签)的 value 值
            this.message = event.target.value;
        }
    }
});

v-bind

Html 标签属性中无法使用插值表达式,因此可以通过 v-bind 实现。

v-bind 也可以简写,属性格式为:v-bind:href 或者 :href

<div class="app">
    <a v-bind:href="link">NOTHINGATLL</a>
    <a :href="link">NOTHINGATLL</a>
</div>
new Vue({
    el: ".app",
    data: {
        link: "https://www.zqskate.com"
    }
});

v-once

标签下插值表达式获取的数据只使用一次

<p v-once>
    {{message}}
</p>

v-html / v-text

v-html:span 标签下插入渲染成 html 的 link 值。

v-text:span 标签下插入 link 值,原样输出,不会被渲染成 html。

<div class="app">
    <span v-html="link"></span>
    <span v-text="link"></span>
</div>
new Vue({
    el: ".app",
    data: {
        link: "<a href='https://www.zqskate.com'>NOTHINGATLL</a>"
    }
});

事件

简单实现一个通过设置步长,对 count 进行加减的案例。

简单使用点击事件、鼠标移动事件、事件修饰符。

<div class="app">
    <!--通过设置的步长对 count 进行加减-->
    {{count}}<br>
    <button @click="add_count">点击 +</button><br>
    <button @click="reduce_count">点击 -</button><br>
    步长设置:<input v-model="step">

    <!--当前区域计算通过鼠标移动事件显示坐标-->
    <p @mousemove="mouse_move">
        {{x}}:{{y}}<br>

        <!--触发事件方法停止事件-->
        <span @mousemove="stop_mouse_move">
            方式一:鼠标移动到此处触发鼠标移动事件调用方法进行停止
        </span><br>

        <!--直接通过 .stop 停止事件-->
        <span @mousemove.stop>
            方式二:鼠标移动到此处通过事件修饰符进行停止
        </span>
    </p>
</div>
new Vue({
    el: ".app",
    data: {
        count: 0,
        step: 1,
        x: 0,
        y: 0
    },
    methods: {

        /**
         * count +
         */
        add_count: function () {
            this.count += Number(this.step);
        },

        /**
         * count -
         */
        reduce_count: function () {
            this.count -= Number(this.step);
        },

        /**
         * 计算坐标
         * @param event 事件
         */
        mouse_move: function (event) {
            this.x = event.clientX;
            this.y = event.clientY;
        },

        /**
         * 停止事件
         * @param event 事件
         */
        stop_mouse_move: function (event) {
            event.stopPropagation();
        }

    }
});

事件修饰符

事件的修饰

  • .stop 停止事件等等…
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

按键修饰符

Enter 按键松开会触发事件调用方法。

下面代码按回车后控制台会打印文本输入框内容。

<div class="app">
    <input type="text" @keyup.enter="my_submit" v-model="message">
</div>
new Vue({
    el: ".app",
    data: {
        message: ""
    },
    methods: {
        my_submit: function () {
            console.log(this.message);
        }
    }
});

Vue 改变内容,虚拟 DOM 和 DIFF 算法

插值表达式

{{count > 10 ? '大于10':'小于十'}}

计算属性:computed

计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性,其次这个属性有计算的能力(计算
是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;

methods:每次调用都会执行方法。
computed:首次调用方法获取结果,其后每次调用都会返回第一次计算出来的结果。


<div class="app">
    {{getDateMethod()}}<br>
    {{getDateComputed}}
</div>
var v = new Vue({
    el: ".app",
    methods: {
        getDateMethod: function () {
            return Date.now();
        }
    },
    computed: {
        getDateComputed: function () {
            return Date.now();
        }
    }
});

监控:watch

通过 watch 给属性绑定函数,当属性的值发生改变,函数会被调用,函数可以接收两个参数:第一个参数为修改后的值,第二个参数为修改前的值。


<div class="app">
    <input type="text" v-model="message">
</div>
new Vue({
    el: ".app",
    data: {
        message: "message"
    },
    watch: {
        message: function (a, b) {
            console.log("消息被改变,新消息:" + a + ";旧消息:" + b);
        }
    }
});

Vue 改变样式

动态改变标签 class 属性

<style>
    .my_color {
        width: 100px;
        height: 20px;
        background-color: black;
    }
    .red {
        background-color: red;
    }
</style>
<div class="app">
    <div :class="{red:temp}" class="my_color"></div>
    <button @click="temp=!temp">点击改变颜色</button>
</div>
new Vue({
    el: ".app",
    data: {
        temp: false
    }
});

也可以通过 computed 改变

<div class="app">
    <div :class="{red: temp}" class="my_color"></div>
    <div :class="my_style" class="my_color"></div>
    <button @click="temp=!temp">点击改变颜色</button>
</div>
new Vue({
    el: ".app",
    data: {
        temp: false
    },
    computed: {
        my_style: function () {
            return {
                red: this.temp,
                width: this.temp
            }
        }
    }
});

双向绑定改变样式

input 输入对应设置好的 css 样式,即可改变样式。

<div class="app">
    <div :class="color" class="my_color"></div>
    <input type="text" v-model="color">
</div>
new Vue({
    el: ".app",
    data: {
        color: "red"
    }
});

多个组合样式

<div :class="[key1, key2]"></div>

内嵌样式

JSON 键必须驼峰命名,值为 Vue 中的属性

<div :style="{backgroundColor: color}"></div>

多个样式组合

<div class="app">
    <div :style="[my_color, {height: height + 'px'}]" class="my_color"></div>
    颜色:<input type="text" v-model="color"><br>
    高度:<input type="text" v-model="height">
</div>
new Vue({
    el: ".app",
    data: {
        color: "red",
        height: 10
    },
    computed: {
        my_color: function () {
            return {
                backgroundColor: this.color
            }
        }
    }
});

虚拟 DOM 和 diff 算法

Vue 的高效核心,就是虚拟 dom 和 diff 算法,vue 不通过修改 dom 树来达到修改的效果,而是直接在页面上被修改的元素,此时这个元素就是一个虚拟的 dom,Vue 通过 diff 算法,计算出虚拟 dom 修改后和修改前的区别,然后再虚拟 dom 的原基础上进行修改,效率大大提升。

分支语句

v-if / v-else-if / v-else

<div class="app">
    <div v-if="flag">if</div>
    <div v-else-if="!flag">else-if</div>
    <div v-else>else</div>
    <button @click="flag=!flag">点击</button>
</div>
new Vue({
    el: ".app",
    data: {
        flag: false
    }
});

v-show

属性结构:v-show=”布尔值”,修改的是样式,当不显示时,样式为 display: none

v-for

  • 普通遍历
<div class="app">
   <div v-for="a in args">
       <li>{{a}}</li>
   </div>
</div>
new Vue({
    el: ".app",
    data: {
        args: [1,2,3,4,5]
    }
});
  • 定义下标遍历
<div class="app">
   <div v-for="(a,i) in args">
       <li :key="i">{{i}} -- {{a}}</li>
   </div>
</div>
  • 遍历对象值
<div class="app">
   <div v-for="value in people">
       <li>{{value}}</li>
   </div>
</div>
new Vue({
    el: ".app",
    data: {
        people: {
            name: chan,
            age: 18
        }
    }
});
  • 遍历 value key index 注意顺序
<div class="app">
   <div v-for="(v,k,i) in people">
       <li>{{k}} - {{v}} - {{i}}</li>
   </div>
</div>
  • 案例:简单表格
<div class="app">
   <table>
       <thead>
       <tr>
           <th>ID</th>
           <th>姓名</th>
           <th>年龄</th>
           <th>电话</th>
       </tr>
       </thead>
       <tbody>
       <tr v-for="(stu, i) in students" :key="i">
           <td>{{i}}</td>
           <td v-for="value in stu">{{value}}</td>
       </tr>
       </tbody>
       <tfoot></tfoot>
   </table>
</div>
new Vue({
    el: ".app",
    data: {
        students: [
            {
                name: "小明",
                age: 18,
                tel: "19999999999"
            },
            {
                name: "小红",
                age: 19,
                tel: "18888888888"
            },
            {
                name: "小花",
                age: 20,
                tel: "17777777777"
            },
        ]
    }
});

全部评论0