创建一个Vue应用
1.应用实例
每个Vue应用都是通过createApp函数创建一个新的应用实例
import { createApp } from ‘vue’
const app = createApp({ //根组件选项})
2.根组件
若使用的是单文件组件，可直接从另一个文件中导入根组件
import {createApp } from ‘vue’
import App from ‘./App.vue’
const app=createApp(App)
3.挂载应用
实例对象必须调用 .mount()后才能渲染出来
app.mount(‘#app’) //可以是一个实际的DOM元素或者一个CSS选择器字符串
4.根组件模板
import{creatApp} from ‘vue’
const app=creatApp({
data(){
return{count:0}
}
})
app.mount(“#app”)
模板语法
1.文本插值（大括号)
Message : {{msg}} //会将数据解释为纯文本
2.原始HTML（v-html）
Using v-html direction:
//插入HTML
3.attribute绑定（v-bind）
双括号不能在HTML attribute中使用，要想响应式的绑定一个attribute，使用v-bind指令
简写：
v-bind指令知识Vue将元素id attribute与组件dynamicId属性保持一致，如果绑定的值为null/undefined，则attribute将会在渲染元素上移出
（1）布尔型attribute：依据true/false来决定attribute是否应该存在该元素上
（2）动态绑定多个值：通过不带参数的v-bind将一个包含多个attribute的JS对象绑定到单个元素上
data(){
return{
ObjectOfAttrs:{
id:” “,
class:” “
}
}
}
4.使用JavaScript表达式
在Vue模板中，JavaScript表达式可以使用在文本插值中和任何Vue指令attribute的值中。每个绑定仅支持单一表达式，一段能够被求值的JavaScript代码（能合法的写在return后面）
使用调用函数：{{formateDate(date)}}
5.指令Direction
指令是一个带有v-前缀的特殊attribute，指令attribute的期望值为一个JavaScript表达式，一个指令的任务是在其表达式的值发生变化时响应的更新DOM
6.参数Arguments
动态参数中表达式的值应当是一个字符串或null，null意为显示移除该绑定，其他非字符串会触发警告动态参数语法的限制。
动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号在HTML attribute名称中不合法，在使用DOM内嵌模板时名称大写字母会强制转换为小写
7.修饰符Modifiers
以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定
响应式基础
1.声明响应式状态（data）
选用选项API时，用data选项来声明组件的响应式状态，此选项值返回一个对象函数
export default{
data(){
return{
count:1}
},
mounted(){
console.log(this.count) //this指向当前组件实例
this.count=2
}
}
//实力上的属性仅在实例首次创建时被添加，所以要确保出现在data函数返回的对象上，可以用null | undefined 占位，若不在data定义，直接向组件实例添加新属性，该属性无法触发响应式更新
2.声明方法
Vue自动给methos中的方法绑定永远指向组件实例的this（methos中的方法不能用箭头函数，因为箭头函数没有自己的上下文）
3.DOM更新时机
若要等待一个状态改变后的DOM更新完成，可使用nextTick()这个全局变量
import { nextTick} from ‘vue’
export default {method:{ increment() { this.count++
nextTick(()=>{})
}}}
4.深层响应式（Vue默认深层响应式）
export default { data() {
return{
obj:{ nested:{count:0},
arr:[‘foo’,’bar’]
}}},
methods:{ mutateDeeply(){this.obj.nested.count++
this.obj.arr.push(‘baz’)
5.有状态方法
要保证每个组件实例的方法函数都彼此独立，在created生命钩子中创建方法函数
eg:预制防抖的事件处理器的创建
import { debounce } from ‘lodash-es’
export default{
methods:{click:debounce(function(){
//对点击的响应
}}
=>
export default {
created(){
this.debouncedClick=_.debounce(this,click,500)
},
unmounted(){//最好在组件卸载时清除掉防抖计时器
this.debouncedClick.cancel()
},
methods:{click(){//对点击的响应}
}
计算基础重点
export default{ data(){ return{ author:{ name:'John', books:[ 'A', 'B', 'C' ] } } }, computed:{ publishedBooksMessage(){ return this.author.books.length>0" /> ////class绑定 //当isActive为true时，//组件有多个根元素时，用组件的$attrs属性来实现指定This is a child component/*This is a child component*/2.绑定内联样式
（1）直接绑定JavaScript对象值
data() { return { activeColor:"red", fontSize:30 } }
（2）直接绑定一个样式对象
data(){ return{ styleObject:{ color:'red', fontSize:'13px' } }}
（3）绑定返回样式对象的计算属性
（4）绑定数组
（5）自动前缀
可以通过给属性添加前缀来实现浏览器支持，可以对一个样式属性提供多个（不同前缀的）值，数组只会渲染浏览器支持的那个值
条件渲染
1.v-if
条件性的渲染一块内容，只有在指令表达式返回true时才会被渲染
awesome!
2.v-else
必须在v-if | v-else-if后面使用
返true
返false
3.v-else-if
必须在v-else-if | v-if后面使用
4.在上添加v-if | v-else |v-else-if
用来切换多个元素
...
5.v-show
v-show会在DOM渲染中保留该元素，仅切换了该元素上display属性，无论初始条件如何，始终都会被渲染。
列表渲染
1.v-for基于数组渲染列表
data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] }}{{ item.message }} /* 输出结果：Foo Bar*/item为迭代项别名，items为源数据的数组
也可以完整访问父作用域内的属性和变量
data() { return { parentMessage: 'Parent', items: [{ message: 'Foo' }, { message: 'Bar' }] }}{{ parentMessage }} - {{ index }} - {{ item.message }} /*输出结果 Parent-0-Foo Parent-1-Bar*/
2.v-for 遍历对象所有属性
data() { return { myObject: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } }} {{ index }}. {{ key }}: {{ value }} /*输出：0.title.How to do lists in Vue1.author.'Jane Doe'2.publishedAt.2016-04-10*/3. v-for中使用范围
n的初值是从1开始而不是0，v-for也可以用在上使用来渲染一个包含多个元素的块
这是第{{n}}次循环
4.v-for与v-if
v-if 和 v-for同时存在在一个元素上的时候，优先执行v-if，这意味着v-if的条件无法访问到v-for作用域内定义的变量别名，解决办法，在该元素外面新包装一层，将v-for定义在其上
5.通过key管理状态
给每个元素对应的块提供一个唯一的key attribute来跟踪每个节点的标识，从而重用和重新排序现有的元素
注意事项：v-for在循环时，key只能使用number获取string
key在使用时只能使用x-bind的属性绑定的形式指定key值
推荐在v-for时就提供key attribute
6.在组件上使用v-for
因为组件有自己独立的作用域，在组件上使用v-for时除key还需要传递需要传递的数据
7.数组变化侦测
首先找出能够改变数组自身的数组api，再使用自定义函数覆盖
（1）变更方法
分别是：push、pop、shift、unshift、splice、sort、reverse，能变更原始数组，页面上的数据会发生同步变化，
替换一个数组
（2）替换一个数组
filter()、concat()、slice()不会变更原始数组，所以页面上的数据不会发生同步变化
8.展示过滤或排序后的结果
（1）通过计算属性来获得过滤或排序后的数组（使用reverse()和sort()时因为会变更原始数组，多以调用前需创建一个原数组的副本）
export default { data() { return { sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]] } }, methods: { even(numbers) { return numbers.filter(number => number % 2 === 0) } }}{{ n }} （2）通过 method方法
export default { data() { return { sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]] } }, methods: { even(numbers) { return numbers.filter(number => number % 2 === 0) } }}
- {{ n }}
事件处理
1.监听事件
v-on指令
2.内联事件处理器
事件被触发时执行的内联js语句
export default { data() { return { count: 0 }}}
在内联处理器中调用方法
export default{ methods: { say(message){ alert(message) } }}
在内联事件处理器中访问事件参数
methods: { warn(message, event) { if (event) { event.preventDefault() } alert(message) }}1.传入$event变量
2.使用内联箭头函数
3.方法事件处理器
v-on接受一个方法名或某个方法的调用
export default{ data(){ return{ name:'cc' } }, methods:{ A(event){ alert('Hello ${this.name}!') if(event){ alert(..) } } }}4.事件修饰符
v-on的事件修饰符。
.stop 阻止冒泡 .prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（不是子元素）触发时回调 .once 事件只触发一次 .passive 提前告诉浏览器，未使用阻止默认事件（event.preventDefault()） 格式：
可以链式书写： |
（要注意顺序，@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent只会阻止元素本身的点击事件默认行为）
5.按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符
/*仅在key为Enter时调用submit*/
.enter 回车确认键 .up 上 .tab TAB键 .down 下 .delete 捕获“删除”和“退格”键 .left 左 .esc Esc取消键
.right 右 .space 空格键 系统按键修饰符 .alt .shift .meta 在Mac键盘中是Command键，在Window键盘上是Windows键 .ctrl 系统修饰符只有当按键被按下时才会触发
Do something
6. .exact修饰符
.exact修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符
7.鼠标按键修饰符
| .left | .right | .middle |
表单输入绑定（v-model）
前端处理表单时，将表单输入框的内容同步给JavaScript中对应的变量，可以通过v-model指令简化手动连接值绑定和更改事件监听器的过程。v-model始终将当前绑定的JavaScript状态视为数据的正确来源，会忽略任何表单元素上初始的value、checked和selected attribute。
text=event.target.value”>
简化后：
v-model可以用于各种不同类型的输入，会根据所使用的元素自动使用对应的DOM属性和事件组合:
- 文本类型的和