首页 > 其他分享 >VUE-局部使用

VUE-局部使用

时间：2024-05-14 16:08:28浏览次数：27  
标签：category vue createApp 局部 state VUE https 使用 data

目录

VUE-局部使用

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。 （官方：https://cn.vuejs.org/）

image-20240513214331028

image-20240513214422667

快速入门

准备

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

构建用户界面

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

vscode新建html文件并快速生成标准的html代码：https://www.cnblogs.com/kohler21/p/18190122

示例代码：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <!-- 引入vue模块 -->
    <script type="module">
        // 引入vue模块
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        //创建vue的应用实例
        createApp({
            data(){
                return{
                    //定义数据
                    msg: 'hello,vue'
                }
            }

        }).mount("#app");
    </script>
</body>
</html>

vscode安装Live Server插件即可直接运行

image-20240513215229009

image-20240513215348572

运行效果：

image-20240513215455843

常用指令

指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

指令 作用
v-for 列表渲染，遍历容器的元素或者对象的属性
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件

v-for

作用：列表渲染，遍历容器的元素或者对象的属性
语法： v-for = "(item,index) in items"
参数说明：

  • items 为遍历的数组
  • item 为遍历出来的元素
  • index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
</html>

运行效果：

image-20240513220759989

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

v-bind

  • 作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
  • 语法：v-bind:属性名="属性值"
  • 简化：:属性名="属性值"

v-bind所绑定的数据，必须在data中定义 。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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.cnblogs.com/kohler21'
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

运行效果：

点击即可跳转

image-20240513221310455

v-if & v-show

  • 作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if

  • 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
  • 其它：可以配合 v-else-if / v-else 进行链式调用条件判断
  • 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
  • 场景：要么显示，要么不显示，不频繁切换的场景

v-show

  • 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
  • 原理：基于CSS样式display来控制显示与隐藏
  • 场景：频繁切换显示隐藏的场景

v-if 与 v-show的区别：

  • v-if 是根据条件判断是创建还是移除元素节点（条件渲染）。
  • v-show 是根据css样式display来控制元素的显示与隐藏 。

v-if 与 v-show的适用场景：

  • v-if 适用于显示与隐藏切换不频繁的场景 。
  • v-show 适用于显示与隐藏切换频繁的场景 。

v-if示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<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>

    </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:2
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

效果：

image-20240514103627473

v-show实现：

手链价格为:  
        <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>

v-on

  • 作用：为html标签绑定事件
  • 语法：
    v-on:事件名="函数名"
    简写为： @事件名="函数名"
  • 函数需要定义在methods选项内部
createApp({ data(){需要用到的数据}, methods:{需要用到的方法} })

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
</html>

效果：

image-20240514144059468image-20240514144113601

image-20240514144130747

v-model

  • 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
  • 语法：v-model="变量名"
  • v-model 中绑定的变量，必须在data中定义。

image-20240514144321929

image-20240514144407886

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

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

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

        <button>搜索</button>
        <button @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 {
                    //定义数据
                    searchCondition:{
                        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.searchCondition.category='';
                    this.searchCondition.state='';
                }
            }

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

</html>

效果：

222

vue生命周期

  • 生命周期：指一个对象从创建到销毁的整个过程。
  • 生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码

image-20240514154939011

  • 生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码
状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 数据更新前
updated 数据更新后
beforeUnmount 组件销毁前
unmounted 组件销毁后

image-20240514155047511

Vue生命周期典型的应用场景 ：在页面加载完毕时，发起异步请求，加载数据，渲染页面。

Axios

Axios 对原生的Ajax进行了封装，简化书写，快速开发。官网：https://www.axios-http.cn/

Axios使用步骤：

  • 引入Axios的js文件（参照官网）

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  • 使用Axios发送请求，并获取相应结果

image-20240514155537151

  • method：请求方式，GET/POST…
  • url：请求路径
  • data：请求数据

Axios-请求方式别名

  • 为了方便起见，Axios已经为所有支持的请求方法提供了别名
  • 格式：axios.请求方式(url [, data [, config]])

