首页 前端知识 Vue - 快速入门,这一套就够了!(Vue core 案例 效果演示)

Vue - 快速入门,这一套就够了!(Vue core 案例 效果演示)

2024-05-08 10:05:12 前端知识 前端哥 19 481 我要收藏

目录

前言

一、Vue 基础

1.1、Vue 基础示例

a)html 部分:

b)script 部分:

二、本地应用

1.1、内容绑定,事件绑定

1.1.1、v-text 设置标签文本值

1.1.2、v-html 设置标签的 innerHTML

1.1.3、v-on 为元素绑定事件

a)基本用法

b)事件修饰符(不常用)

c)按键修饰符

1.1.4、 computed 计算属性

1.1.5、案例:实现一个计数器

1.2、显示切换,属性绑定

1.2.1、v-show 元素的显示和隐藏

1.2.2、v-if切换显示和隐藏(本质和 v-show 不同)

1.2.3、v-bind 设置元素属性

1.2.4、案例:实现切换图片

1.3、列表循环,表单元素绑定

1.3.1、v-for 生成列表结构

1.3.2、v-model 双向绑定

1.3.3、案例:表白墙


前言


前置条件:掌握 HTML、CSS、JavaScript、AJAX.

工具:VsCode.

插件:Live Server(浏览器实时预览)

开发版本 Vue.js 如下:

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

axios.min.js 如下:

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

Ps:建议都提前下载下来,没网的时候也能用.

一、Vue 基础


1.1、Vue 基础示例

如下代码:

<body>

    <div id="app">
        {{ message }}
    </div>

    <!-- Vue -->
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello Vue!"
            }
        });
    </script>

</body>

效果如下:

a)html 部分:

  • {{ }}:插值表达式,通过他就可以直接把 data 中的数据引入.

b)script 部分:

这里需要先创建一个 Vue 对象,构造的写法格式类似于 ajax.

  • el(挂载点):类似于 js 中的选择器(也可以选择其他属性,但是建议 ID 选择器). Vue 实例会管理 el 选项 命中的元素 及内部的 后代元素. 值得注意的一点是, el 只可以命中除了<html> 和 <Body> 以外的所有双标签.
  • data(数据对象):Vue 中用到的数据都定义在 data 中,可以写复杂类型,例如 数组、对象,并且遵守 js 语法.

data 代码示例如下:

<body>
    <div id="container">
        <h1>{{ title }}</h1>
        <span>{{ desc.username }}</span>
        <span>{{ desc.password }}</span>
        <div>
            <li>{{ arr[0] }}</li>
            <li>{{arr[1]}}</li>
            <li>{{arr[2]}}</li>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#container",
            data: {
                title: "登录",
                desc: {
                    username: "账号:cyk",
                    password: "密码:111"
                },
                arr: ["性别", "年龄", "学号"]
            }
        });
    </script>

效果如下:

二、本地应用


1.1、内容绑定,事件绑定

1.1.1、v-text 设置标签文本值

v-text 可以将 data 中的数据通过 {{}} 插值表达式 设置到 html 标签的内容中,并且默认是替换标签内的全部内容. 

另外, v-text 中也支持写表达式,例如通过 "+" 进行字符串或 data 的拼接.

示例如下:

    <div id="app">
        <h1 v-text="message"></h1>
        <h1 v-text="message+'!'"></h1>
        <h1>{{message + "~"}}</h1>
        <h1 v-text="message + info"></h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好",
                info: ", 最近好么?"
            }
        });
    </script>

效果如下:

1.1.2、v-html 设置标签的 innerHTML

v-html 指令可以将内容中的 html 解析成标签,而 v-text 只能解析成文本.

示例如下:

    <div id="app">
        <h2 v-html="message"></h2>
        <h2 v-text="message"></h2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: '<a href="https://www.baidu.com">百度</a>'
            }
        });
    </script>

效果如下:

1.1.3、v-on 为元素绑定事件

a)基本用法

v-on 指令就是为元素绑定事件的,也可以将 v-on 简写为 @.  绑定的方法定义在 methods 属性中,方法内部必须通过 this 关键字访问到定义在 data 中的数据.

常用绑定如下:

  • v-on:click="方法":点击事件.
  • v-on:dblclick="方法":双击事件.
  • v-on:monseenter="方法":鼠标移入事件.

