前端泥瓦匠

Appearance

Return to top
On this page

基础指令

安装vue

  • cnd方式
html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1
  • npm 方式

简单的尝试

这里使用cnd方便测试

html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue</title>
</head>

<body>
    <div id="content">
        <!-- moustache 小胡子语法 表达式 可以放赋值 取值 三元-->
        {{ msg }}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<!-- 使用官网的vue地址 -->
<script>
    // 引用vue后会给一个vue构造函数
    var vm = new Vue({ // vm === viewModel
        el: '#content', // 告诉vue管理哪一部分,querySelector "document.querySelector("#content")"
        data: { // data中的数据会被vm所代理
            msg: 'Hello Vue!' // 可以通过vm.msg获取对应的呢日用
        }
    })// Object.defineProperty
    vm.msg = "wjw" // 修改视图
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

模板语法

综上所属得出了一套模板语法

文本

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

 <!-- 为了避免闪烁的问题，也就是最开始的时候，出现:{{msg}}的情况，可以使用如下的绑定方式。-->
<span v-text="msg"></span>
1
2
3
4

表达式 

{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
1
2
3

但是vue的表单元素 input checkbox textarea radio select 非文本处理

vue的指令 directive 只是dom上的行间属性，vue给这类属性赋予了一些意义，来实现特殊功能所有指令都以v-开头value属性默认情况下回vue忽略掉 selected checked 都没有意义

v-model

v-model 会将msg赋予输入框，输入框的值改变会影响数据

在前面讲解vue简介的时候，我们说过，如果model中的数据发生了改变，会通过ViewModel通知View更新数据，这个效果前面我们也已经演示了，现在演示一下当view中的数据发生了变化后，怎样通过ViewModel来通知model来完成数据的更新。

其实这就是我们常说的，“双向数据绑定”

怎样实现这种效果呢？可以通过v-model来实现。

  • v-model指令用来双向数据绑定：就是model和view中的值进行同步变化
  • v-model只能在input/textarea/selet 也就是表单元素
html
<input v-model="msg">
<input type="checkbox" v-model="msg1" value="爬山">

<input :value="message" @input="(e)=>{message = e.targe.value}"></input>
1
2
3
4

怎样验证v-model实现了双向数据绑定呢？

可以打开控制台，然后输入：vm.userName 发现输出的值为"zhangsan", 取的是模型中的数据。

当在文本框中输入新的值后，在敲一下vm.userName发现对应的数据发生了变化，也就是视图中的数据发生了变化，模型中的数据也 会发生变化。

那么在控制台中直接给vm.userName="lisi",发现文本框中的值也发生了变化。

关于v-model 这个知识点，面试的时候经常会被问到的一个问题就是，自己能否模拟实现一个类似于v-model的双向数据绑定的效果。

v-on 缩写@ 事件监听

html
  <div id="app">
        <span>{{name}}</span>
        <!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
        <button v-on:click="changeName">更换姓名</button>
        <!-- 还可以通过简写的形式。建议以后都使用简写的形式 -->
        <button @click="changeName">更换姓名</button>
    </div>
    <script>
        var vm = new new Vue({
            el: '#app',
            data: {
                name: 'zhangsan'
            },
            // 通过methods完成函数或方法的定义
            methods: {
                changeName() {
                    // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
                    this.name = "itcast"
                }
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

带参数的形式如下：

html
<button @click="changeNameByArg('laowang')">带参数的情况</button>

<script>
    var vm = new new Vue({
        el: '#app',
        data: {
            name: 'zhangsan'
        },
        // 通过methods完成函数或方法的定义
        methods: {
            changeName() {
                // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
                this.name = "itcast"
            },
            changeNameByArg(userName) {
                this.name = userName
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修饰符：

例如，页面有有一个文本框，用户在该文本框中输入内容，按下回车键，获取到用户输入的内容。

html
<div id="app">
    <span>{{name}}</span>
    <!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
    <button @click="changeName">更换姓名</button>
    <button @click="changeNameByArg('laowang')">带参数的情况</button>
    <!--给文本框添加键盘事件-->
    <input type="text" @keydown.enter="changeUserName" v-model="name" />
</div>


<script>
// 在mehtods中定义changeUserName方法
// 通过methods完成函数或方法的定义
methods: {
    // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
    changeName() {
        this.name = "itcast";
    },
    changeNameByArg(userName) {
        this.name = userName;
    },
    //定义处理文本框键盘事件的方法。
    changeUserName() {
        console.log(this.name);
    },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-html-原始HTML

html
<p>Using mustache:<span v-html='rawHtml'></spn></p>
1

v-if、v-show隐藏显示

html
<div id="app">
    <p v-if="users.length===0">没有任何用户数据</p>

    <ul v-else>
    <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
    <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
    <!-- index表示数组的索引值，该名字可以随意定义 -->
    <!-- <li
        v-for="(item,index) in users"
        :key="item.id"
        :class="{actived:selectItem===item}"
        @mousemove="selectItem=item"
    >
        编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
    </li> -->

    <li
        v-for="(item,index) in users"
        :key="item.id"
        :style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}"
        @mousemove="selectItem=item"
    >
        编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
    </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在上面的代码中，我们首先对users数组做了一个判断，如果没有数据，就在页面上展示：“没有任何用户数据”

否则渲染整个列表。

上面是关于v-if的使用，下面看一下v-show.

v-show 是通过css属性display控制元素显示，元素总是存在的。

v-if:通过控制dom来控制元素的显示和隐藏,如果一开始条件为false,元素是不存在的。

什么时候使用v-show,什么时候使用v-if呢？

如果需要频繁的控制元素的显示与隐藏，建议使用v-show. 从而避免大量DOM操作，提高性能。

而如果某个元素满足条件后，渲染到页面中，并且以后变化比较少，可以使用v-if

v-for

html
<div v-for="item in items">
  {{ item.text }}
</div>

// 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。
1
2
3
4
5

v-bind

  • .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
  • .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-slot

插槽名 (可选，默认值是 default)

html
// 默认插槽 
<slot></slot>

// 具名插槽
<slot name="xxx"></slot>

// 作用域插槽 
<slot name="xxx" :item="1"></slot>
1
2
3
4
5
6
7
8
9

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

html
<span v-pre>{{ this will not be compiled }}</span>

// 编译结果 <span>{{ this will not be compiled }}</span>
1
2
3

v-clock 不审核表达式

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

html
<div v-cloak>
  {{ message }}
</div>
1
2
3

v-once 只渲染一次

html
<span v-once>This will never change: {{msg}}</span>
1

Copyright © 2018-2025 Mason

沪ICP备20006251号-1