get请求：

  axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
    console.log(result.data);
  }).catch((err) => {
    console.log(err);
  });

post请求：

  axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1').then((result) => {
    console.log(result.data);
  }).catch((err) => {
    console.log(err);
  });

Axios 发送异步请求 :

  • GET:
    axios.get(url).then((res)=>{…}).catch((err)=>{…})
  • POST:
    axios.post(url,data).then((res)=>{…}).catch((err)=>{…})

标签：category,vue,createApp,局部,state,VUE,https,使用,data
From： https://www.cnblogs.com/kohler21/p/18191528

相关文章

  • 探索Vue.js：从基础到进阶
    前言随着现代Web应用程序的日益复杂，前端开发框架也在不断演进，为开发者提供更强大、更高效的工具和技术。在这些框架中，Vue.js以其简洁、灵活和响应式的特点而备受青睐。本文将带领读者深入探索Vue.js，从基础概念到进阶技巧，让你全面了解这个令人惊叹的前端开发框架。Vue.js基......
  • springboot+vue创建_1
    Springboot+vue创建一、创建后台项目1.在文件夹创建一个空文件夹，在idea中打开它2.可以先修改一下file-->settings-->Maven里面的一下东西，改成自己的maven地址（以免后面pom.xml文件有问题）3.在sb_vue_mo中右键-->new-->Module，选择SpringInitializer之后自行修改我是选择了ja......
  • systemd 介绍和使用
    一、systemd介绍systemd是一个Linux系统基础组件的集合，提供了一个系统和服务管理器，运行为PID 1并负责启动其它程序。systemd采用并行化任务，可以提高系统的启动速度（SysV-init 采用串行启动）。除此之外，systemd还具有日志进程、控制基础系统配置、维护登陆用户列表以及系统账户、......
  • fastjson的使用
    Json是一种轻量级的数据交换格式，应该在一个程序员的开发生涯中是常接触的。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。Fastjson是一个Java库，可用于将Java对象转换为其JSON表示形式，也可以......
  • vue+element-ui在表格中计算两数差值并让差值>20的字体显示为红色
    <el-table-columnprop="differential"label="差量"class-name="small-paddingfixed-width"><templateslot-scope="scope"><span:c......
  • 使用Redis执行多个命令
    单个命令执行packagemainimport("context""fmt""github.com/go-redis/redis/v8""time")funcmain(){//创建Redis客户端rdb:=redis.NewClient(&redis.Options{Addr:"localhos......
  • Linux 使用 curl 发送请求
    前言请各大网友尊重本人原创知识分享，谨记本人博客：南国以南i、提示：以下是本篇文章正文内容，下面案例可供参考#get请求json入参curlhttp://xxx.xxx:60512/scrm/chat/msg/selectFullChatListForDay-d'{"key":"215EACF20778586C788FFD9187AB0F72","qrDay":"2023-04-25"}�......
  • Jmeter - BeanSell 后置处理器 结合 HttpClient 使用
    背景：在后置处理器中发送POST请求，请求体为JSON数据疑问：1.如果获取Cookie？2.HttpClient怎么发送POST?3.HttpClient怎么添加Cookie？解决：1.如果获取Cookie？importorg.apache.jmeter.protocol.http.control.CookieManager;importorg.apache.jmeter.protocol.http.control.Coo......
  • 使用快捷键的方式把多个关键字文本快速替换(快速替换AE脚本代码)
    首先，需要用到的这个工具：度娘网盘提取码：qwu2蓝奏云提取码：2r1z 这里做AE(AdobeAfterEffact)里的脚本规则，把英文替换成中文，如下swap=thisComp.layer(“Segmentsettings”).effect("%")(“Checkbox”);if(swap==true){s=thisComp.layer(“Segmentsettings”).effect(“S......
  • Vue学习知识汇总
    官网：https://cn.vuejs.org/前置知识:完整的学习vue:html+css、JavaScript、css3、HTML5、第三方库、网络通信、ES6+、webpack、模块化、包管理器、css预编译器体验vue功能:html+css、JavaScriptVue拥有以下特点：渐进式组件化响应式Vue的应用场景：前台的部分页面......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99