Vue框架学习-Vue本地应用

程序员文章站 2022-03-10 17:56:02

Vue本地应用前言v-text指令v-html指令v-on指令基础前言本文是Vue框架学习的第二部分-Vue的本地应用。学习资料来源是B站的一个教学视频，我在文末会附上链接。v-text指令作用：设置标签的文本值(textContent)默认写法会替换全部内容，使用差值表达式{{}}可以替换制定的内容内部支持表达式

这里的内容将不显示

{{ mess...

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的时候，将达到边界并给出提示。

Vue框架学习-Vue本地应用
思路：

data中定义数据：比如num
methods中添加两个方法：比如add（递增），sub（递减）
使用v-text将num设置给span标签
使用v-on将add，sub分别绑定给+，-按钮
累加的逻辑：小于10则累加，否则给出提示
递减的逻辑：大于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>

案例练习：图片切换

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

定义图片数组
添加图片索引
绑定src属性
图片切换逻辑
显示状态切换

<!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的本地应用有了很好的了解。

视频链接：链接

本文地址：https://blog.csdn.net/u011708337/article/details/112385584

相关标签：前端学习 Vue js html javascript 前端

上一篇： mysql从一个表中查询插入另一个表，两个表关联再更新其中一个表的操作教程

下一篇：尉迟恭是出于什么原因，为何在玄武门之变时一定要射杀李元吉？

Vue框架学习-Vue本地应用

这里的内容将不显示

{{ mess...

Vue本地应用

前言

内容绑定，事件绑定

v-text指令

v-html指令

v-on指令基础

案例练习：计数器

显示切换，属性绑定

v-show

v-if

v-bind

案例练习：图片切换

列表循环，表元素绑定

v-for

v-on补充

v-model

案例练习：记事本

小结

vue单页应用在页面刷新时保留状态数据的方法

vue-cli中vue本地实现跨域调试接口

详解VUE单页应用骨架屏方案

Vue2.0 UI框架ElementUI使用方法详解

Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之二 || 后端项目搭建

vue学习【一】vue引用封装echarts并展示多个echarts图表

Vue.js 2.0 和 React、Augular等其他前端框架大比拼

如何使用Vuex+Vue.js构建单页应用

详解Vue源码学习之callHook钩子函数

Vue-cli配置打包文件本地使用的教程图解