【Vue】基础语法（创建项目|数据绑定|事件绑定|声明方法|插值表达式|属性值绑定|循环数组|v-if控制||计算属性|监听器|过滤器）

news2024/11/16 23:39:18

文章目录

      • 1. Vue 思想：
      • 2. VUE 的基本使用
        • 2.1 创建项目并进行基础测试
        • 2.2 数据绑定
        • 2.3 事件绑定
        • 2.4 声明方法
        • 2.5 插值表达式
        • 2.6 给任意属性绑定值
        • 2.7 v-for 循环数组或对象的使用
        • 2.8 v-if 和 v-show 控制是否显示
        • 2.9 计算属性和监听器属性
        • 2.10 过滤器属性
      • 3. 总结 Vue 的基本使用

1. Vue 思想：

MVVM ： 将开发人员从繁琐的 DOM 操作中解放出来，抽取出 Model 层，实现数据发生变化，视图就自动发生变化
在这里插入图片描述

2. VUE 的基本使用

2.1 创建项目并进行基础测试

  1. 使用 vscode 打开一个空项目 （我们这里使用 vscode 作为前端的工具），并为 vs 安装 vue 语法提示插件。

在这里插入图片描述

  1. 在控制台输入下面的命令，初始化项目
	npm init -y

在这里插入图片描述

  1. 然后输入下面的命令，安装 vue 环境
	 npm install vue@2
  1. 新建 index.html 文件填入下面的代码进行测试
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
   
    <div  id="app">
        <h1>{{name}}， 非常好看~~</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "wanqing"
            }
        });

    </script>
</body>
</html>

特别注意 —— ：

  1. 位置一：给模板位置添加 id="app"
 	<div  id="app">
        <h1>{{name}}， 非常好看~~</h1>
    </div>
  1. 位置二：注意导入 vue.js 语句的位置，即下面的代码要放入 div 的后面， 创建 vue 实例的前面
    <script src="./node_modules/vue/dist/vue.js"></script>

在浏览器打开上面的页面，这样我们就能体会到让 Vue 实例绑定元素 ，从而元素能使用 Vue 强大的功能 的 Vue 框架的魅力了 （为浏览器安装 Vue 插件的方法这里不赘述）

2.2 数据绑定

使用 v-model 将某个位置的值和 data 中的值进行绑定 —— v-model 是双向绑定，视图变了原数据也会变

见如下实例：

    <div  id="app">
        <!--将输入框中的值与 data 中的 num 进行绑定-->
        <input type="text" v-model="num">
        <h1>{{name}}， 非常好看~~,有{{num}}个人也这么觉得</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "wanqing",
                num: 1
            }
        });

    </script>

运行截图：

（ps: 才4个人觉得我好看，QAQ，点个赞赞安慰一下吧~~~ ~某女子为了要赞，竟然…）
在这里插入图片描述

使用 v-model 实时获取表单数据示例：

    <!-- v-model 是双向绑定，数据变了元素也会变-->
    <div id="app">
        wanqing 精通的语言：
        <input type="checkbox" value="java" v-model="language"> java <br>
        <input type="checkbox" value="js" v-model="language"> js <br>
        <input type="checkbox" value="python" v-model="language"> python <br>
        选中了：{{language.join(",")}}

    </div>
   
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                language: []
            },
            method: {
                
            }
        });
    </script>

2.3 事件绑定

使用 v-on 进行事件绑定，如下实例为按钮点击事件绑定 click 事件，click事件为 num ++

       <button v-on:click="num++">觉得wanqing好看</button>
       <script>
	        let vm = new Vue({
	            el: "#app",
	            data: {
	                name: "wanqing",
	                num: 1
	            }
	        });
    </script>

2.4 声明方法

在创建 Vue 实例时，在 methods 属性中即为我们声明的方法，代码示例如下：

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "wanqing",
                num: 1
            },
            methods: { 
                cancle(){ // 声明cancle方法，方法内操作为为 num--
                    this.num--;
                }
            }
        });
    </script>

按钮事件绑定方法：在 click 后面加入方法名即可，代码示例如下：

        <button v-on:click="cancle">取消喜欢</button>

2.5 插值表达式

