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

Vue框架学习-Vue本地应用_第1张图片
思路:

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

案例练习:图片切换

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

  1. 定义图片数组
  2. 添加图片索引
  3. 绑定src属性
  4. 图片切换逻辑
  5. 显示状态切换

<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 数组非空)
      Vue框架学习-Vue本地应用_第3张图片

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

视频链接: 链接

你可能感兴趣的:(前端学习,Vue,vue,js,html,javascript,前端)