Vue.js入门

2017-02-03 本文已影响419人其心

Vue笔记系列
2、Vue.js渐进
 3、Vue.js进阶

Vue.js的概述

如官网所说，Vue.js是一款轻量级的以数据驱动的渐进式JavaScript 框架。

Vue.js数据驱动的原理在于View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。反之，当Model层的数据发生改变时，也会通过Data Bingings来监听并改变View层的展示。从而实现双向数据绑定的功能。
例如：jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。这样我们就能很直观的理解数据驱动的意思了。

上面介绍到的是Vue.js的原理，下面再来科普一下MVVM这个概念（一像素写的《Vue.js 和 MVVM 小细节》），可以让你更好的理解Vue,但是没有太大的实践作用，但是可以装B，更重要的是可以在面试的时候装B。

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。

起步

虽然对node.js和webpack了解，并在项目中使用过了，但还是尝试从最基本的了解Vue开始，充分体验一下这渐进过程，直接下载并使用<script>引入
或者使用CDN引入

<script src="https://unpkg.com/vue/dist/vue.js">

声明式渲染

官网首先强调，Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

简单的html结构，id是start

两对大括号的“Mustache”语法很面熟，在jsx或者arttemplate等一般的渲染引擎类似。

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

声明Vue对象

引入了vue.js，Vue会被注册为一个全局变量。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

var start = new Vue({
        el: "#start",
        data: {
            message: "helloWorld,helloVue!"
        }
    })

el:Vue需要操作的元素节点
data属性:每个 Vue 实例都会代理其 data对象里所有的属性。注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $
start .$el === document.getElementById('start') // -> true
start这个实例然后.$el，就相当于Vue构造函数传入的el。

start的前台展示
现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。在浏览器控制台修改start.message,页面会相应更新。

message更改为first App

Vue常用指令介绍

指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。

1、v-text (更新元素的文本内容)

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2、v-html (更新元素的innerHTML)

注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

<div v-html="html"></div>

3、v-if (根据表达式的值的真假条件渲染元素)

<h1 v-if="ok">Yes</h1>
相当于
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}

上面的代码，如果ok为false，则h1不会被渲染出来。
现在只是切换一个元素，如果要同时操作多个，可以在要操作的元素外面包一层，例如下面用div

<div v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
<!-- 如果ok为flase,那么h1和两个p都不会渲染 -->

当然，有if肯定就有else。

v-else (指令给 v-if或 v-show添加一个 “else” 块)

可以看出，v-else不只是可以搭配v-if，还可以搭配v-show
必须注意 ：v-else元素必须紧跟在 v-if或 v-show元素的后面——否则它不能被识别。

<div v-if="Math.random() > 0.5">
    Sorry
</div>
<div v-else>
    Not sorry
</div>
<!-- 随机切换两种展示结果 -->

4、v-show (根据条件展示元素)

刚在上面提到了v-show，趁热打铁来了解一下，用法跟v-if是一样的，不同的是有 v-show的元素会始终渲染并保持在 DOM 中。v-show是简单的切换元素的 CSS 属性 display。
官网说v-show不支持 <template>语法。我试了一下

<template v-show="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
</template>
<!--嗯，果然不好用，虽然ok是false，依然会把里面的所有东西都渲染出来 -->

下面说一下v-if和v-show的区别
v-if：是真实的条件渲染，切换时销毁和重建，第一次如果判断条件为假，是什么都不做的，官方称为懒惰性。
v-show：元素始终被编译并保留，只是简单地基于 CSS 切换
总结一下， v-if有更高的切换消耗而 v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用** v-if**较好。

简单提一下2.1.0 新增了一个 v-else-if ,也可以跟** v-else **搭配，用作 v-if 的 else-if 块。可以链式的多次使用。这个就很好理解了，贴一段官方代码：

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

/*是不是很像？
if(){
}else if(){
}else {
}*/

5、v-for(基于源数据多次渲染元素或模板块特定语法：`alias in expression`)

通俗点说就是，遍历一个数组，数组里面放的是一个个的对象。
基本用法

<!-- html -->
<ul id="example-1">
  <li v-for="word in words">
      {{ word.text }}
  </li>
</ul>

//javascript
var example1 = new Vue({
        el: '#example-1',
        data: {
            words: [
                {text: 'a' },
                {text: 'b' },
                {text: 'c' }
            ]
        }
    })

结果

v-for,可以遍历数组，对象，甚至是整数（可以当做循环的次数来用），其中遍历的参数可以是value，index，如果是对象还有key。

<!-- 数组 -->
<div v-for="(item, index) in items"></div>
<!-- 对象-->
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
<!-- 整数-->
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
结果为：1 2 3 4 5 6 7 8 9 10

提示：数组的变异方法，push()、pop()、shift()、unshift()、splice()、sort()、reverse()，可以触发视图更新。并且，官网称，如果你想让展现方式达到你的预期，建议尽可能使用 v-for来提供 key。
注意：Vue 不能检测以下变动的数组
1、当你利用索引直接设置一个项时，例如上面的example1.words[0] = {text: 'A'}
解决方法：
用一下两种方法，触发状态更新。

// Vue.set
Vue.set(example1.items, 0, {text: 'A'})
// Array.prototype.splice`
example1.items.splice(0,1, {text: 'A'})

