Vue.js初次使用——wsdchong

本文链接：https://blog.csdn.net/weixin_42875245/article/details/106545677

Vue.js初次使用

教程：https://cn.vuejs.org/v2/guide/

时间：2020/5/2

内容：安装、介绍、实例、模块语法、计算属性和监听器、class与style绑定、条件渲染、列表渲染、事件处理

我认为学习一个UI框架，应该把它当成HTML文档使用，用其实现文本、图片、表格、表单、超链接；学以致用，不然跟着这个步骤了有些晕头转向，找不到方向。看这个前，最好把JavaScript掌握好。

前置知识：JavaScript最基础的关键字和语法结构、事件机制、DOM编程、闭包、对象引用、内置对象的常用方法；

正确的教程应该是用其做demo，边做demo边说内容。学以致用。

一、安装

下载并用script标签引入，把Vue注册为一个全局变量；CDN、NPM

命令行工具、

二、介绍

Vue是一套用于构建用户界面的渐进式框架。从低向上逐层应用。Vue.js的核心库只关注图层，不但易于上手，还便于与第三方库或既有项目整合。

三、实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的。

Var VM = new Vue（{//选项 el :’#app’, data : data,}）

每个Vue实例在被创建时都要经过一系列的初始化过程（设置数据监听、编译模板、将实例挂载到dom并在数据变化时更新DOM等），在这个过程会运行一些叫生命周期钩子的函数，让用户在不同阶段添加自己的代码。

Created : function(){console.log(“a is:’+this.a)}) mounted updated destroyed

生命周期：创建一个Vue实例-初始化（事件&生命周期）-初始化（注入&检验）-是否指定（el）-是否指定（template）-是的话将template编译到render函数中，否的话将el外部的HTML作为template编译-创建vm. $e l 并用其替换 ‘ e l ’ - 挂载完毕（虚拟 D O M 渲染） - v m .$ destroy()函数时-解除绑定，销毁子组件以及事件监听器-销毁完毕。

Beforecreate-created-beforeMount-mounted(update)-beforedestroy-destroyed

四、模板语法

Vue使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据。所有vue.js的模板都是合法的HTML。

底层的实现上，Vue将模板编译成虚拟DOM渲染函数，结合响应系统，可以最少需要重新渲染组件，将DOM操作次数减到最少。

如果足够的熟悉DOM并且偏爱JavaScript的原始力量，可以不用模板，直接写渲染（render）函数，使用可选jsx语法。

插值：

文本（这个将不会改变: {{ msg }}）

原始HTML（

Using mustaches: {{ rawHtml }}

）

Attribute（

）

指令（

现在你看到我了

）

五、计算属性和侦听器

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

对于任何负载逻辑，应当使用计算属性。

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：监听属性。

虽然计算属性在大多数情况更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

六、class与style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute，所以我们可以用v-bind处理它们。

绑定HTML class：

对象语法（

）

数组语法（

）

用在组件上（）

绑定内联样式

对象语法（

）

数组语法：

七、条件渲染

v-if：

Now you see me

v-else：

Now you don’t

v-show：

Hello!

八、列表渲染

v-for：

{{ name }}: {{ value }}

九、事件处理

可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。

在HTML中监听事件，违背了关注点分离的优良传统。但由于所有vue.js事件处理方法和表达式都严格绑定在当前视图的VM上，它不会导致任何维护上的困难。使用v-on有以下几个好处：1看HTML模板可以轻松定位JavaScript代码的对应方法；2无须再JavaScript里手动绑定事件，和DOM完全解耦，更易于测试；3销毁VM时，所有事件处理器自动删除。