Vue框架学习-Vue本地应用

最新推荐文章于 2022-03-31 23:07:58 发布
最新推荐文章于 2022-03-31 23:07:58 发布
阅读量265 收藏 1
点赞数 1
分类专栏： 前端学习 Vue 文章标签： vue js html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011708337/article/details/112385584
版权

Vue本地应用

前言

本文是Vue框架学习的第二部分-Vue的本地应用，从“内容绑定，事件绑定”，“显示切换，属性绑定”，“列表循环，表元素绑定”三个方面学习v-text，v-html，v-on，v-show，v-if，v-bind，v-for，v-model这些指令。
学习资料来源是B站的一个教学视频，我在文末会附上链接。

内容绑定，事件绑定

v-text指令

  • 作用：设置标签的文本值(textContent)
  • 默认写法会替换全部内容，使用差值表达式{{}}可以替换制定的内容
  • 内部支持表达式
<div id="app">
	<h2 v-text="message">这里的内容将不显示</h2>
	<h2>{{ message }} 这里的内容可以显示</h2>
</div>

v-html指令

  • 作用：设置标签的innerHTML
  • 内容如果有html结构会被解析为标签，如果不是html结构则直接显示文本
  • v-text指令无论内容是什么，只会解析为文本

v-on指令基础

  • 作用：为元素绑定事件
  • 事件名不要写on
  • 指令可以简写为@
<div id="app">
	<input type="button" value="事件绑定" v-on:click="doIt"></input>
	<input type="button" value="事件绑定" v-on:mouseenter="doIt"></input>
	<input type="button" value="事件绑定" v-on:dblclick="doIt"></input>
    <input type="button" value="事件绑定" @dblclick="doIt"></input>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			message: "123"
		}
        methods:{
            doIt:function(){
            	// 逻辑
            	alert(this.message); // 可以用this访问内部数据
            }
        }
	})
</script>

案例练习：计数器

建议的一个计数器，左右的加减号可以改变中间的数字大小，当数字到0或者10的时候，将达到边界并给出提示。

计数器
思路：

  1. data中定义数据：比如num
  2. methods中添加两个方法：比如add（递增），sub（递减）
  3. 使用v-text将num设置给span标签
  4. 使用v-on将add，sub分别绑定给+，-按钮
  5. 累加的逻辑：小于10则累加，否则给出提示
  6. 递减的逻辑：大于0则递减，否则给出提示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计数器</title>
    <link rel="stylesheet" href="./css/counter.css" />
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <!-- 计数器功能区域 -->
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>
                {{ num }}
            </span>
            <button @click="add">
                +
            </button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data:{
                num : 1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++;
                    }
                    else{
                        alert("已到达最大边界");
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }
                    else{
                        alert("已到达最小边界");
                    }
                }
            }
        })
    </script>
</body>

</html>

这个案例难度不大，主要是用来熟悉事件绑定以及el挂载的元素的获取，以及表达式的书写。
知识点复习：

  • 创建Vue实例时:el(挂载点)，data(数据)，methods(方法)
  • v-on指令的作用是事件绑定，简写为@
  • 方法中通过this，关键字获取data中的数据
  • v-text指令的作用：设置元素的文本值，简写为{{}}

显示切换，属性绑定

v-show

  • 作用：根据表达式的真假，切换元素的显示和隐藏
  • 原理是修改元素的display，实现显示隐藏
  • 指令后面的内容最终都会解析成布尔值，可以直接用布尔值，也可以是变量，也可以是表达式。
  • 值为true元素显示，值为false元素隐藏
  • 数据改变之后，对应元素的显示状态会同步更新
<div id="app">
	<h2 v-show="true">{{ message }}</h2>
	<h2 v-show="isShow">{{ message }}</h2>
	<h2 v-show="age>18">{{ message }}</h2>
</div>

v-if

  • 作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  • 频繁切换建议使用v-show，否则可以使用v-if，因为前者的切换消耗小

v-bind

  • 作用：为元素绑定属性（比如：src，title，class）
  • 完整写法是v-bind:属性名
  • 简写的话可以只保留 :属性名
  • 需要动态增删的class建议使用对象的方式
<div id="app">
	<img v-bind:src="imgSrc">
	<img v-bind:title="imgtitle">
	<img v-bind:class="{active:isActive}">
</div>

案例练习：图片切换

