vue3.0入门（一）
前言
使用方式
- 使用在线cdn
- 下载js文件并自托管，引入到项目后使用
- 使用npm安装后，用cli来构建项目
声明式渲染
- Vue2需引入vue.min.js
{{msg}} // Mustache 语法
var vm = new Vue({ // 实例化vue，在实例中渲染
data: {
msg: '文本'
}
})
{{msg}}
const Counter = { //声明一个常量接收返回的数据
data() {
return {
msg: '文本'
}
}
}
Vue.createApp(Counter).mount('dom节点') // 创建vue应用并挂载
事件绑定
v-on:click='方法名'
Vue.createApp({
methods: {
方法名() {
//具体实现
}
}
}).mount("dom节点")
- 双向绑定
{{msg}}
v-model="msg"
Vue.createApp({
data() {
return {
msg: '文本'
}
}
}).mount("dom节点")
条件循环
- v-if
v-if='键名'
Vue.createApp({
data() {
return {
键名: true //逻辑为真
}
}
}).mount("dom节点")
- v-for
v-for="对象名 in 数组名"
{{对象名.属性名}}
Vue.createApp({
data() {
return {
数组名: [
{},{},{} //多个对象
]
}
}
}).mount("dom节点")
组件
- 注册新组件
<todo-item></todo-item>
// 创建 Vue 应用
const app = Vue.createApp({
})
// 定义名为 todo-item 的新组件
app.component('todo-item', {
template: `自定义模板`
})
// 挂载 Vue 应用
app.mount('dom节点')
- 组件实例
createApp方法创建一个应用实例，该实例提供一个应用上下文，该方法返回的是实例本身；mount方法返回的是一个根组件实例，一个代理对象
该实例的常用方法包括：
component //用于注册或检索全局组件
config //包含应用配置的对象
directive //用于注册或检索全局指令
mount //将所提供的dom节点替换成应用根组件的模板渲染结果
use
在一个vue应用中data方法就是一个组件实例（property）
- 生命周期钩子
写在vue应用中，不能使用箭头函数来定义生命周期方法
常用生命周期方法，让我们在实例的不同阶段执行自己的操作：
beforeCreate // 在实例初始化之后
created // 在实例创建完成后被立即调用
beforeMount // 在实例被挂载之前调用
mounted // 在实例被挂载后调用
beforeUpdate // 数据更新导致dom节点重新渲染之前
updated // 数据更改导致dom节点重新渲染时
模板语法
- 插值
{{}} // 使用该方式进行数据绑定
v-once // 使用该指令使数据只进行一次绑定
#c2{
// css
}
v-bind:id = 'c1' // 视图部分
data(){ // 脚本部分
return{
c1 : 'c2'
}
}
<div v-html = 'data'></div> // 视图部分，绑定html标签
data(){ // 脚本部分
data : 'html标签'
}
脚本部分methods对象中写方法时，尽量避免使用箭头函数；
Vue 自动为 methods 绑定 this对象，使用箭头函数时则会指向window对象，这时就不能使用this.$data.属性
