认识 Vue.js

node版本管理工具 nvm - 简书

Vue介绍

---

Vue.js(简称Vue) 是一套用于构建用户界面的渐进式前端框架。（其实就是使用js开发的一个框架）

Vue.js 核心实现 :

• 响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作。（高度封装框架的特点是不需要关心dom操作，js jQuery很多都是对dom的一个操作，使用这个框架之后就不需要对dom操作了，视图的框架需要我们去写，数据也需要我们去维护）
• 可组合的视图组件:把视图按照功能切分成若干基本单元，可维护，可重用，可测试等特点。（很强大的组件功能，一个一个组件嵌套）
• 响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图 （ViewModel 它其实是控制器，是做数据和视图之间的一个桥梁，数据更新和数据的交换，数据层和视图层之间的一个桥梁）的响应式框架。

vue2语法：

components 它要引入的组件

• data是定义html里面要使用的变量，也就是定义html里面要使用的变量，它就是去定义变量的，定义好变量之后在html里面去使用，变量发生了变化html会去重新渲染，这就是定义数据的。
• computed是去做计算的
• watch 当去监听user的数据，这个数据要在return里面是要有的，监听它，如果发生了变化，要去执行什么，这个就是监听
• method是去定义一些方法，去使用
• mounted是生命周期，挂载完成生命周期的一个阶段

上面就是选项方式的api，用到哪块就去使用哪块。这不是一个固定的写法。

vue3语法：

它在js定义的时候有一个setup，但是几个功能定义是大差不差的，比如watch，变量的定义，方法的定义。

引入Vue.js

---

参考文档: https://v3.cn.vuejs.org/guide/installation.html

• 在HTML中以CDN包的形式导入

• 下载JS文件保存到本地再导入
• 使用npm安装

npm install @vue/[email protected]

npm install -g @vue/cli 

• 使用官方VueCli脚手架构建项目（不建议新手直接使用）

vue create vue - demo

Hello World 示例 :

简单vue示例如下：

最后需要挂载才能够实现最后的效果，也就是哪个html里面哪个区域去使用这个vue，那么就挂载到哪个区域。正常情况下是挂载到整个body的区域。

    
    
    
    
    


    
    

        
        {{ message }}
    

    

声明式渲染

---

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

整个html页面就是一个dom树，每个标签相对的元素都是它的每一个节点。 就和上面的例子一样将定义的变量渲染到dom节点里面去。

首先一定要先挂载在最外层，然后才可以去使用vue定义的这些变量，方法。

现在数据和 DOM 已经被建立了关联，所有东西都是 响应式（也就是变量的值发生了变化，页面数据也就发生了变化） 的，可通过下面示例确认 :

    
    
    
    
    


    
    

        
      counter:{{ count }}
    

    

模板语法

---

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。 所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。（其实就是将vue里面的模板语法，最终渲染为一个html）

数据绑定最常见的形式就是使用 “ 双大括号 ” 语法在 HTML 中插入文本 :

Message: {{ msg }}   数据绑定就是使用变量的时候使用的是两个花括号

{{msg}} 将被替代对应组件实例中 msg 属性的值。无论何时，绑定的组件实例上 msg 属性发 生改变， 插值处内容都会更新。