头歌-Vue学习

最新推荐文章于 2024-05-17 15:10:15 发布

Adamant245

最新推荐文章于 2024-05-17 15:10:15 发布

阅读量587

点赞数 5

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_71632696/article/details/131447748

版权

第一关：照着旁边的说明搞

吐槽：虚拟实验环境一点不智能

第二关：Vue3 基础使用

<div id="app">
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- ********** Begin ********** -->
<script>

const app = Vue.createApp({ 
  data() { 
    return { 
      message: 'Hello Vue!!', counter: { count: 0 } } } }); app.mount('#app'); 
</script>
<!-- ********** End ********** -->

第三关：Vue3 模板语法

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<div id="app">
    <div>
      <label>姓名：<input type="text" v-model="username" ></label>
      <label>手机号码：<input type="text" v-model="phonenumber" ></label>
      <input type="button" value="提交" @click="add">
    </div>
    <!-- ********** End ********** -->
<div v-for="contact in contacts" :key="contact">
  <p>{{ contact }}</p>
</div>


    <!-- ********** End ********** -->
</div>
</body>
<!-- ********** Begin ********** -->
<script>
  const app = Vue.createApp({
    data() {
      return {
        username: '',
        phonenumber: '',
        contacts: []
      }
    },
    methods: {
      add() {
        const contact = `${this.username}-${this.phonenumber}`;
        this.contacts.push(contact);
        this.username = '';
        this.phonenumber = '';
}

    }
  });

  app.mount('#app');
</script>
<!-- ********** End ********** -->

第四关：响应式基础

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
	body {
            background-color: black;
    }
     body {
            width: 100%;
            height: 100%;
    }
    div {

            width: 240px;
            height: 201px;
            margin: auto;
            font-size:36px;
            color: #fff;;
    }
    
</style>
<body>
<div id="app">
	<img src ="https://data.educoder.net//api/attachments/4319783?type=image/png">
	<p id="fonts">功德+{{count}}</p>
    <button @click="add">点击</button>
</div>
</body>
<!-- ********** Begin ********** -->
<script>
const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++;
    }
  }
});

app.mount('#app');
</script>
<!-- ********** End ********** -->

第五关：计算属性

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style scoped>
  input {
    width: 50px;
  }
</style>
<body>
<div id="app">
  	<h3>简易计算器</h3>
    <input v-model="num1" /> + <input v-model="num2" /> ={{addition}}
    <br>
    <input v-model="num1" /> - <input v-model="num2" /> ={{subtraction}}
    <br>
    <input v-model="num1" /> * <input v-model="num2" /> ={{multiplication}}
    <br>
    <input v-model="num1" /> / <input v-model="num2" /> ={{division}}
</div>
</body>
<!-- ********** Begin ********** -->
<script>
const app = Vue.createApp({
  data() {
    return {
      num1: 0,
      num2: 0
    }
  },
  computed: {
    addition() {
      return Number(this.num1) + Number(this.num2);
    },
    subtraction() {
      return Number(this.num1) - Number(this.num2);
    },
    multiplication() {
      return Number(this.num1) * Number(this.num2);
    },
    division() {
      return Number(this.num1) / Number(this.num2);
    }
  }
});

app.mount('#app');

</script>
<!-- ********** End ********** -->

第六关：Vue3 Class 与 Style 绑定

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
    .box a:hover {
        background-color: #eee;
    }
</style>
<body>
<div id="app">
    <div class="box" :style="styleObject1">
        <a v-for="item in list1" :key="item" :style="styleObject2" onmouseover="this.style.color='#ff8500';" onmouseout="this.style.color='#4c4c4c';">{{ item }}</a>
    </div>
</div>
</div>
</body>
<script>
  const { createApp } = Vue
  const a=createApp({
     data() {
      return {
          // ********** Begin ********** 
              list1:[
              "新浪导航",
              "手机新浪网",
              "移动客户端",
              "微博",
              "联系我们"
              ],
              styleObject1: {
                height: "40px",
                'border-top': "3px solid #ff8500",
                'border-bottom': "1px solid #edeef0",
                'background-color': "#fcfcfc",
                'font-size': "12px",
                'line-height': "41px"
              },
              styleObject2: {
                display: "inline-block",
                height: "41px",
                'text-decoration': "none",
                color: "#4c4c4c",
                padding: "0 20px"
              }
            // ********** End **********
      }
    }
  }
  );
a.mount('#app');
</script>

第七关：Vue3 路由

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
  <h1>Hello Pets!</h1>
  <p>
    <router-link to="/Cat">Cat</router-link >&nbsp;&nbsp;&nbsp;
    <router-link to="/Dog">Dog</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/Chicken">Chicken</router-link>
  </p>
  <router-view></router-view>
</div>
<script>

const Cat = { template: '<div><img src="https://data.educoder.net/api/attachments/4401044?type=image/png" width="500" height="500"> Cat</div>' }
const Dog = { template: '<div><img src="https://data.educoder.net/api/attachments/4401004?type=image/png" width="500" height="500"> Dog</div>' }
const Chicken = { template: '<div><img src="https://data.educoder.net/api/attachments/4401119?type=image/png" width="500" height="500"> Chicken</div>' }

// ********** Begin ********** 
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    { path: '/Cat', component: Cat },
    { path: '/Dog', component: Dog },
    { path: '/Chicken', component: Chicken }
  ]
});

const app = Vue.createApp({});
app.use(router);
app.mount('#app');

// ********** End **********
</script>

第八关：Vue3 Ajax(axios)请求

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 官网提供axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>axios+vue</title>
</head>
 
<body>
    <div id="app">
        <button @click="getJoke">获取笑话</button>
        <p> {{joke}} </p>
    </div>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑
        */
        var app = new Vue({
            el: "#app",
            data: {
                joke: "一个很好笑的笑话"
            },
            methods: {
                
                getJoke: function () {
                    var that = this;
                    /********** begin **********/
                        axios.get('https://autumnfish.cn/api/joke')
                            .then(function (response) {
                                that.joke = response.data;
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    
                    /********** end **********/
                }
            },
                
        })
 
    </script>
</body>
 
</html>