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