数据绑定
v-model是实现数据双向绑定，页面发生变化，name也会发生变化；name发生变化，页面也会发生变化
<input type='text' v-model="name">
:value是实现单向绑定，name发生变化，页面就会发生变化；但是页面发生变化，name并不会发生变化
<input type='text' :value="name">
脚手架Vue CLI
在想要创建工程的目录里面输入下面内容，创建hello工程
vue create hello
选择第三个，手动选择。因为eslint暂时用不到
下一步，安空格取消掉Linter，然后按回车下一步
然后选择vue3
依赖存哪里去，一般选择package.json
是否要生成一个快照，用于后续快速创建项目
接下来就生成了vue工程
通过npm run serve运行
组件
组件化开发
需要安装的插件
装了插件才有高亮
自定义组件
定义自己的组件
在compoents目录下新建一个MyHello.vue
然后添加基本内容,定义组件名为MyHello
使用自定义的组件
接着执行npm run serve, 便可以发现组件生效了
普通组件–局部注册
局部注册，只写组件名也可以，是一种简写方法
创建一个新的vue，输入
生成后的效果
使用流程：创建组件–导入–注册–使用
普通组件–全局注册
在多个界面都要使用的通用组件可以进行全局注册，这样全局都能使用了
全局组件在main.js中进行注册
在完成组件创建后，在main.js中导入，然后全局注册即可.
全局注册完成之后，在所有的组件范围内都可以使用
普通组件的局部注册和全局注册的区别
第三方组件Element-ui
computed 计算属性
比如下面篮球数量进行更新了，礼物总数也会自动重新计算
一般属性是放data里面，而计算属性要放computed里面,并写成函数的样子
computed与methods区别
特点是computed的缓存机制，只有依赖数据变化才会重新计算，数据不变情况下，即使网页刷新也不会重复计算的。性能比较高
修改计算属性
一般情况下，计算属性是不可修改的
如果想要修改计算属性，应该将computed中的函数写法，改写成类的写法，并要有get和set两个方法
如果要实现修改，需要在set里面对依赖数值进行修改，应该将’吕‘给this.firstName，把’小布’给this.lastName。
set的本质是修改了依赖数值，然后触发了get
watch 侦听器
注意：
在js中，方法名不能直接出现 点.这种特殊字符的，需要加上引号
如’对象.属性名‘
延时器防抖
如果数据频繁变化，后台计算会比较频繁，因此可以设置延迟器。但这种情况下只会延迟执行，但是仍然都会执行；因此再次变化的时候可以删除延迟器，添加新的延迟器，进行重新计时。
这样就可以在变化停止时，进行更新。实现防抖的功能。
（与页面无关的数据，直接绑定在this对象里面，无需额外在data里面声明timer）
watch 的完整写法
比如除了监听obj中words还要监听语言，那么就要声明deep:true,监听对象obj里面的每个属性。
(如果直接监听两个，就太麻烦了，特别是数量是3个、4个…的时候)
但是handler只会在数据修改的时候才会触发，为了使得一进页面就修改一次，可以使用immediate：true
例子：
scoped样式冲突
如下图所示，这是组件的vue，只是想给BaseOne加上样式，但是所有的div都加上了样式
为了使得样式只作用于当前组件，就需要加上scoped
组件还是推荐加scoped的，因为组件应该有自己的样式,而不应该作用于全局
scoped原理(了解)
加上scoped，会给当前组件内所有元素，都添加一个哈希值，div组件名改成了 div-哈希值,因此不同组件内的div不会发生样式冲突了
组件通信
子组件给父组件通信$emit
父组件给子组件通信prop
prop
限制使用组件的人，防止他们乱传参数。
类型校验（比如下方的进度条应该传入一个数值，如果传入一个布尔值，那就应该出错）
可以通过写成对象的方式，进行更加详细的校验
如果想要修改prop值，需要子组件通知父组件去修改。直接修改prop会报错。
v-model原理
两条"
v-model还要仔细看
.sync
子组件要通知父组件修改的时候，需要 通过emit实现，并补上update:字段
简单得说，加上.sync，相当于不用额外再去写触发事件了，子组件可以直接通过emit实现，是一种语法糖。
vue调试工具
ref和refs
异步更新和$nextTick
在vue中，是要等这一段程序操作完才更新dom，这时候直接去获取焦点，是还没更新的，因此要异步去操作。
输入框获取焦点：就是光标闪烁在输入框
正确写法，$nextTick会等dom更新完后，再去获取焦点。
路由
单页应用和多页应用的区别
路由的基本使用
注意安装得时候Vue2 安装vueRouter3.x vuex3.x
Vue3安装vueRouter4.x vuex4.x
注入完成后，就能在url中看到/#/的字符了
把用于显示的文件放在views目录里面
组件存放目录问题
路由模块封装
这样在main.js中只要import，以及在new Vue中加入router即可
把路由相关内容写在router/index.js里面。注意封装后，路径改变，要进行修改，否则找不到views。
但是每次移动文件位置都要改路径很麻烦，因此可以将相对路径改为绝对路径，其中@表示src目录（但不能直接写成src）
