vue01-Vue概述 ◆ Vue基本使用 ◆ Vue模板语法 ◆ 基础案例 ◆ Vue常用特性 ◆ 综合案例

最新推荐文章于 2022-04-22 10:39:57 发布
最新推荐文章于 2022-04-22 10:39:57 发布
阅读量369 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51353891/article/details/116461908
版权

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、pandas是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.引入库

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

学习目标：
能够说出Vue的基本用法
能够说出Vue的模板语法
能够说出Vue的常用特性
能够说出Vue的实现案例效果
学习内容：
◆Vue概述
◆ Vue基本使用
◆ Vue模板语法
◆ 基础案例
◆ Vue常用特性
◆ 综合案例

1. Vue概述

尤雨溪：Vue.js的创建者
⚫ 2014年2月，Vue.js正式发布
⚫ 2015年10月27日，正式发布1.0.0
⚫ 2016年4月27日，发布2.0的预览版本

Vue：渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
官网：https://cn.vuejs.org/v2/guide/
⚫ 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
⚫ 灵活：在一个库和一套完整框架之间自如伸缩
⚫ 高效：20kB运行大小，超快虚拟 DOM

2.1 传统开发模式对比

2.1 传统开发模式对比

原生JS

<div id="msg"></div>
<script type="text/javascript">
var msg = 'Hello World';
var div = document.getElementById('msg');
div.innerHTML = msg;
</script>

jQuery

<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript">
var msg = 'Hello World';
$('#msg').html(msg);
</script>

Vue 是什么？

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
  • vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

使用Vue将helloworld 渲染到页面上

在这里插入图片描述

2.3 Vue.js之HelloWorld细节分析

1. 实例参数分析
  • el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
  • data：模型数据（值是一个对象）
2. 插值表达式用法{{}}
  • 将数据填充到HTML标签中
  • 插值表达式支持基本的计算操作
3. Vue代码运行原理分析
  • 概述编译过程的概念（Vue语法→原生语法）

3. Vue模板语法

3.1 模板语法概述

1. 如何理解前端渲染？

把数据填充到HTML标签中
在这里插入图片描述

2. 前端渲染方式
  • 原生js拼接字符串
  • 使用前端模板引擎
  • 使用vue特有的模板语法
3. 原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标
签中
缺点：不同开发人员的代码风格差别很大，随着业
务的复杂，后期的维护变得逐渐困难起来

var d = data.weather;
var info = document.getElementById('info');
info.innerHTML = '';
for(var i=0;i<d.length;i++){
var date = d[i].date;
var day = d[i].info.day;
var night = d[i].info.night;
var tag = '';
tag += '<span>日期：'+date+'</sapn><ul>';
tag += '<li>白天天气：'+day[1]+'</li>'
tag += '<li>白天温度：'+day[2]+'</li>'
tag += '<li>白天风向：'+day[3]+'</li>'
tag += '<li>白天风速：'+day[4]+'</li>'
tag += '</ul>';
var div = document.createElement('div');
div.innerHTML = tag;
info.appendChild(div);
}
4. 使用前端模板引擎
  • 模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多， 它拥有自己的一套模板语法规则
    优点：大家都遵循同样的规则写代码，代码可读性
    明显提高了，方便后期的维护。
    缺点：没有专门提供事件机制。
<script id="abc" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
5. 模板语法概览

  • 差值表达式

  • 指令

  • 事件绑定

  • 属性绑定

  • 样式绑定

  • 分支循环结构

3.2 指令

1. 什么是指令？
  • 什么是自定义属性
  • 指令的本质就是自定义属性
  • 指令的格式：以v-开始（比如：v-cloak）
2. v-cloak指令用法
  • 插值表达式存在的问题：“闪动”
  • 如何解决该问题：使用v-cloak指令
  • 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

官网：https://cn.vuejs.org/v2/api/

3.2 指令

3. 数据绑定指令
  • v-text 填充纯文本

① 相比插值表达式更加简洁

  • v-html 填充HTML片段

① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用

  • v-pre 填充原始信息

① 显示原始信息，跳过编译过程（分析编译过程）

4. 数据响应式

如何理解响应式
① html5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
① 数据绑定：将数据填充到标签中
v-once 只编译一次
① 显示内容之后不再具有响应式功能

