Vue基础和常用指令的介绍

Vue基础和常用指令的介绍

一、Vue基础

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

1.1 创建一个Vue实例

const vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

在HTML中可以是直接使用插值表达式调用message变量：

<div id="app">{{message}}</div>

此时页面会渲染出来：Hello Vue!

其中，创建的<div id="app"></div>是Vue的根节点，这里的所有内容都可以用vue实例进行管理，{{message}}是一个插值，就是一个数据占位符。Vue({})里面的就是配置项，el: '#app'表示挂载点。

在data中声明的所有变量都自动成为vue实例的属性，因此我们可以使用vm.message获取message的值。

二、Vue相关指令的使用

2.1 v-text,v-once,v-html指令

现有如下vm实例：

const vm = new Vue({
    el: document.querySelector('.app'),
    data: {
        username: '残破的蛋蛋',
        rawHTML: '残破的<em style="color">蛋蛋</em>'
    }
});

• v-text用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。

<p v-text="username"><p>

• 效果图：

• v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<p v-once="username">只渲染一次</p>

• 效果图：

• v-html双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令，这个有点类似于原生JS的innerHTML属性。

<p v-text="username"></p>
// 使用v-html可以把rawHTML里的html标签也渲染出来
<p v-html="rawHTML"></p>

• 效果图：

2.2 v-bind,v-on指令

<style>
    .active {
        color: violet;
    }
    .bigger {
        font-size: 2rem;
    }
</style>
<div class="app" onclick="console.log(this.tagName)">
</div>
<script>
    const vm = new Vue({
        el: '.app',
        data: {
            username: '残破的蛋蛋',
            style1: 'color: red',
            class1: `active bigger`,
            isActive: true,
            isBigger: false,
            src: 'assets/images/header.jpg'
        },
        methods: {
            show() {
                // this就是当前的vue实例
                console.log(this);
                alert(this.site);
            },
            handle(ev, a, b) {
                console.log(ev.target, ev.type);
                console.log("a + b = %d", a + b);
            }
        }
    });
</script>

2.2.1 v-bind

v-bind动态的绑定一个或多个元素的attribute值。

1.绑定style属性

<p v-bind:style="style1">username:{{username}}</p>

由于v-bind是一个高频指令，所以也可以简写成冒号。

<p :style="style1">username:{{username}}</p>

如果不使用变量，使用css属性，可以这样写：

<p v-bind:style="'color: red'">username:{{username}}</p>
<p :style="`color: red`">username:{{username}}</p>

最好是使用模板字面量的写法，因为有可能在固定属性中间会掺杂着变量。

• 效果图：

2.绑定class类属性

<p :class="class1">class2: {{username}}</p>

• 效果图：

也可以使用对象来表示，可以通过布尔值来控制该class属性是否生效。

<p :class="{active: isActive, bigger: isBigger}">class3: {{username}}</p>

由于isActive的值为true，所以

• 效果图：

3.绑定src属性

<img :src="src" >

• 效果图：

2.2.1 v-on

绑定事件监听器。在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。

• 案例

const vm = new Vue({
    el: '.app',
    data: {
        username: '残破的蛋蛋',
    },
    methods: {
        show () {
            alert(this.username);
        }
    }
});

<p><a href="https://php.cn" v-on:click="show">残破的蛋蛋1</a></p>

• 效果图：

但是这里有一个问题，就是如果在点击完弹窗之后，页面就会跳转到php.cn站点了，我们可以使用修饰符禁用掉元素的默认事件：

<p><a href="https://php.cn" v-on:click.stop="show">残破的蛋蛋1</a></p>

由于v-on也是一个高频指令，所以可以简写为@，例如：

<a @click="dosomething"></a>

• 相关修饰符的案例：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

2.3 v-model双向绑定

v-model指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute的初始值而总是将Vue实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值。

• 案例

const vm = new Vue({
    el: document.querySelector('.app'),
    data: {
        username: '残破的蛋蛋',
        num: "0"
    }
});

<p>模型中的数据：{{username}}</p>
<p>双向绑定v-model：<input type="text" v-model="username" /></p>

• 效果图：

2.4 v-for

v-for指令基于一个数组/对象来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。

<div class="app">
    <!-- key：可以干预diff算法 -->
    <!-- vue通过稳定且唯一的key值判断这个节点是否需要渲染，以提升效率 -->
    <!-- key只能是整数或不重复的字符串 -->
    <ul>
        <li v-for="(item, index) in items" :key="index">索引：{{index}}----值：{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item, key, index) in user" :key="key">索引：{{index}}----键：{{key}}----值：{{item}}</li>
    </ul>
    <ul>
        <li v-for="(user, index) in users" :key="user.id">索引：{{index}}----id：{{user.id}}----用户名：{{user.name}}----邮箱：{{user.email}}</li>
    </ul>
</div>

const vm = new Vue({
    el: ".app",
    data: {
        // 数组
        items: ["合肥", "苏州", "杭州"],
        // 对象
        user: {
            name: "残破的蛋蛋",
            email: "admin@admin.cn",
        },
        //   对象数组, 数据表的查询结果就是一个二个这样的二维的JSON
        users: [
            { id: 1, name: "残破的蛋蛋", email: "canpo@dd.cn" },
            { id: 2, name: "拤碎的蛋蛋", email: "qiasui@dd.cn" },
            { id: 3, name: "漂亮的蛋蛋", email: "piaoliang@dd.cn" },
        ],
    },
});

• 效果图：

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。尽可能在使用v-for时提供key，因为Vue通过稳定且唯一的key值判断这个节点是否需要渲染，以保证性能。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。