01~Vue的CDN安装和初体验

俗世凡人行

已于 2023-09-07 01:29:32 修改

阅读量114

点赞数

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2023-09-07 01:22:03 首次发布

本文链接：https://blog.csdn.net/weixin_41887155/article/details/132728465

版权

vue3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

Vue的CDN安装和初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue的安装和初体验</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="counter">
    <!-- 双大括号的vue语法, 就是告诉vue, 这个里面放了一个变量, 
      变量的话就会去配置对象里面去找, 去解析 -->
     <p>{{num}}</p>
     <p>{{name}}</p>
  </div>
  <script>
    const Counter = { // 01创建一个配置对象
      // data vue中用来存放的数据, 返回的就是存放的数据
      // data 这种配置key, 都是固定的, 不能随意更改
      data:function()
      {
        return {
          num:0,
          name:'李白',
        }
      }
    }
    // 02 创建一个应用, 将配置对象传入,里面的参数就是上面那个配置对象, vue会自动解析这个对象
    let app = Vue.createApp(Counter).mount('#counter')
     // 03 .mount('#counter') 将div的元素, 以ID选择器, 和vue进行挂载,建立vue和div的关联
    
    /**  Vue.createApp(Counter)为什么可以链式调用.mount('#counter'), 因为它返回的是一个对象, 
     *  包括.mount(),依然返回的是一个对象, 还可以进行再次链式调用
     */    
    console.log(app)
    /**
     *  在浏览器Console调试里面, 修改num的值, 输入: app.num=12,页面上num的值也会随之修改为12
     *  这就是vue的数据双向绑定
     */

  </script>
</body>
</html>