【Vue3.0新增特性】-1_vue-admin-beautiful 3.0

基础

vue-admin-beautiful成为全网首家发布vue3.0版本的admin框架
开源地址：https://github.com/chuzhixin/vue-admin-beautiful/
演示地址：https://chu1204505056.gitee.io/vue-admin-beautiful/
pro演示地址：https://chu1204505056.gitee.io/vue-admin-beautiful-pro/
vue3.0版演示地址：https://chu1204505056.gitee.io/vue-admin-beautiful-mini/
//组件库
https://mrhj.gitee.io/form-generator/?hmsr=vue-admin-beautiful-pro&hmpl=&hmcu=&hmkw=&hmci=#/

1.创建Vue项目

2.声明式渲染

<div id="counter">
  Counter: {{ counter }}
</div>
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')
1
2
3
4
5
6
7
8
9
10
11
12

这里与之前不同的是 //Vue挂载书写采用了新的方式

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')
1
2
3
4
5

3.常用属性（与二基本相同）

1. v-bind

<div id="bind-attribute">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
const AttributeBinding = {
  data() {
    return {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. v-on

<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转 Message</button>
</div>
const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. v-model

<div id="two-way-binding">
  <p>{{ message }}</p>
  <input v-model="message" />
</div>
const TwoWayBinding = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

Vue.createApp(TwoWayBinding).mount('#two-way-binding')
1
2
3
4
5
6
7
8
9
10
11
12
13

4. v-if

<div id="conditional-rendering">
  <span v-if="seen">现在你看到我了</span>
</div>
const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}

Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
1
2
3
4
5
6
7
8
9
10
11
12

5. v-for

<div id="list-rendering">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}

Vue.createApp(ListRendering).mount('#list-rendering')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以看的出来这些基础命令并没有什么变化（个人见解，与之前2.x的使用方式相同）

4.组件

与Vue2.x基本相同 详情请点击

5.组件实例 property

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4
console.log(this.count) // => 4
1
2
3
4
5
6
7
8
9
10

—定义方法

const app = Vue.createApp({})

app.config.globalProperties.$md5 = () => {}
1
2
3

6.生命周期

Vue3.0 在 Composition API 中另外加了两个钩子，分别是 onRenderTracked 和 onRenderTriggered，两个钩子函数都接收一个 DebuggerEvent :