Vue的局部使用

文章目录

- - 什么是Vue?
  - 局部使用Vue
  - - 快速入门
  - 常用指令
  - - v-for
    - v-bind
    - v-if & v-show
    - v-on
    - v-model
  - Vue生命周期
- Axios
- - 案例

什么是Vue?

Vue是一款构建用户界面的渐进式的JavaScript框架.

局部使用Vue

快速入门
常用指令
声明周期

快速入门

准备:

准备html页面,并引入Vue模块(官方提供)
创建Vue程序的应用实例
准备元素(div) ,被Vue控制

构建用户界面

准备数据
通过插值表达式渲染页面

<body>
  <div id="app">
    <h1>{{msg}}</h1>
  </div>

	<div>
    <h1>{{msg}}</h1> 
  </div>

  <!-- 引入vue模块 -->
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    /* 创建vue的应用实例 */
    createApp({
      data() {
        return {
          //定义数据
          msg: 'hello vue3'
        }
      }

    }).mount("#app")

  </script>

</body>

常用指令

在这里插入图片描述

v-for

在这里插入图片描述

<body>

    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <!-- 那个元素要出现多次 v-for指令就添加到哪个元素上 -->
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp } from
            'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    articleList: [
                        {
                            title: "医疗反腐绝非砍医护收入",
                            category: "时事",
                            time: "2023-09-5",
                            state: "已发布"
                        },
                        {
                            title: "中国男篮缘何一败涂地？",
                            category: "篮球",
                            time: "2023-09-5",
                            state: "草稿"
                        },
                        {
                            title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                            category: "旅游",
                            time: "2023-09-5",
                            state: "已发布"
                        }
                    ]

                }
            }
        }).mount("#app")//控制页面元素
    </script>
</body>

在这里插入图片描述

注意: 遍历的数组,必须在data中定义: 要想让哪个标签循环展示多次,就在那个标签上使用v-for 指令

v-bind

在这里插入图片描述

<body>
    <div id="app">
        <!-- <a v-bind:href="url">黑马官网</a> -->
        <a :href="url">黑马官网</a>
    </div>

    <script type="module">
        //引入vue模块
        import { createApp } from
            'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    url: "https://www.itheima.com"

                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

v-if & v-show

应用: 大数据"杀手",如果我们网购都应该遇到过这种情况,大部分网购平台会对用户的消费水平做等级划分
在这里插入图片描述

<body>
    <div id="app">

        手链价格为: <span v-if="customer.level>=0 && customer.level<=1">9.9</span>
        <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-else>29.9</span>

        <br>
        手链价格为: <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
        <span v-show="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-show="customer.level>=5">29.9</span>

    </div>

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

        //创建vue应用实例
        createApp({
            data() {
                return {
                    customer: {
                        name: "张三",
                        level: 7
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

在这里插入图片描述

v-on

在这里插入图片描述

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

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

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods: {
                money: function () {
                    alert('送你钱100')
                },
                love: function () {
                    alert('爱你一万年')
                }
            }
        }).mount("#app");//控制html元素

    </script>
</body>

v-model

在这里插入图片描述

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category" /><span>{{searchConditions.category}}</span>

        发布状态: <input type="text" v-model="searchConditions.state" /><span>{{searchConditions.state}}</span>

        <button>搜索</button>
        <button v-on:click="clear">重置</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    searchConditions: {
                        category: '',
                        state: ''
                    },
                    articleList: [{
                        title: "医疗反腐绝非砍医护收入",
                        category: "时事",
                        time: "2023-09-5",
                        state: "已发布"
                    },
                    {
                        title: "中国男篮缘何一败涂地？",
                        category: "篮球",
                        time: "2023-09-5",
                        state: "草稿"
                    },
                    {
                        title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category: "旅游",
                        time: "2023-09-5",
                        state: "已发布"
                    }]
                }
            },
            methods: {
                clear: function () {
                    //清空category以及state的数据
                    //在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据
                    this.searchConditions.category = '';
                    this.searchConditions.state = '';
                }
            }

        }).mount("#app")//控制html元素
    </script>
</body>

Vue生命周期

在这里插入图片描述

mounted: function () {
            console.log('vue 挂载完毕~')
        }

在这里插入图片描述
总结:
1.Vue生命周期总共分为几个阶段?
⇒ 八个阶段
2.Vue生命周期典型的应用场景?
页面加载完毕时,发起异步请求,加载数据,渲染页面.

Axios

我们前面说完Vue的生命周期挂载完毕之后,发送请求获取数据,这里介绍一个Ajax的一个函数库Axios.

介绍:Axios对原生的Ajax进行了封装,简化书写,快速开发

在这里插入图片描述

后端代码:

@RestController
@RequestMapping("/article")
@CrossOrigin//支持跨域
public class ArticleController {

    private List<Article> articleList = new ArrayList<>();

    {
        articleList.add(new Article("医疗反腐绝非砍医护收入", "时事", "2023-09-5", "已发布"));
        articleList.add(new Article("中国男篮缘何一败涂地", "篮球", "2023-09-5", "草稿"));
        articleList.add(new Article("华山景区已受大风影响阵风达7-8级", "旅游", "2023-09-5", "已发布"));
    }

    //新增文章
    @PostMapping("/add")
    public String add(@RequestBody Article article) {
        articleList.add(article);
        return "新增成功";
    }

    //获取所有文章信息
    @GetMapping("/getAll")
    public List<Article> getAll(HttpServletResponse response) {

        return articleList;
    }

    //根据文章分类和发布状态搜索
    @GetMapping("/search")
    public List<Article> search(String category, String state) {
        return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());
    }
}

前端代码:

<body>
  <!-- 引入axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    // 发送请求
    axios({
      method: 'get',
      url: 'http://localhost:8080/article/getAll'
    }).then(result => {
      //成功的回调
      //result代表服务器响应的所有的数据,包含了响应头,响应体,result.data代表的是接口响应的核心数据
      console.log(result.data);
    }).catch(err => {
      //失败的回调
      console.log(err);
    });
  </script>
</body>

在这里插入图片描述
再来一个

<body>
  <!-- 引入axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    // 发送请求
    let = article = {
      title: "明天会更好",
      category: '生活',
      time: '2000-01-01',
      state: '草稿'
    }
    axios({
      method: 'post',
      url: 'http://localhost:8080/article/add',
      data: article
    }).then(result => {
      //成功的回调
      //result代表服务器响应的所有的数据,包含了响应头,响应体,result.data代表的是接口响应的核心数据
      console.log(result.data);
    }).catch(err => {
      //失败的回调
      console.log(err);
    });
  </script>
</body>

在这里插入图片描述

案例

在这里插入图片描述

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category">

        发布状态: <input type="text" v-model="searchConditions.state">

        <button @click="search">搜索</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    articleList: [],
                    searchConditions: {
                        category: "",
                        state: ""
                    }
                }
            },
            methods: {
                //声明方法
                search: function () {
                    //发送请求,完成搜索
                    axios.get("http://localhost:8080/article/search?category=" +
                        this.searchConditions.category + "&state=" + this.searchConditions.state)
                        .then(result => {
                            this.articleList = result.data;
                        }).catch(err => {
                            console.log(err);
                        });
                }
            },
            //钩子函数mounted中,获取所有文章数据源
            mounted: function () {
                //发起异步请求 axios
                axios.get("http://localhost:8080/article/getAll").then(result => {
                    // console.log(result.data)
                    this.articleList = result.data
                }).catch(err => {
                    console.log(err);

                });

            }
        }).mount("#app") //控制html元素
    </script>

</body>