Vue2 学习第一天
1. 什么是 vue?
Vue 是一套用于构建用户界面的渐进式框架。
2. vue 历史
vue 是在 2013 年创建的，vue3 是 2020 出现的，现在主要是用 vue2，创新公司用的是 vue3
vue 的作者是尤雨溪，vue 的搜索热度比 react 更高，国内 vue 用的人更多，国外的用 react 多。
3. vue 学习的内容
注：标黄是学习的内容
今天学习：常用指令，事件，生命周期，计算属性，watch
4. Vite 构建 Vue 项目
- 在 cmd 中输入以下代码，构建 vue 项目。
pnpm create vue@2
cd vue_demo //进入vue_demo文件夹
pnpm install //下载相关的依赖包（下载别人写的代码）
pnpm dev //打开终端，进入网页
小 tips：如果下载很慢，可以用 ctrl+c 进行中断，重下；也可以切换淘宝源来下载。
- 在终端输入**
pnpm dev**打开终端
- 以下是 vue 的目录结构介绍
可以下载vetur插件，可以进行代码提示。
5. Vite 配置文件说明
import legacy from "@vitejs/plugin-legacy";
import vue2 from "@vitejs/plugin-vue2";
@的含义：@这里是代替了src路径。
6. main.js 文件说明
// import 就是引入文件
import Vue from "vue";
// App是我们的根组件
import App from "./App.vue";
import "./assets/main.css";
// h函数就是帮助我们渲染页面的函数
new Vue({
el: "#app",
render: (h) => h(App),
});
7. Vue 文件总结
vue 文件主要由template、script和style组成。
<template>
<div></div>
</template>
<script>
export default {
name: "",
};
</script>
<style scoped></style>
-
template 模板用法
template 是我们的视图，可以在里面写 html
<template> <div></div> </template> -
绑定事件
@click叫做指令
v-on:click，@是 v-on 的简写 v-on的意思就是触发一个事件 ，使用**v-on:xxx**或 **@xxx**绑定事件，其中 xxx 是事件名；addNum就是具体的事件函数。<button @click="addNum">+1</button> -
大胡子语法
{{ }}大胡子语法，大胡子里面可以放我们data中的变量<span>{{ num }}</span> -
data 数据源
- data 是我们的数据源，vue 会对 data添加监听，能够监听到 data 中数据的变化，然后触发视图更新
- data 写法比较奇怪，是一个函数，函数返回一个对象，对象中的数据才是我们的数据源
export default { data() { return { num: 0, }; }, -
methods 配置函数
- methods 就是我们的事件处理中心，所有的函数都放在里面
- methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了
- methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是vm或组件实例对象
methods: { addNum() { console.log(this); this.num++; }, }, -
整体 vue 文件
<template> <div id="test"> <button @click="addNum">+1</button> <span>{{ num }}</span> </div> </template> <script> export default { data() { return { num: 0, }; }, methods: { addNum() { console.log(this); this.num++; }, }, }; </script> <style> #test { margin: auto; } </style>
8. v-if 条件渲染
-
v-if
-
写法：
-
v-if="表达式" -
v-else-if="表达式" -
v-else="表达式"
-
-
适用于：切换频率较低的场景。
-
特点：直接通过删除 DOM 元素来控制显隐。
-
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。
-
-
v-show
- 写法：
v-show="表达式" - 适用于：切换频率较高的场景。
- 特点：不展示的 DOM 元素未被移除，仅仅是使用样式**
display:none**隐藏掉
- 写法：
v-if 和 v-show 的区别：
- 需要频繁操作 DOM 元素显隐的时候，用 v-show 性能会更好
- 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<template>
<div id="wrapper">
<button v-on:click="toggle">toggle</button>
<p v-if="isShow">hello world</p>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true,
};
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
},
};
</script>
<style></style>
