1. Vue简介Vue是什么？Vue是前端优秀框架， 是一套用于构建用户界面的渐进式框架
为什么要学习VueVue是目前前端最火的框架之一Vue是目前企业技术栈中要求的知识点Vue可以提升开发体验Vue学习难度较低…Vue官网Vue中文官网:https://cn.vuejs.org/ Vue官网:https://vuejs.org/
2.Vue开发前的准备安装Vue工具 Vue CLIVue CLI Vue.js 开发的标准工具，Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
npm install -g @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
vue --version
创建一个项目运行以下命令来创建一个新项目
vue create vue-demo
温馨提示
在控制台中，可以用上下按键调整选择项
在控制台中，可以用空格(spacebar)选择是否选中和取消选中
可以选择默认项目模板，或者选“手动选择特性”来选取需要的特性。
我们选择Babel和Progressive Web App (PWA) Support 两个选项即可
温馨提示
在学习期间，不要选中 Linter / Formatter 以避免不必要的错误提示,不然多个空格都可能导致编译不通过
Vue目前有两个主流大版本vue2和vue3，选择vue3最新版本
配置放在哪里? 选In dedicated config files 专用配置文件或者 In package.json 在package.json文件
将其保存为未来项目的预置? y代表保存，并添加名字，n不保存 选N
运行项目第一步：进入项目根目录cd vue-demo
第二步：运行npm run serve 启动项目
安装Vue高亮插件VSCode中安装vetur或者Vue(Official)都可，前者针对Vue2版本，后者针对Vue3版本
vue-demo主要文件介绍项目中主要看src目录,平常开发的代码在这个目录,下面针对src下的结构大概介绍 App.vue组件主入口 main.js 所有程序的入口(相当于java的main) components目录,写.vue文件
3. 模板语法(在HTML中动态设置文本内容和id)文本数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值
Message: {{ msg }}
一般配合js 中的data()设置数据
export default {
name: 'HelloWorld',
data(){
return{
msg:"消息提示"
}
}
}
原始 HTML双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html 指令
Using mustaches: {{ rawHtml }}
Using v-html directive:
data(){
return{
rawHtml:"百战"
}
}
属性 AttributeMustache 语法不能在 HTML 属性中使用，然而，可以使用 v-bind 指令
data(){
return{
dynamicId:1001
}
}
温馨提示
v-bind: 可以简写成 :
使用 JavaScript 表达式在我们的模板中，我们一直都只绑定简单的 property 键值，Vue.js 都提供了完全的 JavaScript 表达式支持
{
{ number + 1
}
}
{
{ ok ? 'YES' : 'NO'
}
}
{
{ message.split('').reverse().join('')
}
}
这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<
!-- 这是语句，不是表达式：-->
{
{
var a = 1
}
}
<
!-- 流程控制也不会生效，请使用三元表达式 -->
{
{
if (ok) {
return message
}
}
}
4. 条件渲染v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
我是孙猴子
data() {
return {
flag: true
}
}
v-else你可以使用 v-else 指令来表示 v-if 的“else 块”
我是孙猴子
你是傻猴子
data() {
return {
flag: false
}
}
v-show另一个用于条件性展示元素的选项是 v-show 指令
v-if vs v-show 的区别v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
5.列表渲染用 v-for 把一个数组映射为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
data() {
return {
items: [{ message: 'Foo'
}, { message: 'Bar'
}]
}
}
维护状态注:设置key,没有变动的数据不会取渲染，不至于浪费性能
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：
6. 事件处理监听事件我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"
data() {
return {
counter: 0
}
}
事件处理方法然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
methods: {
greet(event) {
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
内联处理器中的方法这是官方的翻译称呼，其实我们可以直接叫他 “事件传递参数”
methods: {
say(message) {
alert(message)
}
}
示例代码:
{{ message }}
{{ item }}
export default {
name: 'HelloWorld',
data(){
return {
counter:1,
message:"消息通知",
names:["iwen","ime","frank"]
}
},
methods:{
clickHandle(event){
//在事件中读取data中的属性
this.message="消息被撤回了";
console.log(event);
event.target.innerHTML="点击之后";
},
say(data){
console.log(data);
},
clickItemHandle(item){
console.log(item);
}
}
}
7. 表单输入绑定你可以用 v-model 指令在表单 、