使用 v-html="要解析的值" 使得可以解析 html 语句。插值表达式的内容可以为 html ，也可以为方法返回值，也可以为表达式，这些都可以被解析。但是要注意的是插值表达式只可以用在标签体中。

    <div id="app">
        {{msg}} <br>
        <!--能避免插值闪烁-->
        <span v-html="msg"></span> <!--插值表达式，直接显示html内容-->
        <span v-text="msg"></span>
    </div>
   
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                msg : "<h1>hello, wanqing</h1>"
            },
            method: {

            }
        });
    </script>

2.6 给任意属性绑定值

使用 v-bind 给任意属性绑定值，注意这种绑定是单向绑定： 即数据变化，页面元素变化，反过来不成立

    <div id="app">
        <!-- href 属性和 vue 数据进行绑定-->
        <a v-bind:href="link">去百度</a>

        <!--对 class 和 style 进行了增强-->
        <span v-bind:class="{active:isActive, 'text-danger':hasError}"
        v-bind:style="{color:color1}">你好鸭，动态绑定,是否加上与某个属性的 true \ false 有关 class</span>
    </div>
   
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                link: "https://www.baidu.com",
                isActive: false,
                hasError: false,
                color1: 'blue'
            },
            method: {
                
            }
        });
    </script>

v-bind 高级用法，对 class 和 style 进行增强，根据绑定值的不同，显示不同的样式

    <div id="app">
        <!-- href 属性和 vue 数据进行绑定-->
        <a v-bind:href="link">去百度</a>

        <!--对 class 和 style 进行了增强-->
        <span v-bind:class="{active:isActive, 'text-danger':hasError}"
        v-bind:style="{color:color1}">你好鸭，动态绑定,是否加上与某个属性的 true \ false 有关 class</span>
    </div>
   
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                link: "https://www.baidu.com",
                isActive: false,
                hasError: false,
                color1: 'blue'
            },
            method: {
                
            }
        });
    </script>

2.7 v-for 循环数组或对象的使用

使用 v-for 可以循环对象数组，也可以循环对象中的每个属性，其代码示例如下：

        <!-- v-for 可以遍历对象数组，也可以遍历对象, :key 是索引，用于区分不同的元素-->
        <div id="app">
            <!--第二项 index 为索引 ，值为从 0 到 users 数组长度-->
            <li v-for="(user, index) in users" :key="user.name">
                当前索引： {{index}} {{user.name}} ==> {{user.age}}  <br>
                <!--遍历对象中每个属性的方法-->
                对象值信息：<span v-for="value in user">{{value}}</span> <br>
                对象键值对信息：<span v-for="(value, key, i) in user"> {{i}}({{key}}, {{value}}) </span>
            </li>
			<!--遍历普通的数字数组-->
            <ul>
                <li v-for="(num,index) in nums" :key="index">{{num}}</li>
            </ul>
    
        </div>
       
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data:{
                    users: [
                        {name: "wangqing", age:20},
                        {name: "tian~", age:20},
                        {name: "xinyu", age:22}
                    ],
                    nums: [1, 2, 3, 4, 5]
                },
                method: {
                    
                }
            });
        </script>

2.8 v-if 和 v-show 控制是否显示

两者区别：v-if 直接删除该位置的代码标签，v-show 是利用样式隐藏，代码示例如下：

        <!-- v-for 可以遍历对象数组，也可以遍历对象, :key 是索引，用于区分不同的元素-->
        <div id="app">
            
           <button @click="show = !show">点击按钮</button>

           <h1 v-if="show"> show 为 true , 使用 v-if 可以看见我</h1>
           <h1 v-show="show"> show 为 true , 使用 v-show 可以看见我</h1>
        </div>
       
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data:{
                    show: true
                },
                method: {
                    
                }
            });
        </script>

v-else 结合 v-else-if 实现更强大的功能代码示例 ——

            
            <div id="app">
            
                <button @click="random = Math.random()">点击按钮</button>
     
                <h1 v-if="random >= 0.75"> random >= 0.75 看见我 </h1>
                <h1 v-else-if ="random >= 0.50"> random >= 0.5 看见我 </h1>
                <h1 v-else-if ="random >= 0.25"> random >= 0.25 看见我 </h1>
                <h1 v-else> 最后的else 看见我 </h1>
             </div>
            
             <script src="./node_modules/vue/dist/vue.js"></script>
             <script>
                 new Vue({
                     el: '#app',
                     data:{
                         random : 1
                     },
                     method: {
                         
                     }
                 });
             </script>

