JavaWeb

冰淇淋烤布蕾

于 2024-09-06 17:40:59 发布

阅读量774

点赞数 5

文章标签： java

本文链接：https://blog.csdn.net/zzzzzucc/article/details/141965600

版权

axios

<!-- HTML页面 -->
<!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">
    <title>Vue</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <input type="button" value="get请求" onclick="get()">
    <input type="button" value="post请求" onclick="post()">
</body>

<script>
    function get() {
        axios.get("").then(function (resp) {
            console.log(resp.data);
        })
    }

    function post() {
        
    }
    // axios.get
    // axios.post
    // axios.delete
    // axios.put
    /* 例子
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    }); */
</script>
</html>

Vue

<!-- HTML页面 -->
<!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">
    <title>Vue</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <!-- v-model 是双向数据绑定，通常用于表单控件中，使得用户输入能够动态更新数据模型。 -->
        {{message}}
        <br>
        <a v-bind:href="url">百度</a>
        <a :href="url">百度</a>
        <!-- v-bind 是单向数据绑定，用于将数据绑定到 HTML 元素的属性上。 -->
        <br>
        <input type="button" value="点击" v-on:click="handle()">
        <input type="button" value="点击" @click="handle()">
        <!-- v-on 是事件绑定，用于监听 DOM 事件并执行相应的 JavaScript 代码。 -->
        <br>
        <div v-for="(item,index) in addrs">
            {{item}}:{{index}}
        </div>
        <!-- v-for 是循环指令，用于遍历数组或对象，并生成相应的 HTML 元素。 -->
        
    </div>
    <br>
    <br>
    <div id="test">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!",
            url: "https://www.baidu.com",
            addrs:["https://www.baidu.com", "https://www.google.com"]
        },
        methods: {
            handle: function() {
                alert("Hello Vue!");
            }
        }
    }),
    new Vue({
        el: "#test",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        }
    })
</script>
</html>

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App) //render函数作用：将App组件渲染到页面上,h是createElement函数的别名
}).$mount('#app')

//App.vue
<template>
  <div>
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
    <router-view/> 是一个占位符，用于渲染匹配的路由组件。
    当用户访问 / 路径时，Home 组件将被渲染到 <router-view/> 中。
    当用户访问 /about 路径时，About 组件将被渲染到 <router-view/> 中。
    <router-link> 是用于导航的组件，点击时会改变 URL 并触发对应的路由。 -->
    <!-- <h1>{{msg}}</h1> -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
  data () {
    return {
      msg : "Hello World"
    }
  },
  methods : {
  }
}
</script>


<style>

</style>