总结开发中最常用的vue语法,以及对特定语法的理解。vue官网
文章目录
一、创建vue项目
1、使用开发工具创建
很多开发工具新建项目带有vue
2、使用命令行创建
安装vue-cli脚手架
# Vue CLI 2.x版本
npm install -g vue-cli
# Vue CLI 3.x版本
npm install -g @vue/cli
查看版本
vue -V
创建vue项目
# Vue CLI 2.x版本
vue create <project-name>
# Vue CLI 3.x版本
vue init <template-name> <project-name>
查看可用模板
参数是必须传递的,因为它指定了使用哪个模板来创建新的Vue项目。Vue CLI 2.x版本提供了多个官方模板,如webpack、browserify、simple等,也支持第三方模板。你可以通过运行以下命令查看所有可用的模板:
vue list
3、vue框架结构
├── README.md
├── babel.config.js # js相关配置文件
├── node_modules # 项目依赖包
├── package-lock.json
├── package.json # 项目库
├── postcss.config.js # 配置CSS的预处理器
├── public # 页面入口文件
│ ├── favicon.ico
│ └── index.html
└── src # 源代码目录
├── App.vue # vue入口
├── assets # 资源文件夹
├── components # 公共组件
└── main.js # 程序入口(如java、C++的main)
4、Vue文件结构
在Vue组件中,<template>
、<script>
和<style>
标签的加载顺序是固定的,依次为:
<template>
标签:模板,用于定义组件【本质为渲染函数】<script>
标签:用于定义组件的JavaScript代码<style>
标签:CSS样式
<template>
<div class="hello">
<div >{{test}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
test:'阿森的',
}
},
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
</style>
二、Vue 常用模板语法
1、v-if、v-show
<template>
<div v-if="false" class="hello">
</div>
</template>
v-if的实现:在 Vue.js 源码中,v-if 指令的实现是通过 render 函数来实现的。当解析到 v-if 指令时,Vue.js 会根据表达式的值来决定是否需要渲染对应的 DOM 元素。
具体来说,Vue.js 会在编译阶段将模板转换为 render 函数,然后在运行时执行该函数来生成虚拟 DOM。当执行到 v-if 指令时,render 函数会根据表达式的值来决定是否需要渲染对应的虚拟 DOM 节点。
如果表达式的值为真,则会渲染对应的虚拟 DOM 节点;否则会跳过该节点不进行渲染。这样就能够实现根据条件动态渲染 DOM 元素的功能。
v-show的实现:display:“none”;
2、v-for
<template>
<div class="hello">
<div v-for="(item, index) in [{},{}]" v-bind:key="index">asfdaf</div>
</div>
</template>
3、v-on
v-on就是用于绑定事件的
绑定事件单个事件
<div v-on:click="onClickItem">asfdaf</div>
绑定多个事件
<div v-on="{ mousedown: onMouseDown, mouseup: onMouseUp }">按下或松开我</div>
可以简写为@
<div @click="handleClick">点击我</div>
4、v-bind
v-bind用于绑定数据和元素属性
<img v-bind:src="imageUrl">
一般我们省略不写
<img :src="imageUrl">
5、v-model
v-model 是 Vue.js 中用于双向数据绑定的指令,它可以将表单元素的值与 Vue 实例中的数据进行绑定,实现数据的双向同步。
<input
v-model="inputColor"
type="text"
class="input"
placeholder="颜色值,例:#0099FF"
adjust-position="true"
>
v-model与v-bind区别:
1、v-model用于在表单元素和Vue.js实例的数据之间建立双向绑定关系
2、v-bind用于动态地绑定HTML元素的属性值
如果换成v-bind的话,如下:
仅仅在data刷新是能初始化数据,而输入框编写并不能触发data刷新,这里会造成不同步。
<input :value="inputColor">
三、组件通信
1、父组件给子组件传递
HelloWorld.vue
提供对外的onAlert方法
<template>
<div class="hello">
<h1>asdf</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods:{
onAlert() {
alert('123')
},
}
};
</script>
父页面使用ref调用
<HelloWorld ref="helloWorldRef" />
this.$refs.helloWorldRef.onAlert();
2、子组件给父组件传递
父页面提供回调方法:@changeSelect=“changeSelect”
<template>
<div id="app">
<HelloWorld @changeSelect="changeSelect" msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
methods:{
changeSelect(e){
alert('子组件调用父页面'+e)
}
}
}
</script>
子组件调用
<template>
<div class="hello">
<h1 @click="onTapItem">asdf</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods:{
onTapItem() {
this.$emit('changeSelect', '123');
},
}
};
</script>
四、生命周期
1、页面生命周期
vue的完整生命周期
Vue.js 的生命周期钩子是一组在组件实例化、更新和销毁过程中自动调用的函数,用于执行特定的操作。Vue.js 的生命周期钩子可以分为以下三个阶段:
-
创建阶段(Creation)
- beforeCreate:实例刚被创建,数据观测和事件配置之前调用。
- created:实例已经创建完成,数据观测和事件配置已完成。
- beforeMount:模板编译/挂载之前调用。
- mounted:实例已经挂载到 DOM 上。
-
更新阶段(Update)
- beforeUpdate:数据更新时调用,但是界面尚未重新渲染。
- updated:数据更新完成时调用,界面已经重新渲染。
-
销毁阶段(Destruction)
- beforeDestroy:实例销毁之前调用。
- destroyed:实例销毁之后调用。
以下是 Vue.js 生命周期钩子的执行顺序:
beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed
2、组件生命周期
vue的阉割版生命周期
以下是更小粒度组件的生命周期钩子:
- beforeCreate:实例刚被创建,数据观测和事件配置之前调用。
- created:实例已经创建完成,数据观测和事件配置已完成。
- beforeUpdate:数据更新时调用,但是界面尚未重新渲染。
- updated:数据更新完成时调用,界面已经重新渲染。
注意:组件没有 beforeMount
和 mounted
生命周期钩子,因为它们不需要挂载到 DOM 上。此外,更小粒度的组件也没有销毁阶段的生命周期钩子,因为它们不需要手动销毁。
3、App生命周期
手机端小程序框架生命周期,非vue生命周期。
onLaunch
、onShow
和onHide
是小程序的生命周期函数,它们分别在小程序启动、显示和隐藏时被调用。
-
onLaunch
:当小程序初始化完成时,会触发onLaunch
函数。在这个函数中,可以获取小程序的启动参数,如场景值、query等。 -
onShow
:当小程序启动、或从后台进入前台显示,会触发onShow
函数。在这个函数中,可以获取小程序的启动参数,如场景值、query等。 -
onHide
:当小程序从前台进入后台,会触发onHide
函数。在这个函数中,可以做一些数据保存等操作。
这些生命周期函数可以在小程序开发中使用,以便我们在不同的场景下执行不同的操作。
五、vue数据变量类型梳理
1、普通变量
存在当前vue实例中,不与UI层绑定。
- 声明在script中
在script标签中声明的变量是组件内部的局部变量,只能在当前组件内部使用。这些变量可以在组件的各个方法中使用,但不能在模板中使用。下图所示:hello转test才能在模板中使用
<template>
<div class="hello">
<div >{{test}}</div>
</div>
</template>
<script>
// 声明在script中
const hello="adf"
export default {
name: 'HelloWorld',
data () {
return {
test:hello,
}
},
}
</script>
- 声明在this中
而this变量指向当前组件的实例对象,它包含了组件的所有属性和方法。在组件的各个方法中,可以通过this变量来访问组件实例对象的属性和方法。同时,在模板中也可以使用this变量来访问组件实例对象的属性和方法。
// 使用this操作即可
this.tempData=1;
2、data
需要操作UI的使用data数据双向绑定
注意:必须先在data属性中声明它,只有在data属性中声明的变量才会被Vue所监听,从而实现数据的响应式更新。
// 初始化
export default {
name: 'AppRow',
data() {
const tempData = 1+1
return {
tempData,
}
},
}
// 存
this.setData({
tempData:1
})
// 取
const tempData=this.data.tempData;
3、props变量
父组件给子组件传值
HelloWorld
组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
使用
<HelloWorld msg="Welcome to Your Vue.js App"/>
4、computed计算属性
等价于redux、mobx中的计算属性。
<template>
<div class="hello">
<h1>{{ information }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
name: '张三',
age: 18
};
},
computed: {
information() {
const { name, age } = this;
return 'name:' + name + ',age:' + age;
}
}
};
</script>
【重要】实现逻辑:在计算属性的实现中,有两个关键的元素:依赖跟踪和缓存。
依赖跟踪:计算属性依赖于一个或多个响应式状态(例如数据属性或其他计算属性)。当这些依赖发生变化时,计算属性需要重新计算其值。为了实现这一点,计算属性会通过监听它的依赖项来自动追踪变化。一旦某个依赖项发生变化,计算属性就会被标记为“不稳定”,需要重新计算。这种依赖跟踪的实现方式通常涉及到依赖收集和派发更新。
缓存:为了提高性能,计算属性通常会缓存其值。这意味着在计算属性的依赖项没有变化时,它可以直接返回之前缓存的值,而不需要重新计算。只有当依赖项发生变化时,计算属性才会重新计算,并更新缓存的值。
综上所述,计算属性的实现逻辑包括以下步骤:
- 在计算属性的定义中,明确指定它所依赖的响应式状态(即依赖项)。
- 在计算属性被访问时,开始依赖收集,将正在访问计算属性的代码位置添加到依赖项的依赖列表中。
- 当依赖项的值发生变化时,派发更新,通知计算属性需要重新计算。
- 计算属性根据其定义的计算逻辑重新计算值,并将结果缓存起来。
- 返回计算属性的值给调用方。
- 如果依赖项再次发生变化,重复上述步骤。
通过依赖跟踪和缓存机制,计算属性能够在依赖项变化时自动更新,并在不必要的情况下避免重复计算,提高了性能和效率。
1、数据改变是先改变props、data这些,其次才是计算属性
2、计算属性会收集依赖的数据,并监听。因此我们为了刷新可能会写看似无意义的空表达式。mobx的autoRun也有类似操作。
computed: {
information() {
this.count;//计算属性监听count
const { name, age } = this;
return 'name:' + name + ',age:' + age;
}
},
5、watch监听
一般监听props、data数据变化
export default {
props: {
chartData: {
default: () => {},
type: Object
}
},
watch: {
chartData: {
deep: true,
handler(val) {
// todo处理
}
}
}
};
六、代码复用
vue的props可以传数据,插槽可以传标签语法。而React没这个区分,React的props啥都可以传。
1、匿名插槽
相当于React默认的props:child
![image-20230907161912397](https://i-blog.csdnimg.cn/blog_migrate/6196cb3044c3340b2a0a60067b0e9acc.png)
HelloWorld
组件接收slot
<template>
<div class="hello">
<h1 @click="onTapItem">asdf</h1>
<slot/>
</div>
</template>
页面使用
<template>
<div id="app">
<HelloWorld>
<div>这是匿名插槽</div>
</HelloWorld>
</div>
</template>
2、具名插槽
相当于React的props
![image-20230907162729519](https://i-blog.csdnimg.cn/blog_migrate/d2f8492458ebbad71e316dbaabb5c165.png)
HelloWorld
组件定义了footer、header插槽的位置
<template>
<div class="hello">
<h1 @click="onTapItem">asdf</h1>
<slot name="footer"/>
<slot name="header"/>
</div>
</template>
页面使用
<template>
<div id="app">
<HelloWorld>
<template v-slot:header>
<div>这是具名header插槽</div>
</template>
<template v-slot:footer>
<div>这是具名footer插槽</div>
</template>
</HelloWorld>
</div>
</template>
七、Vue框架理解
https://www.php.cn/faq/499191.html
vue本质是一个类
vue项目中可以包含多个vue实例。在vue项目中,一般只有一个VUE实例在main.js中定义,其他都是vue组件实例。Vue是由一个个实例构建而成的,一个组件就是一个Vue的实例,每个组件内部都可以写属性,因此每一个组件都是一个Vue的实例。