2.9 计算属性和监听器属性

计算属性用于实时获取值的变化展示计算结果，监听器属性也能实时监听值的变化并进行提醒，其代码示例如下：


    <div  id="app">
        <li>wanqing； 价格： {{wanqingPrice}} , 数量： <input type="number" v-model="wanqingNum"></li>
        <li>西瓜； 价格：{{xiguaPrice}} , 数量： <input type="number" v-model="xiguaNum"></li>
        <li>总价： {{totalPrice}}</li>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                wanqingPrice: 100000000,
                xiguaPrice: 1,
                wanqingNum: 1,
                xiguaNum: 20
            },
            computed: { // 计算属性，会动态监听，返回价值总和
                totalPrice(){
                    return this.wanqingPrice*this.wanqingNum + this.xiguaNum * this.xiguaPrice
                }
            }, 
            watch: { // 监听器属性，监听到有人试图修改刘婉晴的个数，就会提醒
                wanqingNum: function(newVal, oldVal){
                    //alert(oldVal +" ==>" + newVal)
                    if(newVal != 1){
                        alert("想什么呢，婉晴只能有一个哦，不是0个也不是2个是一个")
                        this.wanqingNum = 1;
                    } 
                }
    
            },
            methods: {
                cancle(){
                    this.num--;
                }
            }
        });
    </script>

2.10 过滤器属性

过滤器属性可以实现对某个值的过滤，如若性别值为 1，则返回 男； 而若性别值是 0，则返回女 —— 其可实现三目运算符的功能

        <div id="app">
            
            <h1>使用三木运算符实现男女过滤</h1>
            <li v-for="(user, index) in users" :key="user.name">
                当前索引： {{index}} {{user.name}} ==> {{user.age}} ==> {{user.gender == 1 ? "靓仔" : "美女"}}  <br>
            </li>

            <h1>使用过滤器实现男女过滤</h1>
            <li v-for="(user, index) in users" :key="index">
                当前索引： {{index}} {{user.name}} ==> {{user.age}} ==> {{user.gender | genderFilter}}  <br> <!--通过管道符将 gender 传给过滤器-->
            </li>


        </div>

        <script src="./node_modules/vue/dist/vue.js"></script>
        <script>

            Vue.filter("gFilter", function(val){ // 全局过滤器，在任何实例中都能用
                if(val == 1){
                    return "靓仔"
                } else{
                    return "美女"
                }
            })

            new Vue({
                el: '#app',
                data:{
                    users: [
                        {name: "wangqing", age:20, gender:0},
                        {name: "tian~", age:20, gender:0},
                        {name: "xinyu", age:22, gender:1}
                    ],
                },
                filters:{ // 过滤器属性
                    genderFilter(val){ // 过滤器接收一个值返回一个值
                        if(val == 1){
                            return "靓仔"
                        } else{
                            return "美女"
                        }
                    }
                },
                method: {
                    
                }
            });
        </script>

3. 总结 Vue 的基本使用

  • 创建Vue 实例（new Vue），关联页面的模板（id=“app”），同时 el 绑定元素 el: “#app”,
  • 通过指令简化对 DOM 的操作（v-model，v-on … ）
  • 也可以通过声明方法作更简洁的操作 (method)
  • 好好利用 vue 提供的属性 （如计算属性、监听器属性 和 过滤器等）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/31469.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智慧工程安监物联网+云平台解决方案-最新全套文件

智慧工程安监物联网+云平台解决方案-最新全套文件

智慧工程安监物联网云平台解决方案-最新全套文件一、建设背景监管部门所处困境建筑施工业存在难点工程现场安全现象二、建设思路实现目标三、建设方案四、获取 - 物联网全套最新解决方案合集一、建设背景 智慧工地 是指运用 信息化 手段&#xff0c;通过 三维 设计平台对 工程…
阅读更多...
Linux发行版---常用命令操作快速熟悉

Linux发行版---常用命令操作快速熟悉

