当你初识Vue时，这些你必须知道！
1 Vue概述
1.什么是Vue？
Vue就是构建用户界面的渐进式javascript框架，而Vue也和React以及Angular并称为前端三大框架。
2.Vue的安装
需要我们首先在Vue官网上下载Vue的js文件并引入。
代码语言：javascript复制<script src="vue.js">3.实例化
模板
代码语言：javascript复制<div id=“app”></div>创建app
代码语言：javascript复制const app = Vue.createApp({
data(){ return {}}
})挂载
代码语言：javascript复制app.mount("#app")2 内置指令
在Vue中以 v- 开头的特殊属性，联系 html 模板与 javascript 数据模型就是内置指令
1.文本渲染
代码语言：javascript复制v-text更新元素的 textContent ,更新部分的 textConten t时，需要使用 Mustache 插值
代码语言：javascript复制{{msg}}只能写一行表达式,不能写复杂js,如if
代码语言：javascript复制v-html输出真正的 HTML
2.属性渲染
代码语言：javascript复制v-bind:属性名=“值”动态地绑定一个或多个 attribute，或一个组件 prop 到表达式可简写为 :属性名=“值”
3.条件渲染
代码语言：javascript复制v-if根据表达式的值的真假来插入/移除元素，在切换时元素及它的数据绑定 / 组件被销毁并重建 ; 如果元素是 <template>，将提取它的内容作为条件块 ; 当条件变化时该指令触发过渡效果 ; 当和 v-for 一起使用时，v-if 的优先级比 v-for 更高.和v-if对应的还有
代码语言：javascript复制v-else-if
v-else
v-showv-show 隐藏式css方式，v-if 隐藏式移除节点 ; 频繁切换用v-show，反之用v-if
4.列表渲染指令
代码语言：javascript复制v-for=“(item,index) in list” :key="item"item 变量的当前数据 , index 当前的下标key是给vue遍历的节点一个唯一的标识符，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一.遍历对象
代码语言：javascript复制v-for="(value,key) in obj"范围
代码语言：javascript复制v-for="item in 5"v-for与v-if用template
代码语言：javascript复制<template v-for="item in 10" >
<p v-if="item%2===0">{{item}}</p>
</template>3 Vue事件
1.监听事件
我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。
代码语言：javascript复制<button @click="counter ">{{counter}}</button>
<button v-on:click="counter--">{{counter}}</button>
Vue.createApp({
data() {
return { counter: 1 }
}
}).mount('#app')2.事件处理方法
许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
代码语言：javascript复制<button @click="greet">问候</button>
Vue.createApp({
data(){return{name:'vue'}},
methods: {
greet(event){
alert('你好' this.name)
}
}
}).mount('#app')3.内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
代码语言：javascript复制<button @click="say('你好')">问候你好</button>
<button @click="say('吃饭了没')">问候吃饭</button>
Vue.createApp({
methods:{
say(msg){alert(msg)}
}
}).mount('#app')
