Vue 框架学习笔记（基础）

即 Vue 是一套前端框架，免除原生 JS 的 DOM（文档对象模型）操作，简化书写

（如 HTML 文档对象模型，相关的有 BOM（游览器对象模型）专门操作游览器对象的）

出现背景：基于 MVVM（Model-View-ViewModel）思想，要求实现数据的双向绑定，如编程的关注点放在数据上

序言

如果需要让 JavaScript 代码在服务器上运行，就需要提供一个它的运行环境：node.js（node.js是对 Chrome V8 引擎进行了封装，是一个能让 JavaScript 运行在服务端的开发平台）

对于前端项目 nodejs 平台有包管理工具（包管理工具是用于管理前端项目依赖项（如库、框架和工具）的工具，它们有助于确保项目的依赖项始终保持最新、可维护和可复制）

包管理工具

npm	yarn	pnpm
npm 是 nodejs 默认的包管理工具，通常与 Node.js 一起安装	Yarn 是 Facebook 创建的 JavaScript 包管理工具，它兼容npm存储库，并添加了一些额外的功能。	pnpm 是一种旨在减小项目依赖项的磁盘占用和提高性能的包管理工具。它通过符号链接的方式共享依赖项，而不是复制它们，从而节省存储空间。
npm init：初始化一个新的npm项目。 npm install [package]：安装指定的包。 npm install：根据package.json文件安装所有项目依赖。 npm update [package]：更新指定包。 npm uninstall [package]：卸载指定包。 npm search [package]：搜索包。 npm publish：将自己的包发布到npm仓库。 npm outdated：检查过期的包。	yarn init：初始化一个新的Yarn项目。 yarn add [package]：安装并添加指定的包到依赖。 yarn install：根据yarn.lock文件安装所有项目依赖。 yarn upgrade [package]：升级指定包。 yarn remove [package]：移除指定包。 yarn list：列出项目依赖。	pnpm init：初始化一个新的pnpm项目。 pnpm install [package]：安装指定的包。 pnpm install：根据pnpm-lock.yaml文件安装所有项目依赖。 pnpm update [package]：更新指定包。 pnpm uninstall [package]：卸载指定包。 pnpm ls：列出项目依赖。
npm：适用于简单的项目或Node.js应用，不需要强调性能。 Yarn：适用于需要更快的依赖项安装速度、一致性和稳定性的项目，特别是大型团队或CI/CD环境。 pnpm：适用于希望减小项目磁盘占用并提高性能的项目，但可能不如Yarn那么受欢迎。

其它工具：

Babel：JavaScript 的编译器/转换器，出现背景是将 ES6/ES7 等“高级”语法代码（为了兼容性）转换成 ES5/ES3 的“通俗”语法（目前也可以把 JSX 语法转为 Javascript ）

vue-cli：vue 项目的脚手架工具，即搭建开发所需要的环境和自动生成 Vue 项目的生成目录架构。

node.js 是对Chrome V8引擎进行了封装，是一个能让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

包管理工具：npm 和 yarn

ES6 是 Javascript 的新版本，ECMAScript6 的简称。利用 ES6 我们可以简化我们的 JS 代码，同时利用其提供的强大功能来快速实现 JS 逻辑

 Vue 常用指令

指令：让 HTML 标签上带有 v- 前缀的特殊属性，看下表：

指令格式	作用
v-bind	为 HTML 标签绑定属性值，如设置 href、css 样式等等
v-model	在表单元素上创建双向数据绑定
v-on	为 HTML 标签绑定事件
v-if	有条件性的渲染某元素，判断为 true 时渲染，否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是 display 属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

使用例子：

1.v-bind
<a v-bind:href="url">百度一下</a>
<!-- 这里 v-bind 可以省略 -->

2.v-model
<input name="username" v-model="username">

3.v-on
<input type="button" value="一个按钮" v-on:click="show()">
<!-- 可省略 v-on，下面是 Vue 方面逻辑处理代码 -->
new Vue({
    el:"#app",
    methods:{
        show(){
            alert("我被点了");
        }
    }
});


4.v-if、v-else、v-else-if
<div v-if="count == 3"> div1 </div>
<div v-else> div2 </div>
<div v-else-if="count == 2"> div3 </div>

5.v-show
<div v-show="count == 3"> div4 </div>

6.v-for
<div v-for="addr in addrs">
    {{addr}}<br>
</div>

加索引
<div v-for="(addr, i) in addrs">
<!-- i 表示索引，从 0 开始 -->
    {{i + 1}}:{{addr}}<br>
</div>

案例以后补充

Vue 八大生命周期

每个周期事件都会自动执行一个生命周期方法（钩子）

生命状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

注释：mounted 代表挂载完成，Vue 初始化成功，HTML 页面渲染成功。例子如下：

（发送异步请求，加载数据）

new Vue({
    el:"#app",
    mounted(){
        alert("vue 挂载完毕，发送异步请求");
    }    
});

 Element 组件库

Element 是饿了么前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

官网：Element - The world's most popular Vue UI framework