目标：页面中间显示一张图片，有左右箭头可以切换图片，左右到达图片列表边界的时候，按钮会消失。
图片切换
思路：

  1. 定义图片数组
  2. 添加图片索引
  3. 绑定src属性
  4. 图片切换逻辑
  5. 显示状态切换
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
    <link rel="stylesheet" href="./css/pic.css" />
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <div class="center">
            <h2 class="title">
                图片
            </h2>
            <!-- 图片 -->
            <img :src="imgArr[index]" alt="" />
            <!-- 左箭头 -->
            <a href="javascript:void(0)" @click="prev" v-show="index>0" class="left">
                <img src="./img/piclist/prev.jpg" alt="" />
            </a>
            <!-- 右箭头 -->
            <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right">
                <img src="./img/piclist/next.jpg" alt="" />
            </a>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data:{
                imgArr: [
                    "./img/piclist/00.jpg",
                    "./img/piclist/01.jpg",
                    "./img/piclist/02.jpg",
                    "./img/piclist/03.jpg",
                    "./img/piclist/04.jpg",
                    "./img/piclist/05.jpg",
                ],
                index: 0
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>
</body>

</html>

小结：

  • 列表数据使用数组保存
  • v-bind指令可以设置元素属性，比如src
  • v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

列表循环，表元素绑定

v-for

  • 作用：根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是(item,index) in 数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
<div id="app">
	<ul>
		<li v-for="item in arr">
			{{ item }}
		</li>
		<li v-for="item in objArr">
			{{ item.name }}
		</li>
		<li v-for="(item,index) in arr">
			{{ index }} {{ item }}
		</li>
	</ul>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			arr:[1,2,3,4,5],
			objArr:[{
				{name:"1"},
				{name:"2"},
			}]
		}
	})
</script>

v-on补充

  • 作用：传递自定义参数，事件修饰符
  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件的后面跟上 .修饰符 可以对事件进行限制
  • .enter 可以限制触发的按键为回车
  • 事件修饰符有多种
<div id="app">
	<input type="button" value="事件绑定" v-on:click="doIt"></input>
	<input type="button" value="事件绑定" v-on:click="doIt1(p1)"></input>
	<input type="button" value="事件绑定" v-on:click="doIt2(p1,p2)"></input>
	<input type="text" @keyup.enter="sayHi"> <!-- 回车触发事件 -->
</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			message: "123"
		}
        methods:{
            sayHi:function(){
            	// 逻辑
            	alert("Hi"); 
            }
            doIt:function(){
            	// 逻辑
            	alert(this.message); // 可以用this访问内部数据
            }
            doIt1:function(p1){
            	// 逻辑
            	alert(p1); 
            }
            doIt2:function(p1,p2){
            	// 逻辑
            	alert(p1); 
            	alert(p2); 
            }
        }
	})
</script>

v-model

  • 作用：便捷的获取和设置表单元素的值(双向数据绑定)
  • 绑定的数据会和表单元素值相关联
  • 绑定的数据与表单元素的值双向绑定
<div id="app">
	<input type="text" v-model="message" />
</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			message:"12345"
		}
	})
</script>

案例练习：记事本

功能：

  • 新增
    • 生成列表结构（v-for 数组）
    • 获取用户输入（v-model）
    • 回车，新增数据（v-on .enter 添加数据）
  • 删除
    • 点击删除指定内容（v-on splice 索引）
  • 统计
    • 统计信息个数（v-text length）
  • 清空
    • 点击清除所有信息（v-on）
  • 隐藏
    • 没有元素时，隐藏元素（v-show v-if 数组非空）
      记事本
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小黑记事本</title>
    <link rel="stylesheet" type="text/css" href="./css/notepad.css"/>
</head>
<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>小黑记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" />
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">
                            {{ index + 1 }}.
                        </span>
                        <label>
                            {{ item }}
                        </label>
                        <button class="destroy" @click="remove(index)"></button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer">
            <span class="todo-count" v-if="list.length!=0"><strong> {{ list.length }} </strong> items left </span>
            <button class="clear-complete" @click="clear" v-show="list.length!=0">
                Clear
            </button>
        </footer>
    </section>
    <!-- 底部 -->
    <section class="info">
    </section>
    <script>
        var app = new Vue({
            el: '#todoapp',
            data:{
                list:["写码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods:{
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list = [];
                }
            }
        })
    </script>
</body>

</html>

小结：

  • 列表结构可以通过v-for指令结合数据生成
  • v-on结合事件修饰符可以对事件进行限制，比如.enter
  • v-on在绑定事件时可以传递自定义参数
  • 通过v-model可以快速的设置和获取表单元素的值
  • 基于数据的开发方式

小结

学习完本文，你应该对Vue的本地应用有了很好的了解。

视频链接： 链接

