基本概念

优点：效率更高，企业都在用，市场需求量大官方网站：cn.vuejs.org/

市场主流是2.0，慢慢在向3.0靠拢

定义：vue 是一个渐进式的 javascript 框架

渐进式：学一点用一点，不用一次学完
框架：一套完整的解决方案。能实现了大部分的功能，需要按规则写代码。
库：本质上是一些方法的集合。每次调用方法，实现一个特定的功能的工具箱

MVVM的框架

定义：MVVM通过数据双向绑定让数据自动地双向同步的软件架构模式

M：model数据模型(ajax获取到的数据)
V：view视图（页面）
VM：ViewModel 视图模型 (操作视图+模型)

原生和Vue修改视图的区别

原生：dom驱动，修改视图，操作dom
vue：数据驱动，修改数据，操作数据即可

优点

实现了数据驱动视图
提高开发效率，提高开发效率
方便做测试

vue组件化思想

定义：一个组件会包含（HTML+CSS+JS），完整的页面可以拆分成多个组件优点：易于维护，便于复用，提搞效率

脚手架的使用

作用：帮助我们搭建项目的工具开发vue有两种方式：

传统开发模式：基于html/css/js文件开发 vue
工程化开发方式：在webpack环境中开发vue

vue脚手架定义：@vue/cli，是vue官方提供的一个全局命令工具，可以快速的创建一个vue项目的基础架子。

优点

开箱即用
零配置（不用手动配webpack）
内置babel等工具

基本使用

全局安装：npm i @vue/cli -g或yarn global add @vue/cli
查看vue版本：vue --version/vue -V
创建一个vue项目：vue create 项目名
1. 不能用中文，不要用大写
2. 会显示选择vue版本，上下键选择，回车确认
启动项目：npm run serve 或 yarn serve
1. 一定要在项目根目录运行（package.json所在目录）
在vue.config.js中的defineConfig添加配置

// 代码检查，多一个空格都会报错，先关闭
lintOnSave: false,
	// 配置本地开发服务器的端口号
	devServer: {
		port:3000,
},

打包项目：npm run build 或 yarn build

文件目录

vue-startup-pc —— 项目目录
- node_modules —— 下载的第三方包
- public —— 静态文件目录
  - favicon.ico —— 浏览器小图标
  - index.html —— 运行的浏览器网页
- src —— 业务文件夹
  - assets —— 静态资源
    - logo.png —— vue的logo图片
  - components —— 复用目录，常配合复用
    - HelloWorld.vue —— 欢迎页面vue代码文件
  - views —— 页面组件目录，常配合路由，默认没有，自己创建
  - app.vue —— 整个应用的根组件
  - main.js —— webpack打包的入口
- .gitignore —— git提交忽略配置
- babel.config.js —— babel配置
- package.json —— 依赖包列表文件
- package-lock.js ——
- README.md —— 项目说明
- yarn.lock —— 项目包版本锁定和缓存地址
- vue.config.js —— 脚手架项目的配置文件

vue单文件

template：HTML，只能有一个标签
script：js
style：less、sass

vue插值表达式

作用：使用 data 中的数据渲染视图（模板）语法：{{ 表达式 }} 注意：

使用数据在 data 中必须存在
不能在标签属性中使用 {{ }} 插值
变量写在data的返回对象中，函数写在methods的对象中

表达式

变量，属性，数字，字符串，函数，数学运算符，对象.键，三元表达式...

vue如何提供数据

通过 data 属性可以提供数据， data属性必须是一个函数
这个函数需要返回一个对象，这个对象就代表vue提供的数据

<script>
export default {
  name: 'App',		// 在浏览器插件中可以查看
  data() {
    return {
      name: "小陈",
      age:'18',
    };
  },
};
</script>

使用插值表达式，可以在模板中渲染数据

<template>
  <div id="app">
    <h1>姓名：{{ name }}</h1>
    <h2>{{ age >= 18 ? '成年' : '未成年' }}</h2>
    <h2>{{ hello() }}</h2>
  </div>
  <!-- template下只能有一个标签 -->
