Vue基本介绍
简介:Vue是构建用户界面的JavaScript框架(渐进)。
特点:数据驱动视图
JavaScript、JQuery、Vue对比
- JavaScipt:document.querySelector
- JQuery:封装方法,简化了操作代码$(’ ')
- Vue:开发者只需要操作数据包,不需要操作DOM,Vue帮我们操作DOM
最基本的使用
<div id="app">
<button @click="num++">num:{{num}}</button>
</div>
<script src="../vue.global.js"></script>
<script>
let app = Vue.createApp({
data() {
return {
num: 0
}
}
})
app.mount('#app')
</script>
结果:
最基本的案例(还未使用构建工具)向我们展示了Vue连个核心功能:
声明式渲染 和 响应式
声明式渲染 :Vue相当于是拓展开了一套模板语法,这样就可以声明式地描述最终输出结果和js状态之间的关系
响应式:js的状态发生变化,而DOM也在跟着变化,这就是响应式
API风格
Vue组件有两种不同的风格:选项式API 和 组合式API
在最初学习的时候,我就先熟悉选项式API
<div id="app">
<button @click="add">num:{{num}}</button>
</div>
let app = Vue.createApp({
// data()返回的属性将成为响应式,DOM也会随着data里属性的变化而变化,并且暴露在this上
data() {
return {
num: 0
}
},
//methods 触发更新的函数以及改变状态的都放在这里面
methods: {
add() {
this.num++
}
},
// 生命周期函数会在不同阶段被调用
updated() {
console.log("我被调用了");
},
})
app.mount('#app')
如上图所示,每当点击一次时,updated就会被调用输出一次(后面会总结生命周期函数,这里只是体验一下选项式API)
采用构建工具
脚手架
在开发比较大的项目中,搭建更高级的开发环境
@vue/cli 官网
@vite官网
vite的使用
在使用vite搭建项目结构,要下载Node.js,且版本必须要是14.18以上
使用步骤:
- npm create vite@latest
- 安装依赖,启动项目
- cd vite-project 进入项目目录
- npm i 安装项目的依赖,只需要在第一次创建项目的时候执行
- npm run dev 启动项目
- 在浏览器预览项目
单文件组件(SFC)
SFC是一种特殊的文件格式,每一个Vue组件的模板、逻辑、样式单独封装在单个文件种。(以下我都先用选项式API学习)
<script>
export default {
data() {
data() {
return{
msg: "hi"
}
}
},
};
</script>
<template>
<div>
<p class="title">{{ msg }}</p>
</div>
</template>
// style 带有 scoped 时,css只会影响当前组件的元素
<style lang="scss" scoped>
.title {
background-color: pink;
}
</style>
单文件组件相当于是对HTML\CSS\JavaScript三种语言的延伸
<script>
:里面封装了组件逻辑
<template>
:里面封装了组件的视图
<style>
:里面封装了组件的样式
SFC的工作模式
SFC是Vue框架指定的文件格式,必须交给@vue/compiler-sfc编译为标准的JavaScript和CSS,每个编译后的SFC是一个标准的ES模块,在构建配置正确情况下,就可以像导入其它ES模块一样导入SFC了
<script>
import myFirst from "./components/myfirst.vue";
export default{
//components只是注册了局部组件,注册之后只能在当前页面使用
components:{
myFirst
}
}
</script>
<template>
<div>
<myFirst />
</div>
</template>
<style scoped>
</style>
vue应用
每个Vue都是通过createApp函数创建的新的应用实例
实际上 createApp 的对象也是一个组件,每个应用都要有”根组件“
App (root component)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
│ └─ TodoEditButton
└─ TodoFooter
├─ TodoClearButton
└─ TodoStatistics
挂载应用
<div id="app"></div>
app.mount('#app')
根组件内容会渲染在容器元素里卖弄,但是容器元素不会被视为应用的一部分
文本插值
<p>msg:{{msg}}</p>
msg属性变化时,DOM也会同步更新
Attribute绑定
想要响应式地绑定一个属性,要用到v-bind指令
<p v-bind:class="box></p>"
以上地例子是,将元素地class属性与组件地box属性一样,如果绑定地值为null或者undefined,那么属性将会在元素上消失
简写<p :class="box"></p>
响应式基础
声明响应式状态
<script>
export default {
data() {
return{
msg: "hi"
}
},
mounted(){
//this 指向当前组件实例
console.log(this.msg)
// 数据属性也可以被更改
this.msg='~hi~'}
};
实例的属性写在data函数返回对象上,在首次创建时就被添加了。也可以不在data上定义,但是这个属性无法触发响应式更新
声明方法
<script>
export default {
data() {
return{
msg: "hi",
num=0
}
},
//为组件添加方法,要用到methods
methods () {
addNum(){
this.num++
}
},
};
</script>
DOM更新时期
再更改响应式状态后,DOM也会自动更新,实际上DOM并不是实时更新的,Vue会缓冲它们直到更新周期”下个时机“确保无论进行了多少次声明更改,每个组件都只需要更新一次。
如果要等待一个状态改变后DOM更新完成,就需要使用nextTick()