也可以简写为:

  • @click="方法":点击事件
  • @dblclick="方法":双击事件.
  • @monseenter="方法":鼠标移入事件.

Ps:这里的方法也可以自定义参数.

示例如下:

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="study">
        <input type="button" value="v-on简写" @click="study">

        <input type="button" value="双击事件" @dblclick="changeFood">
        <h1 v-text="food"></h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                food: "鸡蛋炒米饭"
            },
            methods: {
                study: function () {
                    alert("学习 Java!");
                },
                // 此处也可以把 function 省略
                changeFood() {
                    this.food += "超级好吃!"
                }
            }
        });
    </script>

效果如下:

a)点击 v-on指令 按钮(v-on简写效果一样)

b)双击两次 双击事件 按钮

b)事件修饰符(不常用)

语法如下:

@事件名事件修饰符="事件处理函数"

例如:@click.stop="test"

主要有以下修饰符:

  • .stop(比较常用):用来阻止事件继续向外传递. 

例如 div1 有一个子 div2,如果两个 div 都设置了 @click 点击事件,那么当用户点击 子div2 ,会先执行 div2 在向外传递,执行 div1 的点击事件.  如果给子div2 设置了此修饰符,再点击 子div2 时,那么执行完 div2 时,就结束了.

  • .prevent:用来阻止标签的默认行为.

例如有一个 a 标签,href 指向某一个地址,点击后会进行跳转.  那么此时给他设置点击事件,他会先执行点击事件,再进行跳转,此时如果只想执行点击事件,不进行跳转,就可以使用此修饰符.

  • .self:只监听自身标签触发的事件.

例如 div1 有一个子 div2,如果两个 div 都设置了 @click 点击事件,那么当用户点击 子div2 ,会先执行 div2 在向外传递,执行 div1 的点击事件.  如果给 子div1 设置了此修饰符,再点击 div2 ,那么执行完 div2 时,就结束了.

  • .once:该事件只触发一次.

例如有一个 div 标签,设置了 @click 点击事件,那么只有第一次点击才触发事件,之后再点击就不会触发了.

c)按键修饰符

用来对键盘按键事件进行修饰,例如 keyup(按下键盘立即触发),keydown(抬起键盘立即触发).

语法如下:

@按键事件按键修饰符="事件处理函数"

例如:@keyup.enter="test"

主要有以下修饰符:

  • .enter:对键盘回车键修饰.
  • .tab:对键盘切换 tab 按键修饰.
  • .delete:捕获 "删除" 和 "退格" 键.
  • .esc:对键盘的 esc 按键修饰.
  • .space:捕获空格按键.
  • .up:上.
  • .down:下.
  • .left:左.
  • .right:右.

Ps:这里也可以进行链式调用,比如 @keyup.enter.tab.esc ,就是同时对这三个键进行捕获,捕获到任意一个都会触发 事件处理函数.

示例如下:

<body>

    <div id="app">
        <input type="button" value="按我有惊喜~" @click="doIt('java', 666)">
        <!-- @keyip() 如果没有指定,那么敲击键盘上任意一个案件都会触发对应的方法 -->
        <!-- enter 表示敲击 回车 会触发 -->
        <input type="text" @keyup.enter="doEnter">
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1, p2) {
                    alert("学习" + p1 + "真是" + p2 + " (如同 49 年入国军)");
                },
                doEnter: function () {
                    alert("按下了回车");
                }
            }
        });
    </script>

</body>

效果如下:

a)点击按我有惊喜

b)选中输入框内,按 enter 键

1.1.4、 computed 计算属性

作用:在 Vue 实例中完成计算任务.

好处:提升 Vue 运算性能,因为他会将第一次计算的结果进行缓存,便于日后多次调用.

潜台词:只要涉及到计算的地方,用它就够了.

示例如下:

<body>

    <div id="app">
        <div>{{ mTest() }}</div>
        <div>{{ mTest() }}</div>
        <div>{{ mTest() }}</div>
        <!-- 计算属性,是属性,不是方法,因此不用带 () -->
        <div>{{ cTest }}</div>
        <div>{{ cTest }}</div>
        <div>{{ cTest }}</div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                result: 0
            },
            methods: {
                mTest() {
                    console.log("执行了 methods!");
                    return 1;
                }
            },
            computed: {
                //虽然是计算属性,但是这里要写成方法的形式
                cTest() {
                    console.log("执行了 computed")
                    return 2;
                }
            }
        });
    </script>