</template>

vue指令

定义：特殊的 html 标签属性特点： v- 开头

-v-bind

说明：插值表达式不能用在html的属性上，想要动态的设置html元素属性，需要使用v-bind指令作用：动态的设置html的标签属性语法：v-bind:属性名="表达式"

简写：:属性名="表达式"——常用

<template>
  <div id="app">
    <input type="text" v-bind:value="userId" />
		<!-- 简写写法： -->
		<input type="password" :value="password" /> 
  </div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			userId: "",
			password: "",
		};
	},
};
</script>

-v-on

作用：给标签绑定事件语法：

v-on:事件名=“少量代码"
v-on:事件名=“函数"（没有传参可以不加括号）
v-on:事件名=“函数(参数)"
简写：@事件名=" "

注意：函数在methods中提供

<template>
  <div>
    <!-- 少量代码 -->
		<button @click="money = money + 10">加10</button>
    
		<!-- 不传参，可以省略括号 -->
		<button @click="addFifty">加50</button>

		<button @click="addMoney(100)">加100</button>

  </div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
				money: 100,
			};
	},
	methods: {
		addFifty() {
			this.money += 50;
			},
		addMoney(num) {
			this.money += num;
			},
	},
};
</script>

vue中获取事件对象

没有传参, 通过形参接收 e
传参了, 通过$event指代事件对象 e
使用场景：
- 阻止默认事件

<template>
	<div>
		<!-- 这里的fn不能加括号，加括号必须写fn($event) -->
		<a href="https://www.baidu.com/" @click="fn">111</a> 

		<a href="https://www.baidu.com/" @click="fn2(0, $event)">222</a>
	</div>
</template>

<script>
export default {
	name: 'App',
	methods: {
		fn(e) {
			e.preventDefault();
			console.log('阻止成功');
		},
		fn2() {
			e.preventDefault();
			console.log(a);
		},
	},
};
</script>

获取点击坐标

事件修饰符

作用：可以快速阻止默认行为或阻止冒泡语法：

@事件名.prevent= “ ”——阻止默认行为
- 可以直接写：@事件名.prevent

<template>
	<div>
		<a href="https://www.baidu.com/" @click.prevent="fn">页面不会跳转</a>
	</div>
</template>

<script>
export default {
	name: 'App',
	methods: {
		fn() {
			console.log('阻止成功');
		},
	},
};
</script>

@事件名.stop=“ ”——阻止冒泡

按键修饰符

内置按键修饰符：

.enter
.tab
.delete（捕获‘删除’和‘退格’键）
.esc
.space
.up
.down
.left
.right

语法：

@keyup.enter 监听回车键
@keyup.esc 监听返回键

<template>
	<div>
		<input type="text" @keyup.enter="enter" @keyup.esc="esc" />
	</div>
</template>

<script>
export default {
	name: 'App',
	methods: {
		enter() {
			console.log('enter按键弹起');
		},
		esc() {
			console.log('esc按键弹起');
		},
	},
};
</script>

v-show 和 v-if

v-show

语法: v-show="布尔值" (true显示, false隐藏)
原理: 实质是在控制元素的 css 样式, display: none;

v-if

语法: v-if="布尔值" (true显示, false隐藏)
原理: 实质是在动态的创建或者删除元素节点
配合v-else-if，和v-else使用，实现条件控制
- 必须是相邻标签

<template>
	<div>
		年龄{{ age }}，
		<span v-if="age < 18">少年</span>
		<span v-else-if="age < 30">青年</span>
		<span v-else-if="age < 60">中年</span>
		<span v-else>老年</span>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			age: 26,
		};
	},
};
</script>

应用场景:

如果是频繁的切换显示隐藏, 用 v-show

(v-show, 只是控制css样式，而v-if, 频繁切换会大量的创建和删除元素, 消耗性能)

如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

(v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销)

Vue学习笔记01