【Vue3】保姆级官网教程･Vue Mastery Sock (1-3)

我是个球球
727 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

  1. 课程地址

www.vuemastery.com/courses/int…

  1. 课程介绍

课程简介

  • 这节课是Vue3的一个入门课程，在整个课程中，将学习到Vue.js 的基础知识并构建一个应用程序来将这些概念付诸实践
  • 然后讲这个课程最后要做的网页长啥样

大致就是一个卖袜子的产品页面，有按钮可以加进购物车，袜子有两个颜色（绿和蓝），点击绿圆圈和蓝圆圈可以切换到相应颜色的产品图片，上面如果显示了Out of Stock，下面添加购物车的按钮🔘就会变灰（就不能点了），往下拉还有个留言区

呃语文不太好=（╯﹏╰）=，描述得不清楚的话请自行脑补某东的产品页面，这是个简单版的

课程资源

编译器

  1. 添加插件

打开vs code

选择左侧的EXTENSIONS（扩展）

在搜索框输入需要安装的扩展

  • 官网的第一课中，建议安装es6-string-html插件

  1. 下载并打开项目模版

  • 长这样

需要修改CDN的参考

v3.cn.vuejs.org/guide/insta…

  1. 创建Vue App

    •   打开index.html和main.js

    •   在main.js中添加一个Vue App

    • const app=Vue.createApp({
    data(){
        return{
            product : 'Socks'
        }
    }
})

    •   在index.html中引入刚刚创建的Vue App

    •     <script>
      const mountedApp = app.mount('#app')
    </script>

    • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
    
    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ product }}</h1>
    </div>

    <!-- Import Js -->
    <script src="./main.js"></script>
    <script>
      const mountedApp = app.mount('#app')
    </script>

  </body>
</html>

    •   数据显示

    •   执行测试

  1. 属性绑定（显示图片）

    •   在main.js中添加图片变量

    • const app=Vue.createApp({
    data(){
        return{
            product: 'Socks',
            image: './assets/images/socks_green.jpg'
        }
    }
})

    •   在index.html中指定位置绑定图片

    • <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Vue Mastery</title>
  <!-- Import Styles -->
  <link rel="stylesheet" href="./assets/styles.css" />
  <!-- Import Vue.js -->

  <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <div class="nav-bar"></div>

    <div class="product-display">
      <div class="product-container">
        <div class="product-image">
          <img v-bind:src="image">
        </div>
        <div class="product-info">
          <h1>{{ product }}</h1>
        </div>
      </div>
    </div>

  </div>

  <!-- Import Js -->
  <script src="./main.js"></script>
  <script>
    const mountedApp = app.mount('#app')
  </script>

</body>

</html>

    •   执行测试

    •   课后扩展：添加URL

    •   分别在index.html和main.js文件中添加如下图红框框内的代码

    •   index.html

    • <a :href="url">aqin～啊哈啊哈啊哈哈(｡ì _ í｡)</a>
  • main.js
    • const app=Vue.createApp({
    data(){
        return{
            product: 'Socks',
            image: './assets/images/socks_green.jpg',
            url: 'https://www.vuemastery.com/'

        }
    }
})
avatar
文章
阅读
粉丝