Vue 前端开发
Vue介绍
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
官网：https://v3.cn.vuejs.org/
Vue 优点
响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作
可组合的视图组件：把视图按照功能切分成若干基本单元，可维护、可重用、可测试等
使用Vue的四种方式：
在HTML中以CDN包形式导入
2 下载js文件保存至本地再导入
3使用npm安装 4使用官方VueCli脚手架构建项目（不建议新手直接用）
使用参考文档https://cn.vuejs.org/guide/quick-start.html
示例
VUE
{{ message }}
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
VUE
{{ counter }}
模板语法
Vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层组件实例的数据。所有VUE,js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
数据绑定的常见形式就是使用"双大括号"语法在HTML中插入文本：
Message:{{msg}}
{{msg}}将被替代对应组件实例中msg属性的值。无论何时，绑定的组件实例上msg属性发生改变，插值处内容都会更新
常用指令
指令是指V-前缀的特殊属性，它的作用是当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM
v-text
v-text的效果与{{}}的效果一样，将数据填充到标签中，但是没有闪烁问题！
VUE
{{ msg }}
v-html
在某些情况下，从服务端请求的数据本身就是一个HTML代码，如果使用{{}}会将将数据解析为普通文本而非HTML代码，为输出真正的HTML，就需要使用v-html
VUE
{{ msg }}
v-bind
用于动态绑定一个或者多个属性值，或者向另一个组件传递props值
应用场景：图片地址src、超链接herf、动态绑定一些类、样式等
v-bind 指令接受一个参数，以冒号分隔
VUE
v-bind: 绑定Class
操作元素标签的class和style属性是数据绑定的一个常见需求
例如希望动态切换class，为div显示不同背景颜色
VUE
v-bind 绑定style
v-bind:style语法非常像css,但其实是一个JavaScript对象。css属性名可以用驼峰式或短横线分隔（kebab-case,记得用引号括起来）命名
VUE
Hello Vue!
v-on
在前端开发中，经常监听用户发生的事件，例如点击、拖拽、键盘事件等，这个时候就需要使用v-on
v-on: 冒号后面是even参数，例如click、change
VUE
点击次数: {{ counter }}
指令缩写
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind缩写
...
...
... v-on缩写
...
...
...
常用指令之流程控制
v-if
判断一个元素是否显示
通过seen值的真假来插入/移除元素。
现在你能看到我
看不到
v-show
与v-if不同的式，v-show的元素始终会被渲染并保留在DOM中，所以v-show只是简单的切换元素display CSS属性
现在你能看到我
看不到
看不到了
v-for
基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，
其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
// 循环数组
-
{{ i }}-{{ c }}
v-for 选择列表
获取用户选择并赋值另一个变量再实时展示：
当前选择主机ID: {{ selectComputerId }}
v-model
双向数据绑定：当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会同步变化
v-model提供表单输入绑定，可以在、