Vue3 入门-EW帮帮网

入门

入门示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <dev>
        <h1 id="app">{{ msg }}</h1>
    </dev>
    
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

        createApp({
            data(){
                return {
                    msg: 'Hello Vue3!'
                }
            } 
        }).mount('#app')
    </script>
    
</body>
</html>

v-for

    <div id="app2">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>标题</th>
                <th>分类</th>
                <th>时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>

            <tr v-for="(news,index) in newsList">
                <td>{{news.title}}</td>
                <td>{{news.category}}</td>
                <td>{{news.time}}</td>
                <td>{{news.sata}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>

    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

        createApp({
            data(){
                return {
                    newsList:[
                        {
                            title:"医疗反腐大快人心",
                            category:"时事",
                            time:"2023-08-22",
                            sata:"已发布"
                        },
                        {
                            title:"中国男篮大胜菲律宾",
                            category:"体育",
                            time:"2023-08-22",
                            sata:"已发布"
                        },
                        {
                            title:"医疗反腐大快人心",
                            category:"时事",
                            time:"2024-01-02",
                            sata:"已发布"
                        }
                    ]
                }
            }
        }).mount("#app2");
    </script>

v-bind

语法：v-bind:属性名="属性值"
简化：:属性名="属性值"

<a :href="url">百度</a>

加冒号的属性后面是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量。
比如上面代码中是个变量需要加:，还有赋的值如果是 Boolean 或者 Number 类型也需要加:，字符串类型可以不用加。

v-if 和 v-show

    <dev id="app">
        <span v-if="student.level >= 0 && student.level <= 1">9.9</span>
        <span v-else-if="student.level >= 2 && student.level <= 3">19.9</span>
        <span v-else>29.9</span>
        <br/>
        <span v-show="student.level >= 0 && student.level <= 1">9.9</span>
        <span v-show="student.level >= 2 && student.level <= 3">19.9</span>
        <span v-show="student.level >= 4">29.9</span>
    </dev>

    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

        createApp({
            data(){
                return {
                    student:{
                        name: '小明',
                        level: 3
                    }
                }
            }
        }).mount("#app")
    </script>

v-if

原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景

v-show

原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

两者效果是相同的，区别在于频繁切换时 v-if 需要重新渲染。

v-on

    <div id="app">
        <button v-on:click="openRed">点我有惊喜</button> &nbsp;
        <button @click="sendGoods">再点更惊喜</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods:{
                openRed: function(){
                    alert("打开红包")
                },
                sendGoods: function(){
                    alert("送你一个小礼物")
                }
            }
        }).mount("#app");//控制html元素

    </script>

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的 获取或设置 表单项数据

vue的生命周期

生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码

在这里插入图片描述

最常用的就是 mounted() 这个回调方法

<script type="module">
  import { createApp } from 'https://.../vue.esm-browser.js'
    const app = createApp({
      data() {
        return {
          message: "Hello Vue"
        }
      },
      //生命周期-钩子函数 mounted
      mounted() {
        console.log('Vue挂载完毕, 发送请求获取数据 ...');
      }
  }).mount("#app");
</script>

Axios

Axios 对原生的Ajax进行了封装，简化书写，快速开发。

<body>
    <!-- 引入axios的js文件 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // axios({
        //     method:'get',
        //     url:'http://localhost:8080/data/getAll'
        // }).then(result=>{
        // 别名请求方式
        axios.get('http://localhost:8080/data/getAll').then(result=>{
            console.log(result.data);
        }).catch(err=>{
            console.log(err);
        });
    </script>
</body>

vue工程

vue组件文件结构：

<!-- 控制模板的数据行为 -->
<script>
  export default {
      data(){
        return{
          msg:'哈尔滨'
        }
      }
  }
</script>


<!-- 模板部分，即html -->
<template>
  <h1>{{ msg }}</h1>
</template>


<!-- CSS样式 -->
<style scoped>
  h1{
    color:red;
  }
</style>

vue组件有两种书写风格组合式API 和选项式API。

组合式API:

<script>
  export default {
      data(){
        return{
          msg:'哈尔滨'
        }
      }
  }
</script>

选项式API:

<!-- setup 是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
 -->
<script setup>
    //ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
    import { ref } from 'vue';
    const msg = ref('哈尔滨');
    const count = ref(0);

    //onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。
    onMounted(() => {
        console.log('vue挂载成功');
    })

    //定义一个方法
    function increment(){
        count.value++
    }
</script>

推荐使用选项式API

vue组件文件示例

App.vue

<script setup>
  import { ref } from 'vue';
  const msg = ref('哈尔滨');

  import OneVue from './One.vue'
</script>

<template>
  <h1>{{ msg }}</h1><br>
  <OneVue/>
</template>

<style scoped>
  h1{
    color:red;
  }
</style>

One.vue

<script setup>
    import { ref,onMounted } from 'vue'
    const count = ref(0);

    onMounted(() => {
        console.log('vue挂载成功');
    })

    function increment(){
        count.value++
    }
</script>


<template>
    <button @click="increment">count: {{ count }}</button>
</template>


<style scoped>

</style>

导入第三方包

安装： npm install axios

然后在工程根目录的 node_modules 中就能看到了

导入： import axios from 'axios'

基础

GET、POST表单、POST json

list.vue

<script>
    //获取列表数据
    const getNewsList = async () => {
        let params = {
            pageNo: pageNum.value,
            pageSize: pageSize.value,
            platform: platform.value ? platform.value : null
        };
        let result = await newsListService(params);

        //渲染视图
        total.value = result.data.total;
        articles.value = result.data.items;
    }
</script>

list.js

export const newsListService = (params) => {

    //get方式
    //return request.get('news/newsList', {params: params})

    //post form表单 方式
    const formParams = new URLSearchParams();
    for (let key in params) {
        if (params[key] !== null) {
            formParams.append(key, params[key]);
        }
    }
    return request.post('news/newsList', formParams);

    //psot json 方式
    //return request.post('news/newsList2', params)
}

Vue3 入门

入门