VUE day_01(7.15) vue的入门---使用vue脚本可以实现的一些功能
导语
回顾前面的内容，是按照WEB的发展史在推进：
HTML + CSS :适合做简单的静态页面
DOM + JS: 让页面动起来
jQuery: 通过封装原生DOM, 简化DOM的操作
自动化+工程化: 现在最流行的开发方式
- 出现了三大框架, 时间点顺序:
Angular2009->React2013->Vue2014 - 特色自动化: 不需要操作原生的DOM, 属于是自制了一套语法, 比原生DOM更简单
- 优点: 拉低WEB开发的门槛
- 缺点: 对web的人才培养极其不友好. -- 如果一直使用vue, 一旦vue消失, 你就不会开发web
介绍
官方网站: Vue.js
Vue的版本目前有3个:
- 1: vue1 已淘汰
- 2: vue2 目前是即将淘汰, 属于过渡期
- 3: vue3 目前即将成为主流, 属于过渡期
目前: 学习vue2 和 vue3
编程方式分两种:
- 脚本方式: 类似 bootstrap 和 jQuery, 引入外部脚本 -- 适合入门
- 脚手架方式: 适合实际开发 -- 工程化的表现
脚本下载地址: 安装 — Vue.js
使用vue脚本，初始化后的提示
一、插值语法
打一个比方，假如现在需要在马路上刨个坑
- 做法1: 用手去大马路上刨个坑 -- 原生DOM
- 做法2: 获得一个锄头, 去挖坑 -- 有易用的工具 -- jQuery
- 做法3: 开着挖掘机去挖坑 -- 有自动化的机器 -- Vue
- 做法4: 购买vip大礼包 -- 附带各种功能 -- 脚手架
VUE脚本中， vue服务当前的box元素 ，作者借鉴了 模板字符串的语法, 为HTML提供了相似的功能 ，只要用 {{ }} 就能把JS代码书写在HTML里 。
在那之前，要利用构造函数, 创建一个vue对象 --“自动化的工具”，Vue构造函数, 接收一个对象类型最为实参，此对象类型中的属性, 都是固定的, 具体要看官网文档： https://cn.vuejs.org/v2/api/
- el --- element: 元素. 值是 css选择器, 用于选中元素
- data --- 数据: 用于存储使用到的数据
使用{{ }}将JS代码书写进HTML 
双括号还拥有JS的计算功能。
二、属性绑定语法
标签内容, 用{{ }} 实现插值，而要实现属性绑定，需要在属性名前加冒号，等哈后面接JS语法
:属性名="JS代码"
三、事件绑定语法
原生语法使用onclick添加事件，在VUE语法里，是在事件名前添加@
@事件名="方法"
四、计数器
Vue的核心竞争力之一：监听数据的变化， 自动更新关联的元素
num==1 是真, 则不可用, 否则可用
五、事件参数
target: 触发此次事件的当事元素
事件传参
总结: 函数有两种绑定方案
- 方案1: 不加(), 默认参数1 是事件参数
- 方案2: 加(), 指定传递什么参数
- e -- event:事件参数
- dataset：存放自定义属性的对象的地方
- e.target.dataset：利用事件参数e的target读取自定义属性
事件传参的混合模式
“y”传参使用的是VUE方法，直接把click事件上的实参“20”，传递出来，“e”是使用DOM方法，将储存在自定义属性“data-x”上的值“10”，用event传递出来（要到点击事件里面查找当前元素里的 自定义属性 储存实参的地方，即e.target.dataset中把值取出来），后者要麻烦很多。
六、显示与隐藏
vue的指令: vue提供的一些 元素的属性, 增强元素的操作
- 系统的属性, 加 : 前缀 改为JS的属性写法
- vue的指令本身就是vue的, 所以不用:
- v-show: 快速设置 display:none, 利用css实现元素的隐藏，后面的值是布尔值
七、html与text
v-html 本质: 修改了 innerHTML, 值作为HTML解析后展示
v-text 修改 innerText, 值是文本,不会解析
八、once
正常情况: 通过事件改变后数据变化 会 重新渲染相关的元素
v-once: 一次性. 只初次渲染元素一次. 以后不再变化
九、if
v-if : 根据条件 是真还是假, 来选择是否要渲染元素到页面上，外观 同v-show一样都会导致元素不可见 。
面试常考: v-if 和v-show 都可以隐藏元素, 有什么差别?
- v-if是删除DOM元素, v-show是css的display:none
使用场景:
- v-show: 适合频繁切换显示状态, DOM元素不删, 只是切换css
- v-if: 彻底删除, 适合不频繁的操作. 彻底删除
- 具体场景, 需要未来的 网络请求时 再详说
十、for
作者借鉴了 JS 的 遍历语法 for..in 和 for..of ，JS中: for(let 变量 in 对象)
无需声明变量, 直接用 ，in和of 没有区别, 都是遍历数组, 不同于JS的设定
v-for支持解构语法，但是需要注意的是，如果有修改数据的需求，不建议使用解构语法，因为修改的就是解构的变量，而不是修改对象中的属性。
十一、安装脚手架
脚手架是 一类软件的 总称: 此工具可以自动生成 完善的项目包
需要使用npm工具安装
前提条件 -- 具体配置方式, 查看jQuery最后一天的笔记
1.node版本在 12 ~ 16之间 : node -v
2.确保npm是中国镜像 : taobao
查看: npm config get registry
设置为中国镜像: npm config set registry https://registry.npm.taobao.org
3.全局安装vue的脚手架工具 -- 凡是安装失败的, 肯定是中国镜像不对或没有网
4.npm i -g @vue/cli
所有苹果电脑, 执行命令 必须加 sudo 前缀, 用管理员方式执行, 输入你的开机密码
使用 vue -V(大写) 和 vue --version 都可以查看当前版本号
5.利用脚手架生成项目包
网速慢的同学, 几乎很难生成. -- 可以用别人生成的包
注意: 生成的目录下, 不允许有
vue.js文件
