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标签'
}