针对linux发行版&#xff08;如ubuntu、raspian等&#xff09;的基础使用说明&#xff0c;以快速熟悉linux发行版的操作。 一、系统信息 查看处理器架构&#xff1a;arch查看内核版本&#xff1a;cat /proc/version; uname -a查看操作系统版本&#xff1a;head -n 1 /etc/iss…
阅读更多...
c语言：初识结构体

c语言：初识结构体

初识结构体一.结构体声明1.结构体的概念2.声明二.结构体的基础使用三.结构体变量的定义和初始化一.结构体声明 1.结构体的概念 结构体是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量 这里与数组做出区分&#xff1a;数组是一组相同类型元…
阅读更多...
上海 Meetup | 一键获取 11 大云原生热门开源项目技术分享入场券

上海 Meetup | 一键获取 11 大云原生热门开源项目技术分享入场券

活动介绍 微服务 x 容器开源开发者 Meetup 是由阿里云飞天 club 与云原生应用平台共同打造&#xff0c;面向一线开发者的技术交流活动&#xff0c;整体内容聚焦容器 & 微服务方向&#xff0c;旨在通过热门的开源技术、云原生在企业的应用实践案例、架构设计思维等&#xf…
阅读更多...
CopyOnWriteArrayList 是如何保证线程安全的？

CopyOnWriteArrayList 是如何保证线程安全的？

本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 提问。 前言 大家好&#xff0c;我是小彭。 在上一篇文章里&#xff0c;我们聊到了ArrayList 的线程安全问题&#xff0c;其中提到了 CopyOnWriteArrayList 的解决方法。那么 CopyOn…
阅读更多...
倒计时9天|Zabbix中国峰会15位重磅嘉宾抢先看！

倒计时9天|Zabbix中国峰会15位重磅嘉宾抢先看！

2022Zabbix峰会演讲嘉宾 &#xff08;有奖互动&#xff1a;转发本文或任一讲师海报至朋友圈&#xff0c;保留5分钟&#xff0c;即可获得Zabbix定制周边礼品一份&#xff0c;仅限100份&#xff0c;先到先得&#xff0c;详情联系文末小Z) 第7届Zabbix中国峰会将于12月2-3日举行…
阅读更多...
腾讯产品经理的自动化工作流

腾讯产品经理的自动化工作流

作为腾讯产品经理的一员&#xff0c;Johnny中扬每天需要面对来自各方繁琐的需求。如何管理好用户需求、并及时规划、完成、反馈&#xff0c;上周中扬和我们分享了他的工作流。如果你也是产品经理&#xff0c;或者对腾讯产品经理的工作日常比较感兴趣&#xff0c;错过了上次的直…
阅读更多...
【数据结构】堆的实现

【数据结构】堆的实现

堆1.堆&#xff1a;一种二叉树2.堆的概念及结构3.堆的实现3.1 创建堆的结构3.2 堆的初始化3.3 堆的插入3.4 堆的向上调整法&#xff08;up&#xff09;3.5 打印堆的数据3.6 到这里就可以实现一个基本的堆了3.7 向下调整法down&#xff08;非常重要的一个方法&#xff09;3.8 最…
阅读更多...
Java项目：JSP校园运动会管理系统

Java项目：JSP校园运动会管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目包含三种角色&#xff1a;运动员、裁判员、管理员&#xff1b; 运动员角色包含以下功能&#xff1a; 运动员登录,个人信息修改,运动成绩…
阅读更多...
【网络安全】——sql注入之奇淫巧技bypass(持续更新中)

【网络安全】——sql注入之奇淫巧技bypass(持续更新中)

作者名&#xff1a;Demo不是emo 主页面链接&#xff1a;主页传送门创作初心&#xff1a;舞台再大&#xff0c;你不上台&#xff0c;永远是观众&#xff0c;没人会关心你努不努力&#xff0c;摔的痛不痛&#xff0c;他们只会看你最后站在什么位置&#xff0c;然后羡慕或鄙夷座右…
阅读更多...
微信点餐小程序开发_分享微信点餐小程序可以实现哪些功能

微信点餐小程序开发_分享微信点餐小程序可以实现哪些功能

线下餐饮实体店都开始摸索发展网上订餐服务。最多人选择的是入驻外卖平台&#xff0c;但抽成高&#xff0c;推广还要另买流量等问题&#xff0c;也让不少商家入不敷出。在这种情况下&#xff0c;建立自己的微信订餐小程序&#xff0c;做自己的私域流量是另一种捷径。那么&#…
阅读更多...
Redis关闭持久化

