LinHuijuan's Blog

Vue基础详解

# Vue基础详解

[TOC]

# 一、基础指令详解

# 1.1 v-text（不常用）

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<script>
    var msg = `hihi`;
    var vm = new Vue({
		el: '#app',
		data:{
            message
			}
		})	
</script>
1
2
3
4
5
6
7
8
9
10
11
12
  • 区别：如果msg的值没有找到
    • <span></span>页面显示。
    • `````````则无显示。
    • 一般习惯用＋v-cloak。

# 1.1.1 v-cloak

隐藏未编译的 Mustache 标签直到实例准备完毕

<style>
    [v-cloak] {
     display: none;
    }
</style>
<body>
    <div v-cloak>{{ message }}</div>
    // 此时如果没有编译完{{message}},直到编译完成才会显示相应的内容
</body>
1
2
3
4
5
6
7
8
9

# 1.2 v-html

  • 更新元素的innerHTML，。
    • 按照普通HTML插入，不会作为Vue模板进行编译。
    • 如果要渲染的HTML片段中使用了Vue模板的语法，可以考虑通过使用组件来替代。
<div id="app">
	<input type="password"  id="pw" value="123" />
	//v-html让html里的元素可以被解析
	<p v-html="message"></p>
</div>
<script>
	// html必须是可靠的,否则有可能出现xxs攻击
	//img图片找不到时会抛出错误oneerror(打印出了‘123’)
    var message = `<div>hello,我很友善</div><img src="./a.jpg" onerror="console.log(document.getElementById('pw').value);" />`;
    var vm = new Vue({
		el: '#app',
		data:{
            message
			}
		})	
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ps:vm中的this都是指向vue实例

# 1.3 v-show

  1. 控制dom节点的display属性。
  2. 较高的初始渲染开销：无论初始条件是什么，元素总会被渲染。
  3. 用于非常频繁的切换。

# 1.4 v-if/v-else/v-else-if

  1. 控制dom节点。
  2. 惰性：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  3. 较高的切换开销：切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  4. 用于在运行条件很少改变时。
<div id="app"> 
    <div v-if="type === '1'">显示1</div>
    <div v-else-if="type === '2'">显示2</div>
    <div v-else>显示3域</div>
</div>
1
2
3
4
5
  1. 添加唯一key避免复用
  • 表示“这两个元素是完全独立的，不要复用它们”。 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换。

# 1.5 v-for

渲染列表数据

  1. 渲染数组
<div v-for="(item, index) of items"></div>
1
  1. 渲染对象 item, key, index 在遍历对象时，是按Object.keys()的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

# 1.6 v-on

# 1.6.1 事件修饰符

  1. 可以用来处理dom事件
  2. 因为vue实例里的methods方法只有纯粹的数据逻辑（增删查改），而不去处理DOM事件细节
  3. 语法：@事件名.修饰符.修饰符 = '事件名'
修饰符 作用
.stop 阻止冒泡事件
.prevent 阻止默认事件
.capture 触发捕获事件
.self 只有事件源是本身才会触发
.self 通过冒泡/捕获的方式触发不了
.once 只能触发一次
.enter/13 只有按下enter键时才触发

# 1.7 v-bind

用于响应式地更新 HTML 特性。

不加v-bind时，vue就认为此时通过prop传递给组件的是字符串常量。

只有传递字符串常量时，不采用v-bind形式，其余情况均采用v-bind形式传递。

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>
1
2
3
4
5
  • Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令。
<div v-bind:id="dynamicId"></div>
1

# 1.8 v-model

  1. 在表单 <input>、<textarea>及 <select> 元素上创建双向数据绑定。
  2. 根据控件类型自动选取正确的方法来更新元素（语法糖）。
  3. 监听用户的输入事件以更新数据。
  4. 应该通过 JavaScript 在组件的 data 选项中声明初始值。
<div id="app">
    <input type="text" @input="handleInput" />
    <p>{{message}}</p>
</div>
<script>
    var message = '';
    var vm = new Vue({
        el: '#app',
        data: {
            message
        },
        methods: {
            handleInput(ev) {
                this.message = ev.target.value;
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 等价于
<div id="app">
    <input type="text" v-model="message" />
    <p>{{message}}</p>
</div>
<script>
    var message = '';
    var vm = new Vue({
        el: '#app',
        data: {
            message
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 1.9 v-pre

  1. 跳过这个元素和它的子元素的编译过程。
  2. 可以用来显示原始 Mustache 标签。
  3. 跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
1

# 1.10 v-once

只渲染一次，主要用于静态内容，可以优化更新性能。

<header v-once>网站标题</header>
1

# 1.11 自定义指令

  • 注册一个全局自定义指令 v-focus。
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
1
2
3
4
5
6
7
  • 如果想注册局部指令，组件中也接受一个 directives 的选项。
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
1
2
3
4
5
6
7
8
  • 可以在模板中任何元素上使用新的 v-focus 属性，如下。
<input v-focus>
1

# 二、其他

# 2.1 $nextTick

  • nextTick是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，则可以在回调中获取更新后的DOM。
    • vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行DOM更新。

深入理解vue组件