浅谈Vue基础入门

前言

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

一、Vue是什么？

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。

1.框架做分层设计，每层都可选，不同层可以灵活接入其他方案

2.它给你提供足够的optional，但并不主张很多required。

3. 而 Angular、react则是:强主张

自底向上逐层应用

由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。

vue的核心

MVVM: Model-View-ViewModel

Vue是数据驱动视图的框架,采用了MWVM(Model、View、ViewModel)架构。其核心库只关注视图层,视图与数据状态保持同步

Vue的核心是一个“响应式的数据绑定系统”

数据和视图建立绑定之后,DOM将与数据保持同步.

Vue的优势（为什么要使用Vue）

轻量:

Angular~65KB

内置bundling和tree-shaking

vue+ Vuex+Vue Router ~ 30KB

学习成本低:

文档组织结构清晰

API面积比Angular少

对ES6+的要求比React少

性能优越:

虚拟DOM

避免子组件重渲染

生态良好:

众多厂商都在使用并持续增长

二、Vue安装

1.标签引入

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用

下载地址：https://vuejs.org/js/vue.min.js

2.CDN引入

对于制作原型或学习，你可以这样使用最新版本：

1

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

1

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

1

2

3

3.NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版 $ npm install vue

1

2

4.命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

三、Vue的简单应用

声明式

告诉Vue框架想要什么，如何达成由Vue去做，开发者不用管。如:下面将name的数据和标签绑定在一起:

He1lo {{ name }]

1

2

3

指令

指令(Directives):是带有v-前缀的特殊属性。指令属性的预期值是单一的JavaScript表达式。>职责:是当其表达式的值改变时相应的将某些行为应用到DOM上

常见指令

v-if:根据表达式的结果来判断，是true则渲染元素，false则将元素注释掉

v-show:与v-f类似，true就渲染，但是false并不是注释掉，而是通过 displaynone;来将元素隐藏，如果需要来回切换，使用v-show更好。

v-for:遍历元素，使用格式为v-for="(值,键) in遍历内容"

v-bind:给标签绑定属性、类、样式等，可以缩写为冒号> v-html:向标签内覆盖注入HTML内容作为其子元素

v-on:给标签绑定函数，可以缩写为@，(Vue.js为v-on提供了事件修饰符。修饰符是由.开头的指令后缀来表示的，用于对事件进行约束。

v-model:将组件与变量进行双向绑定，当组件数据修改时，变量会随之改变。它后面可加修饰符。

v-once:不允许修改数据

还有如下属性

四、Vue的生命周期

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

beforeCreate钩子函数:

a.用户使用new Vue()新建Vue实例

b.父实例实例化子实例，确认组件间的父子关系，将父组件的自定义事件传递给子组件

c.初始化将render函数转为虚拟dom的方法

created钩子函数:

a.初始化事件，进行数据的观测

b.数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变)

c.此时还是没有el选项

beforeMount钩子函数:

a. el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期。

b.如删掉el: ‘#app’

c. template参数

(1)如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。

(2)如果没有template选项，则将外部HTML作为模板编译。

(3)可以看到template中的模板优先级要高于outer HTMIL的优先级。

mounted

a.给vue实例对象添加$el成员，beforeMount之前el上还是undefined

b. mounted之前h1中还是通过{{message}}进行占位的，因为此时还有挂载到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

beforeUpdate

a. vue发现data中的数据发生了改变，则在下一次时间循环开始重新渲染组件

updated

a.重新执行render函数生成vnode。

b.将vnode转化为真实Dom

c.重新挂载到HTML中，并且覆盖掉上—次渲染的$el

beforeDestroy:

a.调用vm.$destroy(0准备销毁vue实例

b. beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed:

a.在Vue实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

总结

简单说了下Vue的入门基础,看完我这个博客，你应该对Vue有一个基本的认识，比如说Vue是一个渐进式的Js框架，它的核心是响应式数据绑定，它有什么优势，它该如何安装？它的生命周期如何？这些都是看完后值得思考的，其次，可以动手用NPM和Node.js安装运行一下Vue，简单体验一下Vue。

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。