Redis关闭持久化

版本&#xff1a; 7.0.4 一、持久化说明 1、redis默认是开启持久化的 2、默认持久化方式为RDB 二、redis 关闭持久化 关闭 RDB 持久化 1、注释掉原来的持久化规则 # save 3600 1 300 100 60 10000或# save 3600 1 # save 300 100 # save 60 100002、把 save 节点设置为空 s…
阅读更多...
GORM CRUD 5 分钟快速上手

GORM CRUD 5 分钟快速上手

文章目录1.ORM 是什么2.GORM 是什么3.安装4.连接 DB5.创建数据表6.增加&#xff08;Create&#xff09;7.查询&#xff08;Read&#xff09;8.更新&#xff08;Update&#xff09;9.删除&#xff08;Delete&#xff09;10.小结参考文献1.ORM 是什么 ORM&#xff08;Object Rel…
阅读更多...
Linux文件压缩和解压命令【gzip、gunzip、zip、unzip、tar】【详细总结】

Linux文件压缩和解压命令【gzip、gunzip、zip、unzip、tar】【详细总结】

解压和压缩gzip/gunzipgzip 压缩文件gunzip 解压缩文件zip/unzipzip命令语法命令选项实例unzip语法&#xff1a;命令选项实例tar语法实例例一&#xff1a;将文件打包成tar包例二&#xff1a;查阅 tar包内有哪些文件例三&#xff1a;将tar 包解压gzip/gunzip gzip用于解压文件&…
阅读更多...
纵目科技冲刺科创板上市：拟募资20亿元，股东阵容强大

纵目科技冲刺科创板上市：拟募资20亿元，股东阵容强大

11月23日&#xff0c;纵目科技&#xff08;上海&#xff09;股份有限公司&#xff08;下称“纵目科技”&#xff09;在上海证券交易所递交招股书&#xff0c;准备在科创板上市。本次冲刺上市&#xff0c;纵目科技计划募资20亿元&#xff0c;拟用于上海研发中心建设项目、东阳智…
阅读更多...
Redis常用指令汇总

Redis常用指令汇总

文章目录一、5种数据类型二、常用指令汇总三、应用汇总提示&#xff1a;以下是本篇文章正文内容&#xff0c;Redis系列学习将会持续更新 一、5种数据类型 Redis 数据存储格式&#xff1a;  ● redis 自身是一个 Map ,其中所有的数据都是采用 key : value 的形式存储。  ● 数…
阅读更多...
【c++】 继承的相关问题

【c++】 继承的相关问题

继承无论是那种继承方式&#xff0c;基类继承的私有属性都无法访问不论父类中的属性被啥修饰&#xff0c;都会被子类全盘接收public,protected,private继承private 继承和protected 继承都是类中可以访问&#xff0c;类外无法访问&#xff0c;这有什么区别呐&#xff1f;继承的…
阅读更多...
区间信息维护与查询【最近公共祖先LCA 】 - 原理

区间信息维护与查询【最近公共祖先LCA 】 - 原理

区间信息维护与查询【最近公共祖先LCA 】 - 原理 最近公共祖先&#xff08;Lowest Common Ancestors&#xff0c;LCA&#xff09;指有根树中距离两个节点最近的公共祖先。 祖先指从当前节点到树根路径上的所有节点。 u 和v 的公共祖先指一个节点既是u 的祖先&#xff0c;又是…
阅读更多...
React基础之Context

React基础之Context

前文有讲到Vue中的provide透传&#xff0c;祖孙组件之间通信。在react中也有类似的存在&#xff0c;他就是context&#xff0c;context的作用也是让祖孙组件之前通信。 React中&#xff0c;通过createContext方法来创建一个Context对象。 import React, { createContext } fr…
阅读更多...
sqli-labs/Less-51

sqli-labs/Less-51

这一关的欢迎界面依然是以sort作为注入点 我们首先来判断一下是否为数字型注入 输入如下 sortrand() 对尝试几次 发现页面并没有发生变化 说明这道题的注入类型属于字符型 然后尝试输入以下内容 sort1 报错了 报错信息如下 我们从报错信息可以知道这道题的注入类型属于单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023