Vue基础

 

一、Vue初步

1.1 Vue简单认识

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vfue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
• vue.js、Angular.js、React.js并称前端三大主流框架！
• Vue.js是一套构建用户界面的框架，只关注视图层，不仅易于上手，还便于第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
• 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

1.1.1 Vue 安装

• 兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容ECMAScript 5 的浏览器。

1.1.1.1 本地导入

• 直接下载并用 <script>标签引入，Vue 会被注册为一个全局变量。Vue 有开发和生产两个版本，在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

1.1.1.2 CDN引入

• 我们推荐链接到一个你可以手动更新的指定版本号：

<script src="https://cdn.jsdelivr.net/npm/vue@1.6.16/dist/vue.js"></script>

• 1

• 你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

1.1.1.3 npm 安装

npm i vue

• 1

1.2 Vue 的 MVVM对应关系

1.2.1 创建一个Vue实例

• 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。
• 创建一个Vue的实例 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数。
• 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

• el: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。表示，要控制页面上的哪个区域。这个区域就是MVVM中的 v (view层)
• data: 这里的 data 就是 MVVM中的 M （model层），专门用来保存 每个页面的数据的 data 属性中，存放的是 el 中要用到的数据
• vm: 实例化的Vue就是MVVM中的 VM（调度者） 层
• template：一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
• render：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。（更多内容见Vue进阶）

<div id="app">
   <p>{{ msg }}</p>
</div>

<script>
   var vm = new Vue({
       el: '#app', 
       data: {
           msg: '欢迎学习Vue' 
       }
   })
</script>

• 以上代码，虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
• msg 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】

1.2.2 数据与方法

• 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
    data: data
})

• 我们可以通过data.a去获取绑定在data上的a属性，也可以直接通过vm实例获取到

vm.a == data.a // => true

•  

• 设置属性也会影响到原始数据

vm.a = 2
data.a // => 2

• 反之亦然

data.a = 3
vm.a // => 3

• 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，不会触发任何视图的更新。

• 如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

var vm = new Vue({
   data: {
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
	}
})

1.2.3 {{}} 插值表达式

• 在data里面的属性通过{{}}插值表达式可以直接渲染到页面中

var vm = new Vue({
   el: '#app',
   data: {
      foo: 'bar'
   }
})

• 在data里面定义了的属性可以直接通过插值表达式渲染在页面。

<div id="app">
   <p>{{ foo }}</p>
</div>

1.2.4 总结

• 到此为止，我们的MVVM就解析完毕：

• M即为data
• V为HTML页面
• VM为Vue实例

1.3 基本指令
1.3.1 v-cloak
这个指令保持在元素上直到关联实例结束编译。使用 v-cloak 能够解决 插值表达式闪烁的问题，也就是当网络较差时，请求Vue就会变得很慢，这时候{{ msg }}就会显示在页面中，这肯定不是我们想看到的，那么我们就需要使用v-cloak让没有加载到Vue的元素先隐藏，当加载完毕以后再去掉v-cloak这个类。
[v-cloak] {
   display: none; 
}

<p v-cloak>{{ msg }}</p>

1.3.2 v-text
和{{}}没有太大区别，也是渲染数据所用。语法：
<h4 v-text="msg">我是h4标签</h4>

那么和{{}}有什么区别呢？
默认 v-text 是没有闪烁问题的
v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
例如：
<p>++++++++ {{ msg }} +++++++++</p>
<h4 v-text="msg">==================</h4>

结果：
++++++++ 123 +++++++++
123

1.3.3 v-html
现在，在data里面有msg属性，值里面有h1标签，如果我们使用插值表达式和v-text，都不能渲染里面的h1标签
data: {
  msg: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
}

那么，这个时候我们就使用v-html，就能够渲染出h1标签了。同时，也会覆盖标签里面的所有内容。
<div v-html="msg"></div>

1.3.4 v-bind
v-bind: 是 Vue中，提供的用于绑定属性的指令。缩写：：，v-bind里面的内容会被当做JavaScript代码执行。如果v-bind里面的值不加引号，则会被当做data里面的变量。
data: {
  mytitle: '这是一个自己定义的title'
}

以上，在data里面有mytitle属性，我们要让他绑定在以下的input按钮的title上。
<input type="button" value="按钮" v-bind:title="mytitle + '123'">

注意： v-bind: 指令可以被简写为“:要绑定的属性”，v-bind 中，可以写合法的JS表达式。

1.3.5 v-on
Vue 中提供了 v-on: 事件绑定机制。可以绑定JavaScript中的任意事件。v-on可以简写为@。

在这里我们首先要学习一个Vue里的属性methods，在methods属性中定义了当前Vue实例所有可用的方法。

methods: { 
  show: function () {
    alert('Hello')
  }
}

这个时候我们可以使用v-on在input里面绑定事件，show相当于是事件函数。
<input type="button" value="按钮" v-on:click="show">

或者
<input type="button" value="按钮" @click="show">