vue基础笔记（p1-19）
看的是这个教程->这个
非常非常简略
目录
vue插件
vue基础
官网****地址：https://learning.dcloud.io/#/?vid=1
官网的教程非常详细，可以直接通过文档进行学习。
我们使用vue都需要新建一个vue的对象，并且在参数部分声明一个匿名对象，对象中需要有基础的el和data。
一般情况下我们都声明vm变量来承接这个对象
vue完全支持javascript的表达式，例如：
插值
使用{{}}进行插值
模板语法
指令 (Directives) 是带有 v-前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式(v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
修饰符：
修饰符 (modifier) 是以半角句号 .指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
如下例子：如果不添加.stop修饰那么会执行click1和click2，但是如果添加之后就表示只执行click2之后就直接停止。
class和style的绑定：
使用v-bind进行绑定。绑定之后可以进行动态的style操作，同样支持多样式绑定，之间使用逗号隔开，数组形式代替大括号同样可行。
绑定内联样式同样可以，这里使用了缩写：，三元运算符
条件渲染v-if，v-show
两者大致相同。v-show始终渲染并且保留到DOM中，但是v-if条件不满足不渲染。
只有在为true时才会执行。
列表渲染v-for
语法为：v-for=“item in items”。items表示数据数组，item表示被迭代的数据元素的别名。如下两个例子
我们使用index来获取索引，使用key来获取属性名
事件监听v-on
v-on可以绑定当前html元素的所有事件。
简单逻辑的例子，逻辑直接卸载button中
复杂逻辑的例子，我们把方法写到methods
同样可以传递参数，不要以为在“”中就觉得有什么不同其实写法是一样的。同样是实参和形参
表单输入双向绑定v-model
双向绑定，既可以作为输入绑定，也可以作为输出绑定
组件
可以重复利用的vue实例，和new vue使用相同的选项。
需要有一个根节点，如果根节点有兄弟节点那么无法正常显示。
第一个参数是组件名称，也是上面组件使用的名称，第二个是回调函数。
这种方式为全局注册。
局部注册：
单文件组件
启动图形化vue项目管理器
****
数据绑定：数据可以自动的从内存到页面中
最基础的使用案例：
MVVM
model：模型，数据对象（data）
view：视图，模板页面
viewModel：视图模型（本质上就是vue的实例，也就是vm）
模板语法
模板包含了一些js语法，表达式，指令
双大括号表达式
语法：{{exp}}或者{{{exp}}}
功能：向页面输出数据，可以调用对象的方法
指令1：强制数据绑定
语法：详细：v-bind：xxx=‘yyy’ 简略：：xxx=‘yyy’ 这里的yyy会作为表达式解析执行
功能：指定变化的属性值
指令2：绑定事件监听
语法：详细：v-on：click=‘xxx’ 简略：@click=‘xxx’
功能：绑定指定事件名的回调函数
计算属性和监视
计算属性
在computed属性对象中定义计算属性的犯法
在页面中使用{{方法名}}来显示计算结果
监视属性
通过vm对象的$watch（）或者watch配置来监视指定的属性
当属性变化时，回调函数自动调用，在函数内部计算。
计算属性高级
通过getter/setter事项对属性数据的显示和监视
计算属性存在缓存，多次读取只执行一次getter计算
class和style绑定
class绑定： v-bind：class='XXX' ,可以是数组，对象，字符串
style绑定： v-bind：style="{ color:activeColor , fontSize:fontSize + 'px' }"
activeColor/fontSize是data属性
条件渲染
v-if
v-else
v-show：频繁切换使用这个会比较好
列表渲染
列表显示：
数组：v-for、index
对象：v-for、key
列表的更新显示
删除item
替换item
使用v-model进行自动表单收集
最终使用value中的值进行收集数据
Vue生命周期
如果是匿名函数就使用箭头函数
挂载：
死亡之前：
销毁：
过渡和动画
最终是要自己制定样式
过滤器
日期
对日期进行格式化使用mement.js的外部库
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
更新：
指令
内置指令
ref的使用方法，作为标示
通过$refs获取到叫做content的标签内容，
为了防止网页加载过慢出现{{msg}}，我们可以使用v-cloak，然后在style中设置上图所示的内容，防止未加载完成页面出现{{msg}}
自定义指令
针对所有Vue的就是全局，针对某个Vue就是局部
插件
我们需要 新建一个js文件
插件库需要在原来库的下面：
生命周期钩子
JS中数组常用方法
https://www.cnblogs.com/my466879168/p/12337760.html
vue的变异方法
对js的数组方法重写，同时也能更新界面。