Vue的常见指令

2022-03-11 09:04:59

一、什么是Vue？

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

二、Vue的引入

独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

三、初识Vue-----简单demo

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：
const app = new Vue({
  // 选项
})

接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
    <!--引用数据-->
    {{name}}
    {{age}}
</div>
<script>
    //创建Vue根实例
    const app = new Vue({
        //指定作用域
        el: "#app",
        //数据
        data: {
            name: "wangjifei",
            age: '27',
        }
    })
</script>
</body>
</html>

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
data 用于定义属性，实例中有三个属性分别为：name、age。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化

四、常见指令介绍

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
指令修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如：
.lazy 懒加载，等到input框失去焦点时再显示数据
.trim 去处数据空格
.number 数字
v-text 绑定文本、v-html 绑定html

<div id="app">
    <p v-text="a"></p>
    <div v-html="b"></div>
</div>
<script>
    //创建Vue根实例
    const app = new Vue({
        el: "#app",
        data: {
            a: "A",
            b: `<h1>我是html</h1>`
        }
    })
</script>

v-model（input标签、textarea标签、select标签）
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

<div id="app">
    用户名：
    <input type="text" v-model.lazy.trim="name">
    <pre>{{name}}</pre>
    <hr>
    手机号：
    <input type="text" v-model.number="phone">
    <pre>{{phone}}</pre>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "",
            phone: "",
        }
    })
</script>

<div id="app">
    <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>
    {{article}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            article:''
        }
    })
</script>

<div id="app">
    <select v-model="from">
        <option value="1">河北</option>
        <option value="2">山西</option>
    </select>
    <pre>{{from}}</pre>
    <select v-model="where" multiple>
        <option value="1">上地</option>
        <option value="2">西二旗</option>
        <option value="3">三里屯</option>
    </select>
    <pre>{{where}}</pre>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            from: '1',
            where: '1'
        }
    })
</script>

v-for
v-for 指令需要以 ** in **s 形式的特殊语法， **s 是源数据数组并且 ** 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表

<div id="app">
    <h1>展示你们的爱好</h1>
    <ul>
        <li v-for="hobby in hobby_list">{{hobby}}</li>
    </ul>

    <h1>展示你们喜欢吃的食物</h1>
    <ul>
        <li v-for="food in food_list">{{food.name}}它的价格是：{{food.price}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            hobby_list: ["美女", "LOL", "吃鸡"],
            food_list: [
                {
                    name: "臭豆腐",
                    price: 6,
                },
                {
                    name: "韭菜盒子",
                    price: 10,
                }
            ]
        }
    })
</script>

v-bind (:) 通过v-bind可以动态绑定标签上的属性值，例如可以绑定a标签的href属性

<div id="app">
    <a :href="path">@马云</a>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            path: "http://www.taobao.com",
        }
    })
</script>

v-on (@)
按钮的事件我们可以使用 v-on 监听DOM事件，并在触发时运行一些js代码。因为许多事件处理的逻辑很复杂，所以直接将js代码写在v-on指令是不可行的，因此使用v-on绑定事件名，通过事件名来调对应逻辑的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <style>
        .active {
            background: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<a v-bind:href="path">@马云</a>-->
    <a :href="path">@马云</a>
    <button @click="on_click">点我显示盒子的样式</button>
    <div v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}">鼠标事件</div>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            path: "http://www.taobao.com",
        },
        methods: {
            on_click: function () {
                this.show = !this.show
            },
            onMouseenter: function () {
                console.log("鼠标移入了")
            },
            onMouseleave: function () {
                console.log("鼠标移出了")
            }
        }
    })
</script>
</body>
</html>

v-if、v-else-if、v-else，通过判断v-if来控制元素存在与否，v-if通过判断后面的值是true或者false来决定，另外v-else不可以单独使用，必须搭配v-if来使用。

<div id="app">
    <div v-if="role == 'vip'">
        <h1>欢迎会员登陆</h1>
    </div>
    <div v-else-if="role == 'vvip'">
        <h1>您的专属秘书为您服务</h1>
    </div>
    <div v-else>
        <p>gun~~~~~</p>
    </div>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            role: "vip",
        }
    })
</script>

这里， v-if 指令将根据表达式 "role=='vip'" 的值(true 或 false )来决定是否插入 h1标签。

v-show 控制的是DOM对象的显示或者隐藏，即display属性

<div id="app">
    <button @click="on_click">点我</button>
    <p v-show="show">天苍苍</p>
    <p v-if="a =='if_show'">野茫茫</p>
    <p v-else>风吹草低见牛羊</p>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            show: false,
            a: "if_show"
        },
        methods: {
            on_click: function () {
                this.show = !this.show
            }
        }
    })
</script>

自定义指令，通过自定义指令来实现我们自己想要实现的指令效果

<div id="app">
    <div class="active" v-pin.left.bottom="show">
    </div>
</div>
<script>
    //自定义指令必须调用directive方法来实现，pin是自定义指令名，el为当前绑定自定义指令的html标签，binding是一个包含自定义指令中的各种属性或值的对象，
    Vue.directive("pin", function (el, binding) {
        console.log(el)
        console.log(binding)
        let val = binding.value;
        //modifiers中存储的是自定义指令中的所有修饰符内容
        let positons = binding.modifiers;
        if(val){
            for(let key in positons){
                el.style.position = "fixed";
                console.log(key)
                el.style[key]=0;
            }
        }else {
            el.style.position = "static";
        }
    });
    const app = new Vue({
        el: "#app",
        data: {
            show: true,
        }
    })
</script>

计算属性computed
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的，在使用计算属性时，对于不变的数据，计算属性会通过缓存来存储，当再次调用可以直接从缓存中取出，提高效率，节省CPU，只有当数据发生改变时，才会对数据再次处理。

<div id="app">
    <table border="1">
        <thead>
            <th>学科</th>
            <th>分数</th>
        </thead>
        <tbody>
            <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><input type="text" v-model.number="physics"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{sum_num}}
                </td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            math: 95,
            english: 59,
            physics: 100,
        },
        computed: {
            sum_num: function () {
                let total = this.math + this.english  + this.physics
                return total
            },
            average: function () {
                let ret = Math.round(this.sum_num/3)
                return ret
            }
        }
    })
</script>

码农公寓

一、什么是Vue？

二、Vue的引入

三、初识Vue-----简单demo

四、常见指令介绍

相关文章