# Vue基础培训 <br> ## 1 培训简介 ### 1.1 内容 <p @click="changeShow1">本次培训是一次较为基础的培训，目的让大家能够产生对Vue的兴趣，了解Vue和jQuery之间的区别以及初学一下Vue。</p> <img v-show="showImg1" @click="changeShow2" src='https://t1.picb.cc/uploads/2020/03/04/k3qNjR.md.png' style="width:500px;display:none;"> <img v-show="showImg1 && showImg2" src='https://t1.picb.cc/uploads/2020/03/04/k3qQY8.jpg' style="width:500px;display:none;"> ### 1.2 目标 认真学完之后，大家拿到Vue工程源码的时候，能够将它运行起来，并且能够了解大部分常用的Vue基础语法，做到能够大致阅读和简单修改Vue源码。 <br><br> ## 2 Vue项目的运行 ### 2.1 下载并安装nodejs <a href="https://nodejs.org/zh-cn/download/" target="_blank">下载链接</a> 安装完成之后，打开命令行工具，输入 node -v，如果出现相应的版本号，则说明安装成功。 ### 2.2 了解npm npm包管理器（类似Java中的maven），是集成在node中的，所以，直接输入 npm -v就会显示出npm的版本信息。 npm常用命令： npm install packagename --save 或 -S（生产环境依赖） npm install packagename --save-dev 或 -D（开发环境依赖） npm install packagename -g 或 --global（全局） npm uninstall（卸载） npm update（更新） npm run build（编译） 将Vue工程代码打包成html，js，css的目录结构包 注：当安装不上依赖的时候可以优先切换npm源（npm config set registry http://r.cnpmjs.org/） <img src='https://t1.picb.cc/uploads/2020/03/02/kvDZv7.png'> ### 2.3 拿到工程源码，安装依赖并运行。 npm install 直接安装依赖。原理就是包管理器会去检索package.json文件，并且安装json文件中的包。 并且会增加一个node_modules文件夹，工程所需要的所有依赖包都会安装到该文件中。依赖安装完成之后， 运行npm run dev 或者npm run serve 命令即可启动应用。具体使用哪一条命令可以在package.json中查看。 <img src='https://t1.picb.cc/uploads/2020/03/02/kvDOpW.md.png'> <br><br> ## 3 Vue概述与基础知识点 ### 3.1 Vue概述 3.1.1 什么是Vue Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链 以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue有三个核心概念：数据驱动，组件系统，生命周期。 用原生JavaScript事件驱动通常是这样的流程： 先通过特定的选择器查找到需要操作的节点 -> 给节点添加相应的事件监听，然后用户执行某事件（点击，输入 ，后退等等） -> 调用 JavaScript 来修改节点这种模式对业务来说是没有什么问题，但是从开发成本和效率 来说会比较不理想，特别是在业务系统越来越庞大的时候。另一方面，找节点和修改节点这件事，效率本身就很低， 因此出现了数据驱动模式。 Vue的一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据,其流程如下： 用户执行某个操作 -> 反馈到 VM 处理（可以导致 Model 变动） -> VM 层改变，通过绑定关系直接更新页面对应 位置的数据可以简单地理解：数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面。主要就是因为 这一点，数据驱动框架才得以有较快的运行速度（因为不需要去折腾节点），并且可以应用到大型项目。 <a href="https://cn.vuejs.org/v2/guide/" target="_blank">Vue官方教程</a> 3.1.2 Vue与jquery的区别 jquery是一个前端js库，相当于是一个工具类，而Vue是一个基于MVVM模型的框架。 jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，数据和界面是在一起的。比如 需要获取label标签的内容：$("lable").val();它还是依赖DOM元素的值。 Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和 View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。 3.1.3 MVC与MVVM的区别 MVC <img src='https://t1.picb.cc/uploads/2020/03/04/k3qRGN.png'> M（Model）模型：用来存放应用的所有数据对象。 V（View）视图：视图层是呈现给用户的，用户与之产生交互。 C（Controller）控制器：控制器是模型和视图的纽带。 MVVM <img src='https://t1.picb.cc/uploads/2020/03/04/k3qxpe.png'> M（Model）对应数据层的域模型，它主要做域模型的同步。 V（View）作为视图模板，用于定义结构、布局。 VM（ViewModel）一个同步View 和 Model的对象,起着连接View和Model的作用，同时用于处理View中的逻辑。 MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动 操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。整体看来，MVVM比MVC精简很多， 不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。 ### 3.2 Vue基础语法 3.2.1 双花括号{{}}，模板中显示变量值 3.2.2 指令 v-if 判断指令 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy(除 false、0、""、null、 undefined 和 NaN 以外皆为真值) 值的时候被渲染。也可以用 v-else 添加一个“else 块”，或者用 v-else-if 添加一个“else if 块”。 v-show 显隐指令 另一个用于根据条件展示元素的选项是 v-show 指令，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM中。v-show 只是简单地切换元素的 CSS 属性 display。 v-for 循环指令 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的 数组元素的别名。 v-model 双向数据绑定指令 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动 选取正确的方法来更新元素。 v-html 原始HTML指令 （不建议使用，容易导致xss跨站脚本攻击） v-text 文本指令 v-bind 属性绑定指令 （缩写:） v-on 事件绑定指令 （缩写@） v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <a href="https://codepen.io/cyt68/pen/BaNpLOv" target="_blank">在线运行示例</a> 3.2.3 事件绑定修饰符 .stop 阻止单击事件继续传播 .prevent 阻止默认事件 .capture 添加事件监听器时使用事件捕获模式 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为 还有按键修饰符，鼠标按钮修饰符等 <a href="https://codepen.io/cyt68/pen/RwPpVOO" target="_blank">在线运行示例</a> 3.2.4 计算属性与侦听属性 计算属性computed，计算属性是基于它们的响应式依赖进行缓存的。 ::: demo ```js computed: { reversedMessage: function () { return this.message.split('').reverse().join(''); } } ``` ::: 侦听属性watch，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 ::: demo ```js watch: { message: function () { window.alert(this.message); } } ``` ::: <a href="https://codepen.io/cyt68/pen/dyovvXM" target="_blank">在线运行示例</a> ### 3.3 Vue生命周期 <img src="https://cn.vuejs.org/images/lifecycle.png" width="760"> beforeCreate 实例组件刚创建，元素DOM和数据都还没有初始化 created 数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染，多用于数据获取。 beforeMount DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了 Virtual DOM（虚拟Dom）技术。先占住了一个坑。 mounted 数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去，多用于dom处理。 beforeUpdate 只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一 个数据的时候会执行这个周期，如果没有数据改变不执行。 updated 只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和 updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。 beforeDestroy 这个周期是在组件销毁之前执行。 destroyed 组件已销毁。 <a href="https://codepen.io/cyt68/pen/MWwpmZp" target="_blank">在线运行示例</a> <script> export default { data() { return { showImg1: false, showImg2: false } }, methods: { changeShow1() { this.showImg1 = !this.showImg1; }, changeShow2() { this.showImg2 = !this.showImg2; } } } </script>