v-cloak

  • 防止页面加载时出现闪烁问题

     <style type="text/css">
  /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
 */
  [v-cloak]{
    /* 元素隐藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
		 也就是对应的标签会变为可见
    -->
    <div  v-cloak  >{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      //  el   指定元素 id 是 app 的元素  
      el: '#app',
      //  data  里面存储的是数据
      data: {
        msg: 'Hello Vue'
      }
    });
</script>
</body>
</html>

v-text

  • v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-html

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中

  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

  • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

    <div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    
    <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
    
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

v-pre

  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
    <span v-pre>{{ this will not be compiled }}</span>    
	<!--  显示的是{{ this will not be compiled }}  -->
	<span v-pre>{{msg}}</span>  
     <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-once

  • 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
  <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
     <span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
</script>

3.3 双向数据绑定指令

  • 当数据发生变化的时候，视图也就发生变化
  • 当视图发生变化的时候，数据也会跟着同步变化
    在这里插入图片描述
v-model
  • v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用
 <div id="app">
      <div>{{msg}}</div>
      <div>
          当输入框中内容改变的时候，  页面上的msg  会自动更新
        <input type="text" v-model='msg'>
      </div>
  </div>

mvvm

  • MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
  • m model
    • 数据层 Vue 中 数据层 都放在 data 里面
  • v view 视图
    • Vue 中 view 即 我们的HTML页面
  • vm （view-model） 控制器 将数据和视图层建立联系
    • vm 即 Vue 的实例 就是 vm

3.4 v-on事件绑定

1. Vue如何处理事件？
  • v-on指令用法
<input type=‘button' v-on:click='num++'/>
  • v-on简写形式
<input type=‘button' @click='num++'/>
2. 事件函数的调用方式
  • 直接绑定函数名称
<button v-on:click='say'>Hello</button>
  • 调用函数
<button v-on:click='say()'>Say hi</button>

在这里插入图片描述

3. 事件函数参数传递
  • 普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>

3.4 事件绑定

v-on事件函数中传入参数


<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
4. 事件修饰符
  • .stop 阻止冒泡
 <a v-on:click.stop="handle">跳转</a>
  • .prevent 阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
  • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
  • Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
  • 修饰符是由点开头的指令后缀来表示的
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
5. 按键修饰符
  • .enter 回车键
<input v-on:keyup.enter='submit'>
  • .esc 退出键
<input v-on:keyup.delete='handle'>
  • 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

常用的按键修饰符
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右

<script>
	var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){},
              alertMe:function(){},
        }
    })

</script>
6. 自定义按键修饰符
  • 全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
  • 在Vue中可以通过config.keyCodes自定义按键修饰符别名
<div id="app">
    预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
	
    Vue.config.keyCodes.f5 = 116;

    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
</script>

简单计算器

在这里插入图片描述

 <div id="app">
        <h1>简单计算器</h1>
        <div>
            <span>数值A:</span>
            <span>
        <input type="text" v-model='a'>
      </span>
        </div>
        <div>
            <span>数值B:</span>
            <span>
        <input type="text" v-model='b'>
      </span>
        </div>
        <div>
            <button v-on:click='handle'>计算</button>
        </div>
        <div>
            <span>计算结果:</span>
            <span v-text='result'></span>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              简单计算器案例 
            */
        var vm = new Vue({
            el: '#app',
            data: {
                a: '',
                b: '',
                result: ''
            },
            methods: {
                handle: function() {
                    // 实现计算逻辑
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
            }
        });
    </script>

3.5 属性绑定

1. Vue如何动态处理属性？
v-bind

v-bind 指令被用来响应地更新 HTML 属性

  • v-bind:href 可以缩写为 :href;
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

  <div id="app">
        <a v-bind:href="url">百度</a>
        <a :href="url">百度1</a>
        <button @click="handle">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'http://www.baidu.com'
            },
            methods: {
                handle: function() {
                    this.url = 'http://qq.com'
                }
            }
        })
    </script>
v-model的低层实现原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value">

样式绑定

绑定对象class
  • 我们可以给v-bind:class 一个对象，以动态地切换class。
<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。
绑定的数据对象不必内联定义在模板里：

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
绑定数组

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>


data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>
calss绑定的三个细节用法
 <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
    .test {
      color: blue;
    }
    .base {
      font-size: 28px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
    <div v-bind:class='arrClasses'></div>
    <div v-bind:class='objClasses'></div>
    <div class="base" v-bind:class='objClasses'></div>

    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定相关语法细节：
      1、对象绑定和数组绑定可以结合使用
      2、class绑定的值可以简化操作
      3、默认的class如何处理？默认的class会保留
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error',
        isTest: true,
        arrClasses: ['active','error'],
        objClasses: {
          active: true,
          error: true
        }
      },
      methods: {
        handle: function(){
          // this.isTest = false;
          this.objClasses.error = false;
        }
      }
    });
  </script>
