vue指令写在html中的原理,Vue基本原理、模板和配置

vue入门

前言

6天的目标是什么？

能够使用vue开发大部分应用的常见功能

对vue的核心原理有一定认识

需要的知识

html+css知识

javascript知识

部分ES6知识(本节课需要用到字符串模板、速写方法、速写属性)

如何学习？

理解老师讲的内容

课后独立完成课堂上的练习

如果还有额外的精力，自行脑补更多的功能，并尝试实现

编辑器和插件

编辑器：vscode，visual studio code

插件：live server，自动搭建一个简易的本地服务器，可以从服务器访问页面

vue是什么？

vue的官网：https://cn.vuejs.org/

vue是一个渐进式的javascript框架

渐进式：vue可以和其他传统(比如jquery)前端技术融合，这意味着你可以向已有工程中逐步植入vue，而无须全部重写

javascript框架：基于JS语言书写而成的框架，框架是一种升级版的库，它具有约束力，即必须按照框架所规定的方式组织代码结构

目前，vue的主版本号为2，vue3正在测试中，预计今年第一季度发布正式版

基本原理

创建vue工程

创建vue工程有三种方式：

和传统工程一样，创建页面，引入vue.js即可

使用构建工具(webpack)搭建工程

使用脚手架(vue-cli)搭建工程

创建vue实例

先在页面中放置一个div

div>

vue.js提供了一个构造函数Vue，通过下面的代码即可创建一个vue实例：

new Vue({ //配置对象

el: "#app",

data: {

title: "商品和库存管理"

},

template: `

{{title}}

`

})

配置对象中出现了三个属性：

el: 表示vue实例将控制页面中的哪个元素(要挂载的元素)。该元素将被vue控制，元素之外的其他区域不受影响。

data：一个对象，可以配置任何与显示相关的数据。这是非常重要的一个配置，它为被vue控制的区域提供需要显示的信息，至于如何显示，则由template的内容决定

template：渲染模板。它描述了要显示到页面上的内容，该内容经过一系列流程后，最终将替换掉el元素。

值得注意的是，vue要求模板必须有唯一的根节点。

如果没有配置template，vue将使用el元素的outerHTML作为模板

数据响应式

vue的数据是响应式的。

所谓响应式，是指当数据发生变化的时候，vue会重新渲染

vue2实现响应式的方式，是深度遍历配置中的data，将遇到的每一个属性用Object.defineProperty的方式重新定义，于是，每当读取属性或给属性赋值时，vue可以收到通知，从而渲染界面

不仅如此，为了对数组进行响应，vue还重写了大部分改变数组的方法，例如push、slice、splice、pop、shift、unshift等，于是，对数组的操作也具有了响应式。

但是，如果直接通过索引改动数组的某个元素是不具有响应式的，但可通过实例.$set(target, prop, value)实现设置

为了方便操作数据，vue还会将配置中的一些信息提取到vue实例中

我们把添加数据响应式功能，以及提取到vue实例的过程称之为注入

@startuml

start

:深度遍历数据;

:实现数据响应式;

:将信息提取到vue实例;

stop

@enduml

注入流程

由于注入流程发生在最开始的时候，如果之后动态的增加数据，由于注入流程已经结束，增加的数据无法获得响应式

模板的编译

如果每次重新渲染都完全替换页面中的元素，将导致效率极其低下

对真实DOM的操作非常昂贵

vue为了提高渲染效率，使用虚拟DOM的方式来映射真实的DOM。

虚拟DOM实际上就是一个普通的JS对象。当需要重新渲染的时候，vue首先检查这些虚拟DOM哪些是需要更改的，从而根据实际情况，用最小的代价更新真实DOM。

模板字符串变成虚拟DOM的过程，称之为模板的编译

模板的编译是一个复杂的过程，要完全理解它的原理，需要熟悉源码和一些算法

在模板中，我们可以使用所有vue实例中的属性和方法

模板和配置

模板

插值

在所有文本节点的位置，都可以使用Mustache语法进行插值

{{ 任何JS表达式 }}

指令

在所有元素节点的属性位置，都可以使用各种指令来完成不同的操作

指令的完整语法是：指令名:指令描述.指令修饰符

可以把指令想象成某个函数，指令描述和指令修饰符是函数的一些参数，用于告知函数一些具体的信息

如果要查看所有的指令，参阅官网API文档

v-on

通过该指令，可以为节点注册事件

按钮button>

链接a>

由于使用频繁，v-on:可以速写成@

在v-on指令内部，可以使用$event获取获取事件参数

v-bind

通过该指令，可以为元素绑定属性

div>

由于使用频繁，v-bind:可以速写成:

v-if

这里涉及三个指令v-if、v-else-if、v-else，类似于js的if、else if、else

不及格p>

及格p>

优秀p>

v-if决定该元素是否参与渲染

v-show

该指令接收一个boolean表达式，用于决定该元素是否隐藏

不及格p>

及格p>

及格p>

v-html

通过该指令可以设置元素的innerHTML

内部的内容不再有效p>

v-for

通过该指令，可以循环渲染元素

• {{i}}, {{n}}li>

  ul>

  渲染后

  • 0, ali>
  • 1, bli>
  • 2, cli>

    ul>

    key值的设置是为了提高渲染效率，通常在循环渲染一个元素时设置，设置的值必须唯一，通常设置为数据的id

    在重新渲染时，vue底层需要对比新旧两棵虚拟DOM树，key值的存在可以让vue更加精准的比较，从而减少对真实DOM的操作

    v-model

    该指令用于对数据进行双向绑定

    配置

    el

    要挂载的元素

    data

    要渲染的数据

    template

    要编译的模板

    methods

    methods中可以配置一些函数，这些函数会被提取到vue实例，因此:

    函数中的this指向的是vue实例

    模板中可以调用函数

    可以将函数设置到事件

    new Vue({

    //...

    data:{

    n: 0

    },

    methods:{

    add(number){

    this.n += number;

    },

    reduce(number){

    this.n -= number;

    }

    }

    })

    在模板中可以使用这些方法

    减2 button>

    {{n}}

    加3 button>

    computed

    computed中可以配置一些方法，这些方法称之为计算属性

    new Vue({

    data:{

    firstName: "姬",

    lastName: "成"

    },

    computed:{

    // 计算属性fullName

    // 当读取fullName时，会调用该方法得到结果

    fullName(){

    return this.firstName + this.lastName;

    }

    }

    })

    计算属性也会提取到vue实例，因此：

    方法中this指向vue实例

    模板中可以直接使用计算属性，使用时当作普通属性使用即可，不能当作方法调用

    {{fullName}}p>

    计算属性和方法的最大区别，在于计算属性会进行缓存，只要依赖不变，计算属性的方法无须重新运行