vscode配置一些插件：Live Server，Vetur
一. 引入Vue
<script type="text/javascript" src="../js/vue.js"></script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
二.初始vue
vue的2个模板语法
①插值语法
写法：{{xxx}}，xxx是js表达式，xxx再通过data中的数据输入呈现出来
②指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
例如：v-bind:href="xxx"，简写:href=“xxx”，很多指令形式都是v-开头
三.数据绑定
①v-bind单向绑定：数据只能从data流向页面。就是
②v-model双向绑定：数据不仅能从data流向页面，还可以从页面流向data。就是哪边发生变化两边都会改变
四.el与data的两种写法
五.vue中的数据代理
通过vm对象来代理data对象中属性的操作（读/写）
六.事件处理
事件的基本使用：
①.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；例如@click
②.事件的回调需要配置在methods对象中，最终会在vm上；
③.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
④.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
⑤.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
然后一些事件的修饰符
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）； 4.capture
2.stop：阻止事件冒泡（常用）； 5.self
3.once：事件只触发一次（常用）；6.passive
七计算属性-computed
例如：
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
computed:{
fullName(){
return this.firstName + '-' + this.lastName
}
}
八.监视属性-watch
监视的两种写法：
①.new Vue时传入watch配置
②.通过vm.$watch监视
immediate:true, //初始化时让handler调用一下，默认是false
deep:true,//深度监视
九.绑定样式
①class样式
写法:class="xxx" 之前就学过的
②style样式
对象写法:style="styleObj" //data中的数据
数组写法:style="styleArr" //data中的数据
十、条件渲染
①v-if
写法：
1..v-if="表达式"
2.v-else-if="表达式"
3.v-else="表达式"
②v-show
十一、列表渲染
1.v-for指令：用于展示列表数据，搭配key使用
2.列表过滤-filter
3.列表排序
在vue中修改数组常用的一些方法
push()pop()shift()unshift()splice()sort()reverse()
十二、收集表单数据
v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
十三、过滤器
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
十四、一些内置指令
1.v-text
2.v-html
3.v-cloak（这个感觉没什么用）
4.v-once
5.v-pre
十五、自定义属性
1.例如定义一个v-big，然后通过函数形式对big进行定义
十六、生命周期
将要创建>调用beforeCreate函数
创建完毕>调用created函数
将要挂载>调用beforeMount函数
挂载完毕>调用mounted函数（重要）
将要更新>调用beforeUpdate函数
更新完毕>调用updated函数
将要销毁>调用beforeDestory函数（重要）
销毁完毕>调用destroyed函数
十七、组件
实现应用中局部功能代码和资源的整合。
也就是提高代码复用率，可以直接引入
①let，用于定义声明局部变量
②const，声明常量
③箭头函数=>
忘记的css关于阴影box-shadow的写法
h-shadow必需。水平阴影的位置。允许负值。(正值是在右边，负值是在左边)v-shadow必需。垂直阴影的位置。允许负值。(正值是在下边，负值是在上边)
blur 可选。模糊距离。(阴影的覆盖面积)
spread可选。阴影的尺寸。(阴影的尺寸)
color可选。阴影的颜色。请参阅cSS颜色值。(阴影的颜色)
inset可选。将外部阴影 (outset)改为内部阴影。(默认是外部，内部阴影和外部阴影的设置)
简写形式例如 box-shadow: 10px 10px 5px #9521de;
