Vue的局部使用

🕗 发布于 2024-11-17 18:01 vue.js javascript 前端

文章目录

什么是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>

原文地址：https://blog.csdn.net/2301_79602614/article/details/143817193

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：15分钟学 Go 第 57 天：持续集成与持续部署
下一篇：opencv(c++)----图像的读取以及显示

手机ip地址异常怎么解决
在现代社会中，手机已成为我们日常生活中不可或缺的一部分，无论是工作、学习还是娱乐，都离不开网络的支持。然而，有时我们会遇到手机IP地址异常的问题，这不仅会影响我们的网络体验，还可能带来安全隐患。本文将
阅读更多2024-11-17
Windows 小记 5 -- 判断账户是否是管理员账户
域用户（针对间接或者嵌套用户组，最佳的获取方式是通过令牌SID，如果用户账户已经登陆，则可以通过进程句柄获取令牌，否则，则需要通过凭据登陆获取令牌）此外需要注意，当账户没有启用时，可能是无法创建和登陆
阅读更多2024-11-17
Python 小高考篇（5）自定义函数
通过def关键词，可以自定义一个函数，之后再在代码内调用它。第一行代表定义一个函数，函数名字叫hello；第2行到第3行代表该函数需要执行的东西，第4行代表执行该函数。lambda是一种很简洁（偷懒）
阅读更多2024-11-17
MySQL慢日志
日志顾名思义就是查询慢的sql语句可以记录到一个日志文件里，至于有多慢才会被记录，默认是10秒，但也可以通过系统配置来更改，慢日志在做系统优化时是一个非常好用的工具。上面的操作只是对本次MySQL服务
阅读更多2024-11-17
凹凸/高度贴图、法线贴图、视差贴图、置换贴图异同
因为NormalMap只是改变的表面上的光照结果，并没有改变表面上的形状，不能实现自身内部的遮挡，因此不能表现平面上凹凸起伏比较大的场合。根据经验，这个凸起会很轻易的挡住我们的视线，让我们看不见那支牙
阅读更多2024-11-17
PMBOK® 第六版控制进度
制定了明确的计划后，对计划的控制尤为重要。例如，经常提到的“累积效应”，如果某个阶段的评分仅为0.9分，那么五个得分为0.9分的阶段，最终结果可能只是一个0.5分。
阅读更多2024-11-17
网络通信NetClient实现
上一集我们就完成了数据中心类的内容，那么我们开始需要进行网络的通信，我们这一集就要封装一个类来帮我们实现网络上的通信。
阅读更多2024-11-17
frp内网穿透介绍安装教程
内网穿透（Port Forwarding）是将公网上的IP地址映射到内部网络中的一台计算机的某个端口上，以便外部网络可以访问该计算机中运行的应用程序。内网穿透技术可以通过一些开源工具来实现，其中比较常
阅读更多2024-11-17
【网络】子网掩码
前面我们已经学习了网络的基础知识，对网络的基本框架已有认识，算是初步认识到网络了，如果上期我们的学习网络是步入基础知识，那么这次学习的板块就是基础知识的实践，我们今天的板块是学习网络重要之一，学习完这
阅读更多2024-11-17
网络物理隔离应用
其实公安的摄像头视频好几个王都有，视频量最大的在公安视频专网里面，还有一些就是社会资源的摄像头，比如一些酒店、网吧，他会有视频监控，这些视频监控，是要求你要把它导入到公安视频专网里面，视频专网跟互联网
阅读更多2024-11-17

Vue的局部使用

文章目录

什么是Vue?

局部使用Vue

快速入门

常用指令

v-for

v-bind

v-if & v-show

v-on

v-model

Vue生命周期

Axios

案例

相关文章