2、当你修改数组的长度时，例如： example1.words.length = newLength
解决方法：
？？？官方称使用splice，我试了一下，如果输入的长度小于原有的长度，可以实现截取数组的效果来触发视图更新，但是如果输入的长度大于原有的长度，就不会让原数组更改而触发更新了，如果有新的进展，我会过来修改。

example1.items.splice(newLength)

6.v-on(绑定事件监听器)

简单说，就是监听 DOM 事件来触发一些 JavaScript 代码。

事件类型由参数指定，例如：click、submit等等。
表达式可以是一个方法的名字或一个内联语句，这个内联跟样式的内联一样，就是直接在DOM元素上写逻辑，如下：

<button type="button" v-on:click = "num += 1">点击增加1</button>

v-on还有缩写@

<button type="button" @click = "num += 1">点击增加1</button> //把上面的一行代码缩写的是这个样子的

在官网上可以看到这么一段话，在监听原生 DOM 事件时，方法以事件为唯一的参数。如下：

<button v-on:click="doThis"></button>
// 在 `methods` 对象中定义方法
  methods: {
    doThis: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
//我们可以看到在方法中可以使用原生的DOM事件event对象。

接下来还有一句，如果使用内联语句，语句可以访问一个 $event 属性。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
//用$event传入后，我们就可以在内联语句处理器中使用event进行操作了。
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}
//但是我在内联语句中不传入$event，在调用的方法中也不写入形参event，结果是也能拿到event对象,当然这是在谷歌和高版本的IE下，火狐浏览器会报错
<button v-on:click="warn('Form cannot be submitted yet.')">Submit</button>
methods: {
  warn: function (message) { // 不写入event，谷歌和高版本IE依然能拿到event对象，火狐会报错。
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

事件修饰符
官网说：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，那我想阻止冒泡或者阻止默认事件怎么办？ Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
可以看官网的详解，不做赘述。事件修饰符
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

全部的按键别名：

enter
tab
delete (捕获 “删除” 和 “退格” 键)
esc
space
up
down
left
right
从此再也不用记数字了。并且可以通过全局 config.keyCodes对象自定义按键修饰符别名：

/ /可以使用 v-on:keyup.f2
Vue.config.keyCodes.f2= 113 
//要注意是全局对象Vue调用的。

新增的可以配合其他操作一起用的键名：

ctrl
alt
shift
meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
//？？？试了一下，并不是只有alt+c能触发，只要是最后一个键按得是c，就能触发,会继续关注。

7.v-bind(动态地绑定一个或多个特性)

有缩写，缩写是一个冒号　** : **

<!-- 缩写 -->
![](imageSrc)

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
？？？试了一下并没有按照预期的自动添加前缀，会持续关注。
注意： .once 和 .sync 修饰符在2.0已经移除。

8.v-model(在表单控件或者组件上创建双向绑定)

它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。
修饰符：
.lazy - 取代 input监听 change事件，例如文本输入框就不会在输入时就改变视图，需要失去焦点时才会改变视图。
.number - 输入字符串转为数字，如果原值的转换结果为 NaN 则返回原值。
.trim - 输入首尾空格过滤

9.v-pre(跳过，不编译)

跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。注意这个指令 不需要表达式

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

//会连同花括号一直展示出来：{{ this will not be compiled }}

10.v-cloak（不需要表达式）

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

10.v-once（不需要表达式）

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-once这个指令留白的Vue 2 | Part 3 常用指令合集说的还是挺好的。

以上是关于Vue.js的概述和指令笔记，后续会有进阶和觉得文档中可以拿来出来唠叨唠叨的东西再写几篇出来。
最后，欢迎各位看官留言交流和指正。

Vue.js入门

Vue.js的概述

起步

声明式渲染

简单的html结构，id是start

声明Vue对象

Vue常用指令介绍

1、v-text (更新元素的文本内容)

2、v-html (更新元素的innerHTML)

3、v-if (根据表达式的值的真假条件渲染元素)

v-else (指令给 v-if或 v-show添加一个 “else” 块)

4、v-show (根据条件展示元素)

5、v-for(基于源数据多次渲染元素或模板块特定语法：`alias in expression`)

6.v-on(绑定事件监听器)

7.v-bind(动态地绑定一个或多个特性)

8.v-model(在表单控件或者组件上创建双向绑定)

9.v-pre(跳过，不编译)

10.v-cloak（不需要表达式）

10.v-once（不需要表达式）

猜你喜欢

热点阅读

Vue.js入门

Vue.js的概述

起步

声明式渲染

简单的html结构，id是start

声明Vue对象

Vue常用指令介绍

1、v-text (更新元素的文本内容)

2、v-html (更新元素的innerHTML)

3、v-if (根据表达式的值的真假条件渲染元素)

v-else (指令给 v-if或 v-show添加一个 “else” 块)

4、v-show (根据条件展示元素)

5、v-for(基于源数据多次渲染元素或模板块 特定语法：alias in expression)

6.v-on(绑定事件监听器)

7.v-bind(动态地绑定一个或多个特性)

8.v-model(在表单控件或者组件上创建双向绑定)

9.v-pre(跳过，不编译)

10.v-cloak（不需要表达式）

10.v-once（不需要表达式）

猜你喜欢

热点阅读

5、v-for(基于源数据多次渲染元素或模板块特定语法：`alias in expression`)