vue3.0初试

最新推荐文章于 2023-03-10 07:56:13 发布

girljeremy

最新推荐文章于 2023-03-10 07:56:13 发布

阅读量108

点赞数

分类专栏：前端博学了没文章标签： vue.js 前端

Jeremy Liu

本文链接：https://blog.csdn.net/qq_36235241/article/details/118607947

版权

前端博学了没专栏收录该内容

18 篇文章 0 订阅

订阅专栏

vue3.0初试

- vue3.0引用方式
- vue3.0渲染

vue3.0引用方式

vue3.0练习，可以采用cdn引用和本地引用。cdn引用走的是国外的地址加载略慢。遂采用本地引用方式。
vue.global.js下载地址

<head>
    <meta charset="utf-8" />
    <title>vue3.0初试</title>
    <!-- 国外cdn方式引入vue3.0 会保持和 npm 发布的最新的版本一致 -->
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <!-- 引用本地下载的vue3.0js 仅供测试练习用 -->
    <script src="./vue.global.js"></script>
  </head>

vue3.0渲染

在js代码中指定id="hello-vue"块为vue渲染区域，如果直接在id="hello-vue"节点写vue代码不会生效，需要在其子节点写才生效。
非渲染区域不会执行vue渲染。

HTML页面代码部分

 <body>
    <!-- vue渲染起始节点 id="hello-vue" 写在其子节点的vue语法才生效 -->
    <div id="hello-vue">
      vue3.0渲染节点
      <div :class="[bgFlag?'bg1':'bg2']" @mouseover="mouseover" @mouseout="mouseout">
        <div class="hello">{{message}}</div>
        <button id="button" @click="add">click</button>
        <div>点了{{count}}次</div>
      </div>
    </div>
    <div class="novue">
      非vue渲染节点范围
      <div>
        <div>点了{{count}}次</div>
      </div>
    </div>
  </body>

js代码部分

<script>
  // Vue3 中的应用是通过使用 createApp 函数来创建的
  // 传递给 createApp 的选项用于配置根组件。
  
  const HelloVueApp = Vue.createApp({
    data() {
      return {
        message: "Hello Vue3.0!",
        count: 0,
        bgFlag: false,
      }
    },
    methods: {
      add() {
        this.count++
      },
      mouseover() {
        this.bgFlag = true
      },
      mouseout() {
        this.bgFlag = false
      },
    },
  })
  // 在使用 mount() 挂载应用时，该组件被用作渲染的起点。
  const vm = HelloVueApp.mount("#hello-vue") 
</script>

最终效果

全部代码

<html>
  <head>
    <meta charset="utf-8" />
    <title>vue3.0初试</title>
    <!-- 国外cdn方式引入vue3.0 会保持和 npm 发布的最新的版本一致 -->
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <!-- 引用本地下载的vue3.0js 仅供测试练习用 -->
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <!-- vue渲染起始节点 id="hello-vue" 写在其子节点的vue语法才生效 -->
    <div id="hello-vue">
      vue3.0渲染节点
      <div :class="[bgFlag?'bg1':'bg2']" @mouseover="mouseover" @mouseout="mouseout">
        <div class="hello">{{message}}</div>
        <button id="button" @click="add">click</button>
        <div>点了{{count}}次</div>
      </div>
    </div>
    <div class="novue">
      非vue渲染节点范围
      <div>
        <div>点了{{count}}次</div>
      </div>
    </div>
  </body>
</html>
<script>
  // Vue3 中的应用是通过使用 createApp 函数来创建的
  // 传递给 createApp 的选项用于配置根组件。
  // 在使用 mount() 挂载应用时，该组件被用作渲染的起点。
  const HelloVueApp = Vue.createApp({
    data() {
      return {
        message: "Hello Vue3.0!",
        count: 0,
        bgFlag: false,
      }
    },
    methods: {
      add() {
        this.count++
      },
      mouseover() {
        this.bgFlag = true
      },
      mouseout() {
        this.bgFlag = false
      },
    },
  })
  // Vue.createApp(HelloVueApp).mount("#hello-vue")
  const vm = HelloVueApp.mount("#hello-vue")
</script>
<style>
  .hello {
    font-size: larger;
    margin: auto;
  }
  .vue {
    margin: 10px;
  }
  .novue {
    margin: 10px;
  }
  .bg1 {
    background-color: palevioletred;
  }
  .bg2 {
    background-color: powderblue;
  }
</style>

girljeremy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3.0初试

vue3.0初试vue3.0引用方式vue3.0渲染vue3.0引用方式vue3.0练习，可以采用cdn引用和本地引用。cdn引用走的是国外的地址加载略慢。遂采用本地引用方式。vue.global.js下载地址<head> <meta charset="utf-8" /> <title>vue3.0初试</title> 
复制链接

扫一扫