初识Vue

茯苓与半夏

已于 2022-10-27 16:48:55 修改

阅读量244

点赞数

文章标签： vue.js javascript 前端 1024程序员节

于 2022-10-24 19:31:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67833891/article/details/127482676

版权

Vue 应用

1、通过createAPP函数创建，函数返回的createAPP对象其实是一个应用根组件。
2、应用是由一颗嵌套的，可重用的组件树组成的
3、应用根组件的内容将会被渲染在容器元素中，容器元素自己将不会被视为应用的一部分

挂载应用

1、应用实例必须在调用了.mount()后才会渲染出来
2、mount()接收一个“容器”参数-----实际的DOM元素或者CSS选择器字符串
3、mount()方法始终在整个应用配置和资源注册完成之后被调用
4、DOM 中的根组件模板？？当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板？？

应用配置

1、应用实例会暴露一个 .config 对象，允许我们配置一些应用级的选项
2、应用实例还提供了一些方法来注册应用范围内可用的资源

多个应用实例

1、createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域
2、避免使用一个单独的Vue应用实例，尽量创建多个小的应用实例将它们分别挂载到所需的元素上去

以我现在的知识创建的Vue实例必须写在html文档中且script代码必须位于文档最后，数据才能成功的渲染上去

第一个Vue应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FirstVue</title>
</head>
<body>
    <div id="app">
        <button @click="count++">{{ count }}</button>
    </div>
    
</body>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
    data() {
    return {
        count:0
    }
  }
}).mount('#app')
</script>
</html>