Vue+elementUI登陆界面实战

最新推荐文章于 2024-04-29 13:07:26 发布

洛慕晨

最新推荐文章于 2024-04-29 13:07:26 发布

阅读量2.1k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/OCISLY/article/details/118876580

版权

Vue

前置知识

1、html

2、css（一般不用css，用sass或less比较多）

less
sass

3、javascript（vue、React、Axios、ajax）

Vue
Axios

4、UI框架

Ant-Design：基于React的UI框架
ElementUI、iview、ice：饿了么出品、基于Vue框架
BootStrap
AmazeUI：一看html跨屏前端框架

Vue官网：https://cn.vuejs.org/

CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1.Vue基本语法

v-bind
v-if
v-else
v-for
v-on–>事件

2.网络通信Axios

伪造json数据

{
  "name": "cqh",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "缇香郡",
    "city": "宁波",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线CDN-->
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

</head>
<body>
<div id="app">
    <div>{
  {info.name}}</div>
    <a v-bind:href="info.url">点我到百度链接</a>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        //和data: 不同 属性：vm
        data() {
            return {
                info: null
            }
        },
        mounted() {
            //钩子函数 链式编程 ES6新特性
            axios.get("../data.json").then(response => (this.info=response.data));
        }
    });
</script>
</body>
</html>

3.slot【插槽】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.导入vue.js-->
    <script src="ht

最低0.47元/天解锁文章

洛慕晨

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue+elementUI登陆界面实战

Vue前置知识1、html2、css（一般不用css，用sass或less比较多）lesssass3、javascript（vue、React、Axios、ajax）VueAxios4、UI框架Ant-Design：基于React的UI框架ElementUI、iview、ice：饿了么出品、基于Vue框架BootStrapAmazeUI：一看html跨屏前端框架Vue官网：https://cn.vuejs.org/CDN：<script src="h
复制链接

扫一扫