vue3.0入门（一）

前言

• 最近在b站上学习了飞哥的vue教程
• 学习案例已上传，下载地址

使用方式

1. 使用在线cdn
2. 下载js文件并自托管，引入到项目后使用
3. 使用npm安装后，用cli来构建项目

声明式渲染

• Vue2需引入vue.min.js

{{msg}}  // Mustache 语法

var vm = new Vue({ // 实例化vue，在实例中渲染
    data: {
        msg: '文本'
    }
})   

• Vue3不需要实例化vue，需引入vue.global.js (在 unpkg 和 jsDelivr 上获取)

{{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.属性