共计 1545 个字符，预计需要花费 4 分钟才能阅读完成。
当你初识 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-if
v-else
v-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')