</body>

效果如下: 

1.1.5、案例:实现一个计数器

需求:

  1. 点击 加1 按钮,计数器 +1;
  2. 点击 减1 按钮,计数器 -1. 
  3. 计数器上限为 10,下限为 0.

代码如下:

<body>

    <div id="app">
        <h1 v-text="num"></h1>
        <input type="button" value="减1" @click="sub">
        <input type="button" value="加1" @click="add">
        <div>
            <input type="button" value="双击归零" @dblclick="ret">
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("当前以及是最小值了!");
                        return;
                    }
                },
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("当前以及是最大值了!");
                        return;
                    }
                },
                ret: function () {
                    this.num = 0;
                }

            }
        });
    </script>
</body>

效果如下:

a)点击一次减1

b)点击6次加1

1.2、显示切换,属性绑定

1.2.1、v-show 元素的显示和隐藏

v-show 指令可以根据真假(布尔类型)来切换元素的显示状态,本质上是修改元素的 display.

Ps:数据改变以后,对应元素的显示会同步更新.

示例如下:

<body>

    <div id="app">
        <input type="button" value="图标展示开关" v-on:click="show">
        <img src="../img/Vue.png" v-show="isShow">

        <div>
            <input type="button" value="也支持表达式" v-on:click="add">
        </div>
        <img src="../img/Vue.png" v-show="num>2">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                isShow: true,
                num: 1
            },
            methods: {
                show: function () {
                    this.isShow = !this.isShow;
                },
                add: function () {
                    this.num++;
                }
            }
        });
    </script>
</body>

效果如下:

 a)点击图标展示开关

b)点击两次 也支持表达式 按钮

1.2.2、v-if切换显示和隐藏(本质和 v-show 不同)

v-if 的作用就是根据表达式的布尔值切换元素的显示状态,本质就是通过操作 dom 元素状态来切换显示状态(表达式为 true ,元素新增在 Dom 树中;为 false,从 dom 中删除).

因此建议:如果显示和隐藏的操作十分频繁,建议使用 v-show,反之,使用 v-if.

示例如下:

<body>

    <div id="app">
        <input type="button" value="切换显示状态" v-on:click="changeShow">
        <h2 v-if="isShow">我是 v-if! 我出来啦!</h2>
        <h2 v-show="isShow">我是 v-show!我出来啦!</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changeShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>

效果如下:

a)点击按钮

1.2.3、v-bind 设置元素属性

v-bind 用来为元素绑定属性,例如 src、title、class.

用法:v-bind:属性名=表达式.

简写::属性名

Ps:通过 v-bind 增删属性是动态的.

示例如下:

<body>
    <div id="app">
        <img v-bind:src="imgSrc" width="100px" height="100px">
        <br>
        <!-- 三元表达式 -->
        <img :src="imgSrc" :class="isShow?'active':''" width="100px" height="100px">
        <br>
        <!-- active 这个 class 属性是否生效,取决于 isShow -->
        <!-- 这种方式比三元表达式更推荐 -->
        <img :src="imgSrc" :class="{active: isShow}" width="100px" height="100px" @click="changeShow">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                imgSrc: "../img/Vue.png",
                isShow: true,
            },
            methods: {
                changeShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

</body>

效果如下:

a)点击第三个图标.

1.2.4、案例:实现切换图片

需求:

有三张图片,实现切换图片效果.

当前为第一张图片时,不显示 <上一张< 按钮,<下一张< 按钮同理.

示例如下:

<template>
  <div id="login">
    <div>
      <input type="button" value="上一张" @click="prev" v-show="index > 0" />
      <img :src="imgSrc[index]" alt="" class="def" />
      <input type="button" value="下一张" @click="next" v-show="index < 2" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: [
        require("../assets/docker.jpg"),
        require("../assets/vmware.png"),
        require("../assets/Vue.png"),
      ],
      index: 0,
    };
  },
  methods: {
    prev: function () {
      console.log(this.imgSrc[this.index]);
      this.index--;
    },
    next: function () {
      this.index++;
    },
  },
};
</script>

<style scoped>
.def {
  height: 50px;
  width: 100px;
}
</style>

注意:

 以下这种方式引入图片是无效的,因为 Vue 中的打包工具 webpack 是按照字符打包的,不会做任何处理,所以需要 import 外部引入或者 require 内部引入。