极客不撩妹
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue-frontend-quickstart:Vue网站的入门模板-无节点
03-16
Vue前端快速入门 Vue网站的入门模板-无节点 预览 在线演示 使用这个专案 如何设定： 使用上方的模板按钮将此... Vue与React类似，但是包括我在内的许多人都认为Vue更易于学习和使用。 请参阅我的页面，以了解有关V
前端学习笔记-黑马程序员Vue
01-09
Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js 特点 1. 初始 Vue：Vue.js 的...
Vue----Vue本地应用(结尾篇)
程序小白的博客
03-31 226
Vue----Vue本地应用(3)
本地运行 vue 框架项目
weixin_44006731的博客
11-26 657
本地运行 vue 框架项目 1.git上拉取项目，项目列表： 2.下载安装node.js npm 的一些缓存和全局安装的包，默认都会在C盘存储，这个对于C盘的宝贵空间来说，实在是不能忍啊，使用下面命令改变npm默认的缓存位置： (1)在CMD命令行中执行： //1.改变npm 全局安装位置 npm config set prefix "你的磁盘路径" //这里是我的路径 npm config s...
Vue本地应用
qq_37708081的博客
02-12 294
从本地引用VUE
PanDa____的博客
02-21 812
1.切换目录 2.创建文件夹 3.初始化项目 执行命令npm init -y 路径选错了应该是E:\VueSpace\vue_two>npm init -y ，领会精神 执行结果： 文件夹里会写入这么一个文件 4.通过npm安装vue 执行命令npm i vue 执行结果 5.需要引用的vue.js位置如图 ...
Vue基础 （Vue的本地应用）
m0_57002951的博客
12-28 839
【1】学习路线： 1、内容绑定，事件绑定 2、显示切换，属性绑定 3、列表循环，表单元素绑定
Web前端框架应用：第7章 Vue开发环境-环境变量及模式.pptx
06-07
学习目标 目录 目录 知识架构 7.1 Vue CLI脚手架工具 知识架构 7.2 插件 知识架构 7.3 CLI服务和配置文件 知识架构 7.4 环境变量和模式 知识架构 7.5 静态资源管理 7.4 环境变量和模式 环境变量 在一个项目的开发...
vue使用vue-cli快速创建工程
08-29
Vue CLI，全称为 Vue.js Command Line Interface，是Vue.js官方提供的一个强大脚手架工具，用于快速搭建...通过学习和熟练掌握Vue CLI的使用，开发者能够更好地利用Vue.js框架进行项目开发，提升开发体验和工作效率。
vue-Impression--notes:vue全家桶+localStorage 实现一个简易的印象笔记
05-12
以前学习vue的时候都是写一些小的展示性的demo,没有太强的交互效果。于是我就利用业余时间仔细的研究了印象笔记的数据处理以及交互细节。然后用自己的理解结合Vue框架逐步实现。实现了:新建笔记，删除笔记，添加标签...
vue的使用（引用/创建vue项目）（一）
weixin_38797742的博客
02-28 1531
在程序开发中，有三种方式创建vue项目，本地引入vuejs、使用cdn引入vuejs、使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用，大大方便了开发步骤，使用广泛。 一、vue本地引用 在官网下载vue.js，通过script标签引入。 开发版本：https://vuejs.org/js/vue.js 包含完整的警告和调试模式 生产版本：https://vuejs.org/js/vue.min.js 删除了警告，30.90KB min+gzip 注意：在开发环境下不要
Vue学习-本地应用 基本属性
qq_44143906的博客
11-11 680
一、vue简介： 1.是JavaScript框架，需要遵守规则才能使用 2.简化DOM操作 3.响应式数据驱动 二、vue属性 1.el：挂载点：设置Vue实例挂载（管理）的元素 （1）el命中的元素范围内都是作用范围，可以嵌套其他双标签（最好不要挂在body、HTML标签上，尽量使用div） （2）可以用类选择器、标签选择器，但一般使用id选择器 2.data属性 <div id="app"> {{message}} <h2>{{school.nam
还不会正则表达式？看这篇！
全栈前端精选
07-30 351
由于微信外链限制，推荐阅读等链接无法点击，可点击阅读原文跳转至原文，查看外链。作者：MudOnTiregithub 地址：https://github.com/MudOn...
Vue之for循环
热门推荐
chaofei_liang的博客
09-24 2万+
Vue中for循环的用法总结如下： 1.基本用法 v-for window.onload=function(){ new Vue({ el:'#box', data:{
vue v-for循环内的数据按钮点击增减className
ma_hao99的博客
06-20 598
<template> <div> <ul> <li v-for="(item, index) in cureList" :key="item.id"> <div class="special-cure" @click="toggleActive(index)" :class="{ active: item.isActive }"> .
执行递增1或递减1
cy的博客
07-10 630
用于数字类型，将值进行 累加 或者 累减 $count = 1, 就是加一 。 $count = 1-, 就是减一 。 $effect = Model::updateAllCounters( ['count' => $count], ['id' => $id] ); Mongodb Active Record 更新 - 累加：User::updateAll(['co...
for循环 从10到0 做递减，打印出数组内容
weixin_30265103的博客
06-21 1033
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>for循环</title> 6 </head> 7 <body> 8 9 &lt...
一个for循环根据条件可以递增或递减
dazhi5407的博客
09-27 1416
RT: for (int k = n-1; k >=0;k--){int x = 0;if (r.Order == 1){x = n - k - 1;}else{x = k;}//DataRow r1 = table1.Rows[k];DataRow r1 = table1.Rows[x];//dosomething} 转载于:https://www.cnblogs...
vue循环 点击加减
Web_Notes的博客
10-09 620
循环如何加减 html代码 <div class="operate-w"> //:data-meal="index" index为循环的index <img src="~/images/ordersys/icon_reduce.png" class="reduce" :data-meal="index" v-on:click.stop="numberReduce($event)" /> <span class="number">{{item.number}}&
Tedu的Vue框架的课件
最新发布
02-06
"Tedu的Vue框架课件涵盖了Vue...这些内容构成了Vue框架的基础，为开发者提供了一个强大的工具，帮助他们构建响应式和交互式的Web应用程序。通过深入学习和实践，开发者可以充分利用Vue的特性，提高开发效率和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客不撩妹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值