</body>
绑定对象和绑定数组 的区别
  • 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
  • 绑定数组的时候数组里面存的是data 中的数据
绑定style
 <div v-bind:style="styleObject">绑定样式对象</div>'
 
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>

<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>


<script>
	new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        }，
        activeColor: 'green',
   		fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>

分支循环结构

  • v-if
  • v-else
  • v-else-if
  • v-show
v-if 使用场景
  • 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
  • 2- 进行两个视图之间的切换
<div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比较差</div>
    <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构

      v-show的原理：控制元素样式是否显示 display:none
    */
    var vm = new Vue({
      el: '#app',
      data: {
        score: 10,
        flag: false
      },
      methods: {
        handle: function(){
          this.flag = !this.flag;
        }
      }
    });
  </script>
v-show 和 v-if的区别
  • v-show本质就是标签display设置为none，控制隐藏
    • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
  • v-if是动态的向DOM树内添加或者删除DOM元素
    • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

循环结构

v-for遍历数组

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in list 形式的特殊语法，其中 list 是源数据数组，而 item 则是被迭代的数组元素的别名。

<li v-for='item in list'>{{item}}</li>

<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

key的作用：帮助Vue区分不同的元素，从而提高性能

<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
  • 不推荐同时使用 v-if 和 v-for
  • 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
   <!--  循环结构-遍历对象
		v 代表   对象的value
		k  代表对象的 键 
		i  代表索引	
	---> 
     <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
    obj: {
        uname: 'zhangsan',
        age: 13,
        gender: 'female'
    }
  }
})
</script>

v-for遍历对象

<div v-for='(value, key, index) in object'></div>

你也可以用 v-for 来遍历一个对象的 property。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：

在这里插入图片描述
你也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

结果
在这里插入图片描述
还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

在这里插入图片描述

  • key 的作用
    • key来给每个节点做一个唯一标识
    • key的作用主要是为了高效的更新虚拟DOM
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

案例选项卡

1、 HTML 结构
`
    <div id="app">
        <div class="tab">
            <!--  tab栏  -->
            <ul>
                <li class="active">apple</li>
                <li class="">orange</li>
                <li class="">lemon</li>
            </ul>
              <!--  对应显示的图片 -->
            <div class="current"><img src="img/apple.png"></div>
            <div class=""><img src="img/orange.png"></div>
            <div class=""><img src="img/lemon.png"></div>
        </div>
    </div>


`
2、 提供的数据
         list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
3、 把数据渲染到页面

  • 把tab栏 中的数替换到页面上

    • 把 data 中 title 利用 v-for 循环渲染到页面上
    • 把 data 中 path利用 v-for 循环渲染到页面上
        <div id="app">
        <div class="tab">  
            <ul>
                  <!--  
                    1、绑定key的作用 提高Vue的性能 
                    2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，
						index 也是唯一的 
                    3、 item 是 数组中对应的每一项  
                    4、 index 是 每一项的 索引
                -->
                   <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
              </ul>
              <div  :key='item.id' v-for='(item, index) in list'>
                    <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
                    <img :src="item.path">
              </div>
        </div>
    </div>
<script>
    new  Vue({
        //  指定 操作元素 是 id 为app 的 
        el: '#app',
            data: {
                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            }
    })

</script>
4、 给每一个tab栏添加事件,并让选中的高亮

  • 4.1 、让默认的第一项tab栏高亮

    • tab栏高亮 通过添加类名active 来实现 （CSS active 的样式已经提前写好）
      • 在data 中定义一个 默认的 索引 currentIndex 为 0
      • 给第一个li 添加 active 的类名
        • 通过动态绑定class 来实现 第一个li 的索引为 0 和 currentIndex 的值刚好相等
        • currentIndex === index 如果相等 则添加类名 active 否则 添加 空类名

  • 4.2 、让默认的第一项tab栏对应的div 显示

    • 实现思路 和 第一个 tab 实现思路一样 只不过 这里控制第一个div 显示的类名是 current
      <ul>
	   <!-- 动态绑定class   有 active   类名高亮  无 active   不高亮-->
       <li  :class='currentIndex==index?"active":""'
           :key='item.id' v-for='(item,index) in list'
           >{{item.title}}</li>
  </ul>
	<!-- 动态绑定class   有 current  类名显示  无 current  隐藏-->
  <div :class='currentIndex==index?"current":""' 
       
       :key='item.id' v-for='(item, index) in list'>
        <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
        <img :src="item.path">
  </div>

