开发工具与关键技术： JavaScript vue
作者：肖广斌
撰写时间：2021年2月8日

vue框架是一个渐进式前端框架，可以提高前端开发效率。

渐进式：可以选择性的使用该框架的一个或一些组件，这些组件的使用不需要将框架全部组件都应用；而且 用了这些组件也不要求你的系统全部都使用该框架。

Vue是一个前端框架，也其实是一个vue.js文件，下载vue.js文件并在页面中引入该js文件就可以在页面中使用了。

vue.js下载方式：
1、可以引用在线的vue.js（需要联网才能使用）
2、可以离线下载vue.js（下载地址：https://github.com/vuejs/vue）
3、在npm包资源管理器中，下载安装vue.js，在使用npm指令之前，我们需要先安装node.js。（推荐使用）

使用npm安装，如下操作：
1、首先搭建一个静态web工程
2、在项目控制台输出npm init -y 初始化项目


初始化完成后，项目目录下会有一个package.json的文件，这是对项目的基本描述信息。例如名称、版本等，有点类似java中的pom文件。
3、安装vue，输入命令npm install vue --save(save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖)安装完成我们的项目下会多一个node.modules文件夹，里面有vue文件夹，node_modules是通过npm安装的所有模块的默认位置。这时我们的vue已经安装完成了

Vue的双向绑定：
首先我们写一个简单的html页面，下面我们再来通过指令 v-model演示双向绑定

我们打开测试页面，这是刚进来的初始化的样子，如下

接着，我们点击“点我”按钮，然后再看一下

可以看到，输入框的变化引起了页面效果num的变化，同时，如果页面效果的num值发生改变，输入框的值也会改变，之前我们想要实现这个效果需要自己写 点击按钮然后修改的js，但是我这里并没有写任何的修改js，这就是vue双向绑定。

Vue实例生命周期及钩子函数：
每个vue应用都是通过vue函数创建一个新的实例开始的。
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括（el，data，methods）。
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染；可以通过el属性来指定。如下

我们在div里给它添加一个id，然后通过el属性指定这个div为我们要渲染的模板，然后我们就可以在该div里实现我们想要的操作，比如把我们data中设置的默认值通过插值方式渲染到页面上，（注意模板之外使用插值无效）当vue实例被创建时，它会监视data属性的变化，当data发生改变，相关的视图也就会相应发生改变。

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等。Vue为生命周期中的 每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
钩子函数会在vue实例的各个生命周期阶段自动调用；
created钩子函数常用场景：常用于初始化数据。
钩子函数不要使用箭头函数的方式编写。

指令使用：
插值表达式：能够设置有返回值的表达式{{xxx}}
1、v-model：视图（view）和模型（model）之间会相互影响，双向绑定，目前v-model的可使用元素有：input、select、textarea、checkbox、radio、components（Vue中的自定义组件）基本上除了最后一项，其它都是表单的输入项。例如下：


当勾选的时候，每勾选一个或者去掉勾选都会影响选择的效果。
2、v-on：v-on指令用于给页面元素绑定事件。语法：v-on:事件名=“js片段或函数名”。简写语法：@事件名=“js片段或函数名”，例如：v-on：click=“addUser"简写为 @click=“addUser”，vue.js还给v-on提供事件修饰符，如：@click.stop
.stop ：阻止事件冒泡
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次
3、v-for：遍历数据渲染页面，语法：v-for=“item in items”
items：要遍历的数组，需要在vue的data中定义好。
item：循环变量。
Index：当前元素索引，从0开始。
:key=”"：它可以让你读取vue中的属性，并赋值给key属性，这里绑定的key是数组的索引，应该是唯一的
示例如下：


4、v-if、v-else和v-show：v-if，条件判断，当结果为true时，所在元素才会被渲染，v-else配合v-if使用，v-show，根据条件显示元素，v-show只是简单地切换元素的 CSS 属性 display。
5、v-bind：可以对所有元素的属性设置vue实例的数据。示例：


计算属性使用：
computed计算属性的应用场景：可以应用在插值或者指令表示式复杂的时候。可以将一些属性数据经过方法处理之后返回。示例如下：


如果直接在表达式里处理日期格式会显的代码看起来比较复杂，这时我们就可以通过computed计算属性来处理日期格式并返回，一定要返回数据，然后页面渲染时，可以把这个方法当成一个变量来使用。

watch监控：
在vue实例中数据属性；因为在页面中修改而产生了变化；可以通过watch监控获取其改变前后的值。
如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。
示例如下：


组件使用：
在我们开发的过程中，可能很多页面的样式都会存在一样的部分，如果我们每个页面都独自开发，那会加剧我们的代码量，增加开发成本，那么我们就可以把相同的部分抽取出来，然后封装成组件，在页面样式相同时引用该组件即可。


首先我们需要定义一个组件，里面设置我们基本的样式和数据。因为我们上面data中return的对象都是独立的，所有我们上面三个按钮的数据都是独立的。
*组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等。
*不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
*但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板。
*全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
*data的定义方式比较特殊，必须是一个函数。
注册组件有两种：
1、全局注册：在任何vue实例中都可以引用，可以直接在HTML中通过组件名称来使用组件了。
2、局部注册：可以在有需要的页面引入组件，需要先在vue实例中注册，才能在HTML中通过组件名称来使用。

以上内容皆为个人结合学习内容与个人理解总结，如有错误，请给予指正！！