Vue框架学习-Vue本地应用
Vue本地应用
- 前言
- 内容绑定，事件绑定
-
- v-text指令
- v-html指令
- v-on指令基础
- 案例练习：计数器
- 显示切换，属性绑定
-
- v-show
- v-if
- v-bind
- 案例练习：图片切换
- 列表循环，表元素绑定
-
- v-for
- v-on补充
- v-model
- 案例练习：记事本
- 小结
前言
本文是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的时候，将达到边界并给出提示。
思路：
- data中定义数据：比如num
- methods中添加两个方法：比如add（递增），sub（递减）
- 使用v-text将num设置给span标签
- 使用v-on将add，sub分别绑定给+，-按钮
- 累加的逻辑：小于10则累加，否则给出提示
- 递减的逻辑：大于0则递减，否则给出提示
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
案例练习：图片切换
目标：页面中间显示一张图片，有左右箭头可以切换图片，左右到达图片列表边界的时候，按钮会消失。
思路：
- 定义图片数组
- 添加图片索引
- 绑定src属性
- 图片切换逻辑
- 显示状态切换
<html lang="en">
<head>
<meta charset="UTF-8">
<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" 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 数组非空）
- 没有元素时，隐藏元素（v-show v-if 数组非空）
<html lang="en">
<head>
<meta charset="UTF-8">
<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的本地应用有了很好的了解。
视频链接： 链接