<script>
    new  Vue({
        el: '#app',
            data: {
                currentIndex: 0, // 选项卡当前的索引  默认为 0  
                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            }
    })

</script>

  • 4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮

    • 给每一个li添加点击事件

    • 让当前的索引 index 和 当前 currentIndex 的 值 进项比较

    • 如果相等 则当前li 添加active 类名 当前的 li 高亮 当前对应索引的 div 添加 current 当前div 显示 其他隐藏

          <div id="app">
        <div class="tab">
            <ul>
                <!--  通过v-on 添加点击事件   需要把当前li 的索引传过去 
				-->
                <li v-on:click='change(index)'		           			
                    :class='currentIndex==index?"active":""'                   
                    :key='item.id' 
                    v-for='(item,index) in list'>{{item.title}}</li>
            </ul>
            <div :class='currentIndex==index?"current":""' 
                 :key='item.id' v-for='(item, index) in list'>
                <img :src="item.path">
            </div>
        </div>
    </div>

<script>
    new  Vue({
        el: '#app',
            data: {
                currentIndex: 0, // 选项卡当前的索引  默认为 0  
                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            },
            methods: {
                change: function(index) {
                    // 通过传入过来的索引来让当前的  currentIndex  和点击的index 值 相等 
                    //  从而实现 控制类名    
                    this.currentIndex = index;
                }
            }
    
    })

