vue逻辑层初识

最新推荐文章于 2022-11-07 23:13:20 发布

‍。。。

最新推荐文章于 2022-11-07 23:13:20 发布

阅读量358

点赞数

分类专栏： html vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_43794095/article/details/121557268

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用Vue.js进行HTML模板和数据绑定。通过一个简单的官网课程示例，展示了如何在`index.html`中导入Vue.js库，创建Vue应用，并在页面上展示产品图片、名称和链接。主要涉及`v-bind`指令用于动态绑定属性，以及在`main.js`中定义应用的数据结构。

摘要由CSDN通过智能技术生成

官网课程给的示例结构如下
.
├── assets
│ ├── images
│ │ ├── socks_blue.jpg
│ │ └── socks_green.jpg
│ └── styles.css
├── index.html
└── main.js

样式我们不用管，只需要管这两个

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 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">
      <img v-bind:src="image">
      <h1>{{ product }}</h1>
      <a :href="url">Made by Vue Mastery</a>
    </div>
    <!-- Import App -->
    <script src="./main.js"></script>
    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

<img v-bind:src="image">是调用图片
<h1>{{ product }}</h1>调用数据
<a :href="url">Made by Vue Mastery</a>链接
注意都要放在app的div下

main.js如下：

const app = Vue.createApp({
    data(){
        return{
            product: 'Boots',
            description: 'this is a socket',
            image: './assets/images/socks_green.jpg',
            url: 'https://www.vuemastery.com'
        }
    }
})