export default {
	data:{
		return {
			src:'./assets/image/a.jpg' 
		}
	}
}

 如下:

//外部引入
import a from './assets/image/a.jpg'
export default {
	data:{
		return {
			src:'./assets/image/a.jpg'
		}
	}
}
//内部引入
export default {
	data:{
		return {
			src:require('./assets/image/a.jpg')
		}
	}
}

效果如下:

a) 第一张图片

b)第二张图片

c)第三张图片

1.3、列表循环,表单元素绑定

1.3.1、v-for 生成列表结构

v-for 用来根据数据生成列表结构,经常和数组搭配使用. 

用法如下(类似于 Java 中的 for(arr : arrs)):

v-for="(item, index) in 数据名"

item:自定义的变量名,是 数据名 一条条遍历得到的数据,

index:数据名的当前遍历的下标.

数据名:data 中数组的名字.

注意:在使用 v-for 的时候,官方建议建议提供 v-bind:key="唯一标识" 来为 Vue 提供唯一属性,提高效率

Ps:数组的长度也是动态更新的.

示例如下:

<body>

    <div id="app">
        <h3 v-for="(name,index) in names" :key="name">
            {{index + 1}}. 姓名: {{name}}
        </h3>
        <hr>
        <input type="button" value="最后再加一份牛肉" @click="add">
        <input type="button" value="删除第一道菜" @click="remove">
        <h2 v-for="food in foodNames">
            {{food.name}}
        </h2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                names: ["张三", "李四", "王五", "赵六"],
                foodNames: [
                    { name: "炒饭" },
                    { name: "炒面" },
                    { name: "炒鸡蛋" }

                ]
            },
            methods: {
                add: function () {
                    this.foodNames.push({ name: "牛肉" });
                },
                remove: function () {
                    this.foodNames.shift();
                }
            }
        });
    </script>
</body>

效果如下:

a)点击两次 最后再加一份牛肉 按钮.

b)点击两次 删除第一道菜 按钮

1.3.2、v-model 双向绑定

v-model 可以更便捷的设置和获取表单元素值,并且绑定的数据会和表单元素值相关联(动态双向绑定).

示例如下:

<body>

    <div id="app">
        <input type="text" v-model="message" @keyup.enter="show">
        <input type="button" value="修改" @click="change">
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "php 是世界上最好的语言!"
            },
            methods: {
                show: function () {
                    alert(this.message);
                },
                change: function () {
                    this.message = "java 才是最牛逼的!";
                }
            }
        });
    </script>

</body>

上述代码中,在浏览器中的 input 框中输入 任何信息都会使Vue 的 data 数据中 message 立即同步.  并且如果修改 data 中 message 的值,也会影响到 浏览器中 input 框中的数据立即更新.

效果如下:

a)点击修改按钮

1.3.3、案例:表白墙

需求:实现一个表白墙.

  1. 实现在墙上发布表白内容.
  2. 实现清空数据功能.
  3. 统计总数据.
  4. 删除指定表白内容.

代码如下:

<body>

    <div id="app">
        <h1>表白墙</h1>
        <div>
            <span>你:</span>
            <input type="text" v-model="myname">
        </div>
        <div>
            <span>对他:</span>
            <input type="text" v-model="itName">
        </div>
        <div>
            <span>说:</span>
            <input type="text" v-model="msg" @keyup.enter="publish">
        </div>
        <div>
            <input type="button" value="发布" @click="publish">
            <input type="button" value="清空" @click="clearAll">
            <span>共有 {{msgList.length}} 条数据</span>
        </div>

        <hr>
        <ul>
            <li v-for="(message, index) in msgList">
                <span>{{ (index + 1) + '. ' + message }}</span>
                <input type="button" value="删除" @click="del(index)">
            </li>
        </ul>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                myname: "",
                itName: "",
                msg: "",
                msgList: ["lyj 对 cyk 说: 喵~"]
            },
            methods: {
                publish: function () {
                    let tmpMsg = this.myname + " 对 " + this.itName + " 说: " + this.msg;
                    this.msgList.push(tmpMsg);
                },
                del: function (toDelIndex) {
                    this.msgList.splice(toDelIndex, 1); //从 toDelIndex 下标开始往后删除一个元素
                },
                clearAll: function () {
                    this.msgList = [];
                }
            }
        });
    </script>

</body>

效果如下: 

a)输入数据后,发布两条数据.

b)删除第二条数据

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7529.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!