Vue Cli脚手架实战

最新推荐文章于 2023-04-24 14:29:40 发布

curd_boy

最新推荐文章于 2023-04-24 14:29:40 发布

阅读量170

点赞数

分类专栏： # Node.js

本文链接：https://blog.csdn.net/weixin_43746433/article/details/106402553

版权

Node.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

脚手架的功能

在这里插入图片描述

npm config set registry=http://registry.npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm i vue-cli -g
 
npm install -g webpack
 
vue init webpack  Demo

使用阿里rap2接口

http://rap2.taobao.org/

vsocde 安装插件open in browser

遍历

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app">
        <li v-for="(item, index) in items">
          {{item.message}} --- {{index}}
        </l1>  # 传数据的{{}}
    
    </div>
    
    <!-- built files will be auto injected -->

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script>
        // 创建vue对象,Vue首字母大写的
        let vm = new Vue({
            el:"#app", // 当前vue对象可以操作的页面范围，一般就是ID元素的选择符
            data:{     // 当前vue对象要输出到html页面中的数据
              items:[
                { message:"登录错误!"},
                { message:"登录错误!"},
                { message:"登录错误!"},
              ]
            }
        });
    </script>
  </body>
</html>

在这里插入图片描述

选择框

在这里插入图片描述

组件

在这里插入图片描述

curd_boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue Cli脚手架实战

vsocde 安装插件open in browser遍历<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>test</title> </head> <body&
复制链接

扫一扫

专栏目录