</script>
W蘭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
pandas显示全部数据内容_vue项目，当鼠标移入时文本长度超出才显示全部内容
weixin_39603397的博客
12-20 188
这是一个UI优化的需求~需求说明需要实现的效果呢，就是下图这个样子(截图的时候光标就会消失，只好拍照咯~)。鼠标滑入显示全部文字内容，就是在文本上加个title属性，而且这是个数组循环出来的列表，这就导致了列表的所有文本在鼠标滑入时都会显示文字。我们这里的优化需求是，文本内容很长的时候(至少都出现了省略号了嘛)，鼠标滑入才显示全部文字内容。解决方案dom结构改造解决思路先要明确，在文本标...
vue.js 拷贝数组和对象_Pandas和Numpy的视图和拷贝
weixin_39855944的博客
12-04 190
编译：老齐与本文相关的图书推荐：《跟老齐学Python：数据分析》本书主要介绍Numpy、Pandas和数据可视化的有关知识，并且用实际案例贯穿于全书始终。本书适合于数据科学、机器学习、人工智能等方向的初学者。在Numpy和Pandas中，有两个重要概念，容易混淆，一个是浅拷贝，也称为视图，另外一个是深拷贝，或者就称为拷贝。如果操作不当，Pandas会爆出SettingWithCopyW...
数据可视化项目-岗位分析-vue-python实现
TOPthemaster的博客
12-28 2028
数据可视化项目-vue-python概述一、数据简介二、项目简介1.python后端：2.vue前端三、效果展示总结 概述 本文主要用以介绍我和室友所做的可视化项目，功能是通过对几十万条岗位数据进行分析，并可视化出来，得到岗位发展趋势等信息，它包含了vue前端渲染、python后端数据处理以及数据爬取，整体项目已开源至gitee上，由于源数据太多，未能一起放在gitee仓库上，资源上传至csdn，如需使用请自行下载组合。（本文仅用于个人学习总结） 一、数据简介 课题提供的基础数据样本如上图所示， 某招聘
PHP：ThinkPHP5.0视图View模板语法
彭世瑜的博客
03-16 4468
1、模板路径 控制器地址 app/index/controller/Index 传参示例 说明 获取模板路径 view() 默认模板的地址 app/index/view/index/index.html view(‘upload’) 修改文件 app/index/view/index/upload.html view(‘public/upload’) 修改目录 app/i...
Flask视图函数与模板语法
a315612852的博客
11-12 315
1.Django中的CBV模式 ​ 2.Flask中的CBV和FBV defauth(func): definner(*args,**kwargs): result=func(*args,**kwargs) returnresult returninner classIndexView(views....
Vue v-for computed 生命周期和模板引用 语法示例演示代码
07-17
Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 ...
vue3-admin-master-后台管理平台模板.zip
05-17
基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台模板库.建议使用 cnpm，因为 yarn ...cd vue-next-admin # 安装依赖 cnpm install # 运行项目 cnpm run dev # 打包发布 cnpm run build
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
11-27
在本文中，我们将深入探讨如何使用Vue官方提供的脚手架工具`vue-cli`来搭建一个基本的`HelloWorld`案例。首先，确保你已经安装了`Node.js`并配置好环境变量，因为`vue-cli`依赖于`Node.js`运行。安装`Node.js`后，...
vue3-real-admin纯静态后台模板
08-04
vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台...
(某马培训)Vue-基础语法.ppt
最新发布
07-23
Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础...
Vue 全套教程（一），入门 Vue 必知必会
热门推荐
立志成为一个前端、后端、测试全方位发展的程序员
04-13 3万+
Vue 全套教程的第一部分，这部分主要介绍了Vue的概念，基本指令、事件操作、MVVM模型、数据代理、计算属性等内容
01Vue基本使用与模板语法
攻城老湿的博客
01-31 83
Vue基本使用与模板语法 一. 基本使用 Hello World快速入门 说明： 1.实例参数 el:元素挂载的位置 data:模型数据 2.插值表达式的用法 {{ }} 将数据填充到html标签中 插值表达式支持基本的计算操作 3.Vue运行原理 Vue语法----Vue框架---->原生js语法 <!DOCTYPE html> ...
Vue基础知识总结 2：vue 动态绑定
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
视图的基本语法
uEven的博客
04-22 642
#视图 /* 1、视图的理解 ① 视图，可以看做是一个虚拟表，本身不存储数据。 视图的本质，就可以看做是存储起来的SELECT语句 ② 视图中SELECT语句涉及到的表，称为基表 ③ 针对视图做DML操作，会影响到对应基表中的数据，反之亦然 ④视图本身的删除，不会导致基表中的数据的删除 ⑤ 视图的应用场景：针对与小型项目，不推荐使用视图。针对大型项目，可以考虑使用视图。 ⑥ 视图的优点：简化查询；控制数据的访问 */ #如何创建视图 #准备工作 CREATE DATABASE dbtest14; USE
vue html 属性绑定,Vue 2 | Part 4 v-bind绑定元素属性和样式
Aysen的博客
06-08 300
这期跟大家分享的，是v-bind指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。绑定属性最简单的例子，我们有一张图片，需要定义图片的src。我们可以直接在元素的属性里面定义： var app = new Vue({el: '#app'});但是在实际工作中，我们通常会遇到的情况是，图片地址是从数据里返回的，这个时候v-bind指令就派上了用场。当然，我们可以同时...
四.模板的调用及模板语法
weixin_45410351的博客
11-14 679
一.模板调用 1.第一种 2.第二种 3.第三种 二.模板语法 1.变量的使用 在模板中，如果想要使用后端传入的数据，就要用到模板语法去实现。 django提供的模板语法：变量的使用，控制语句，循环 django模板html文件中使用变量 语法： {{ }} 使用locals（）方法，作用是将当前视图函数的所有局部变量返回 2.控制语句 if else elif 模板中使用控制语句，...
前端学习之VUE基础二:Vue常用特性(表单操作, 自定义指令,计算属性, 过滤器,侦听器,生命周期)
浅弋、璃鱼的博客
05-24 732
文章目录一、Vue常用特性：1. 表单操作：1.1 基于Vue的表单操作:1.2 数据绑定:1.3 表单域修饰符:2. 自定义指令：2.1 Vue.directive 注册全局指令:2.2 Vue.directive 注册全局指令 带参数:2.3 自定义指令-局部指令:3. 计算属性：3.1 语法:2.3 示例:3.3 计算属性与方法的区别:4. 过滤器：4.1 什么是过滤器:4.2 自定义过滤器:4.3 过滤器的使用:4.4 局部过滤器:4.5 过滤器传参:5. 侦听器:5.1 什么是侦听器5.2 侦听器
01 Vue基础
lisa2017_的博客
03-18 179
01 Vue基础 一、什么是 Vue 1.简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框 架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方 库（如： vue-router ， vue-resource ， vuex ）或既有项目整合。 2.MVVM 模式的实现者——双向数据绑定模式 MVC： M：model V：view C：Controller MV
02.Vue3.x绑定数据、绑定html、绑定属性、循环数据
05-12 1458
1.定义数据绑定数据 使用{{}}方式绑定data里面的数据 <!--App.vue--> <template> <div> <h1>{{msg}}</h1> <p>{{userInfo.username}}----{{use<p v-html="html"></p> </div> </template> <script> export defa
Vue基础教程：Day02 模板语法与v-for的key属性解析
"Vue基础知识，包括模板语法的插值操作，如v-html、v-text、v-pre和v-cloak的使用，以及v-for中key属性的重要性和作用。" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Day02的Vue基础知识中，主要...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值