【16】Vue：01-指令、v-cloak、v-text、v-html、v-pre、v-once、双向数据绑定、v-model、mvvm、v-on、事件修饰符、按键修饰符、v-bind_综合

文章目录

day01
- - Vue 是什么？
  - 使用Vue将helloworld 渲染到页面上
  - 指令
  - v-cloak
  - v-text
  - v-html
  - v-pre
  - v-once
  - 双向数据绑定
  - - v-model
  - mvvm
  - v-on
  - v-on事件函数中传入参数
  - 事件修饰符
  - 按键修饰符
  - 自定义按键修饰符别名
  - 简单计算器案例
  - v-bind
  - - 绑定对象
    - 绑定class
    - 绑定对象和绑定数组的区别
    - 绑定style
  - 分支结构
  - - v-if 使用场景
    - v-show 和 v-if的区别
  - 循环结构
  - - v-for
  - 案例选项卡
  - - 1、 HTML 结构
    - 2、提供的数据
    - 3、把数据渲染到页面
    - 4、给每一个tab栏添加事件,并让选中的高亮
- 每日作业-Vue第01天
- - tab栏切换增强版
  - - 题目描述
    - 训练目标
    - 训练提示
    - 操作步骤
    - 完整代码

day01

Vue 是什么？

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

使用Vue将helloworld 渲染到页面上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><div id="app"><div>{
   {msg}}</div><div>{
   {1 + 2}}</div><div>{
   {msg + '----' + 123}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*Vue的基本使用步骤1、需要提供标签用于填充数据2、引入vue.js库文件3、可以使用vue的语法做功能了4、把vue提供的数据填充到标签里面*/var vm = new Vue({
     el: '#app',data: {
     msg: 'Hello Vue'}});</script>
</body></html>

指令

本质就是自定义属性
Vue中指定都是以 v- 开头

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>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div>{
   {msg}}</div><div v-text='msg'></div><div v-html='msg1'></div><div v-pre>{
   {msg}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题3、v-pre用于显示原始信息*/var vm = new Vue({
     el: '#app',data: {
     msg: 'Hello Vue',msg1: '<h1>HTML</h1>'}});</script>
</body>
</html>

v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

  <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js --><span v-once>{
   { msg}}</span>    
<script>new Vue({
     el: '#app',data: {
     msg: 'Hello Vue.js'}}); </script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div>{
   {msg}}</div><div v-once>{
   {info}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。*/var vm = new Vue({
     el: '#app',data: {
     msg: 'Hello Vue',info: 'nihao'}});</script>
</body>
</html>

双向数据绑定

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

v-model

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用

 <div id="app"><div>{
   {msg}}</div><div>当输入框中内容改变的时候，  页面上的msg  会自动更新<input type="text" v-model='msg'></div></div>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div>{
   {msg}}</div><div><input type="text" v-model='msg'></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*双向数据绑定1、从页面到数据2、从数据到页面*/var vm = new Vue({
     el: '#app',data: {
     msg: 'Hello Vue'}});</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div>{
   {msg}}</div><input type="text" v-bind:value="msg" v-on:input='handle'><input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'><input type="text" v-model='msg'></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*v-model指令的本质*/var vm = new Vue({
     el: '#app',data: {
     msg: 'hello'},methods: {
     handle: function(event){
     // 使用输入域中的最新的数据覆盖原来的数据this.msg = event.target.value;}}});</script>
</body>
</html>

mvvm

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

v-on

用来绑定事件的
形式如：v-on:click 缩写为 @click;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><div id="app"><div>{
   {num}}</div><div><button v-on:click='num++'>点击</button><button @click='num++'>点击1</button><button @click='handle'>点击2</button><button @click='handle()'>点击3</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 中 主要是定义一些函数methods: {
     handle: function() {
     // 这里的this是Vue的实例对象+console.log(this === vm)// 在函数中 想要使用data里面的数据 一定要加this this.num++;}}});</script></body></html>

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>

事件修饰符

在事件处理程序中调用 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 只会阻止对元素自身的点击。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div>{
   {num}}</div><div v-on:click='handle0'><button v-on:click.stop='handle1'>点击1</button></div><div><a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a></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: {
     handle0: function(){
     this.num++;},handle1: function(event){
     // 阻止冒泡// event.stopPropagation();},handle2: function(event){
     // 阻止默认行为// event.preventDefault();}}});</script>
</body>
</html>

按键修饰符

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。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>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><form action=""><div>用户名：<input type="text" v-on:keyup.delete='clearContent' v-model='uname'></div><div>密码：<input type="text" v-on:keyup.f1='handleSubmit' v-model='pwd'></div><div><input type="button" v-on:click='handleSubmit' value="提交"></div></form></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*事件绑定-按键修饰符*/Vue.config.keyCodes.f1 = 113var vm = new Vue({
     el: '#app',data: {
     uname: '',pwd: '',age: 0},methods: {
     clearContent:function(){
     // 按delete键的时候，清空用户名this.uname = '';},handleSubmit: function(){
     console.log(this.uname,this.pwd)}}});</script>
</body>
</html>

自定义按键修饰符别名

在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>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><input type="text" v-on:keyup.aaa='handle' v-model='info'></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*事件绑定-自定义按键修饰符规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值*/Vue.config.keyCodes.aaa = 65var vm = new Vue({
     el: '#app',data: {
     info: ''},methods: {
     handle: function(event){
     console.log(event.keyCode)}}});</script>
</body>
</html>

简单计算器案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><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>
</body>
</html>

v-bind

v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc"><!-- 缩写 -->
<img :src="imageSrc">

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><a v-bind:href="url">百度</a><a :href="url">百度1</a><button v-on:click='handle'>切换</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*属性绑定*/var vm = new Vue({
     el: '#app',data: {
     url: 'http://www.baidu.com'},methods: {
     handle: function(){
     // 修改URL地址this.url = 'http://itcast.cn';}}});</script>
</body>
</html>

绑定对象

我们可以给v-bind:class 一个对象，以动态地切换class。
注意：v-bind:class指令可以与普通的class特性共存

1、 v-bind 中支持绑定一个对象 如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据 
<!-- HTML最终渲染为 <ul class="box textColor textSize"></ul>注意：textColor，textSize 对应的渲染到页面上的CSS类名 isColor，isSize 对应vue data中的数据 如果为true 则对应的类名 渲染到页面上 当 isColor 和 isSize 变化时，class列表将相应的更新，例如，将isSize改成false，class列表将变为 <ul class="box textColor"></ul> --><ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"><li>学习Vue</li><li>学习Node</li><li>学习React</li>
</ul><div v-bind:style="{
       color:activeColor,fontSize:activeSize}">对象语法</div><sript>
var vm= new Vue({el:'.box',data:{isColor:true,isSize:true，activeColor:"red",activeSize:"25px",}
})
</sript>
<style>.box{
     border:1px dashed #f0f;}.textColor{
     color:#f00;background-color:#eef;}.textSize{
     font-size:30px;font-weight:bold;} </style>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.active {
     border: 1px solid red;width: 100px;height: 100px;}.error {
     background-color: orange;}</style>
</head>
<body><div id="app"><div v-bind:class="{active: isActive,error: isError}">测试样式</div><button v-on:click='handle'>切换</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*样式绑定*/var vm = new Vue({
     el: '#app',data: {
     isActive: true,isError: true},methods: {
     handle: function(){
     // 控制isActive的值在true和false之间进行切换this.isActive = !this.isActive;this.isError = !this.isError;}}});</script>
</body>
</html>

绑定class

2、  v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据这里的classA  对用data 中的  classA
这里的classB  对用data 中的  classB
<ul class="box" :class="[classA, classB]"><li>学习Vue</li><li>学习Node</li><li>学习React</li>
</ul>
<script> var vm= new Vue({
     el:'.box',data:{
     classA:‘textColor‘,classB:‘textSize‘} }) </script>
<style>.box{
     border:1px dashed #f0f;}.textColor{
     color:#f00;background-color:#eef;}.textSize{
     font-size:30px;font-weight:bold;} </style>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.active {
     border: 1px solid red;width: 100px;height: 100px;}.error {
     background-color: orange;}</style>
</head>
<body><div id="app"><div v-bind:class='[activeClass, errorClass]'>测试样式</div><button v-on:click='handle'>切换</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*样式绑定*/var vm = new Vue({
     el: '#app',data: {
     activeClass: 'active',errorClass: 'error'},methods: {
     handle: function(){
     this.activeClass = '';this.errorClass = '';}}});</script>
</body>
</html>

绑定对象和绑定数组的区别

绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><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>
</html>

绑定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>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title></head>
<body><div id="app"><div v-bind:style='{
       border: borderStyle, width: widthStyle, height: heightStyle}'></div><div v-bind:style='objStyles'></div><div v-bind:style='[objStyles, overrideStyles]'></div><button v-on:click='handle'>切换</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*样式绑定之内联样式Style：*/var vm = new Vue({
     el: '#app',data: {
     borderStyle: '1px solid blue',widthStyle: '100px',heightStyle: '200px',objStyles: {
     border: '1px solid green',width: '200px',height: '100px'},overrideStyles: {
     border: '5px solid orange',backgroundColor: 'blue'}},methods: {
     handle: function(){
     this.heightStyle = '100px';this.objStyles.width = '100px';}}});</script>
</body>
</html>

分支结构

v-if 使用场景

1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换

<div id="app"><!-- 判断是否加载，如果为真，就加载，否则不加载--><span v-if="flag">如果flag为true则显示,false不显示!</span>
</div><script>var vm = new Vue({
     el:"#app",data:{
     flag:true}}) </script>----------------------------------------------------------<div v-if="type === 'A'">A</div><!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行--><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><!-- v-else紧跟在v-if或v-else-if之后--><div v-else>Not A/B/C</div><script>new Vue({
     el: '#app',data: {
     type: 'C'}}) </script>

v-show 和 v-if的区别

v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title></head>
<body><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>
</body>
</html>

循环结构

v-for

用于循环的数组里面的值可以是对象，也可以是普通元素

<ul id="example-1"><!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--><li v-for="item in items">{
   { item.message }}</li> </ul>
<script>new Vue({
     el: '#example-1',data: {
     items: [{
      message: 'Foo' },{
      message: 'Bar' }]，} }) </script>

不推荐同时使用 v-if 和 v-for
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

   <!-- 循环结构-遍历对象v 代表 对象的valuek 代表对象的 键 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>

key 的作用
- key来给每个节点做一个唯一标识
- key的作用主要是为了高效的更新虚拟DOM

<ul><li v-for="item in items" :key="item.id">...</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title></head>
<body><div id="app"><div>水果列表</div><ul><li v-for='item in fruits'>{
   {item}}</li><li v-for='(item, index) in fruits'>{
   {item + '---' + index}}</li><li :key='item.id' v-for='(item, index) in myFruits'><span>{
   {item.ename}}</span><span>-----</span><span>{
   {item.cname}}</span></li></ul></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*循环结构-遍历数组*/var vm = new Vue({
     el: '#app',data: {
     fruits: ['apple', 'orange', 'banana'],myFruits: [{
     id: 1,ename: 'apple',cname: '苹果'},{
     id: 2,ename: 'orange',cname: '橘子'},{
     id: 3,ename: 'banana',cname: '香蕉'}]}});</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title></head>
<body><div id="app"><div v-if='v==13' v-for='(v,k,i) in obj'>{
   {v + '---' + k + '---' + i}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">// 使用原生js遍历对象var obj = {
     uname: 'lisi',age: 12,gender: 'male'}for(var key in obj) {
     console.log(key, obj[key])}/*循环结构*/var vm = new Vue({
     el: '#app',data: {
     obj: {
     uname: 'zhangsan',age: 13,gender: 'female'}}});</script>
</body>
</html>

案例选项卡

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>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.tab ul {
     overflow: hidden;padding: 0;margin: 0;}.tab ul li {
     box-sizing: border-box;padding: 0;float: left;width: 100px;height: 45px;line-height: 45px;list-style: none;text-align: center;border-top: 1px solid blue;border-right: 1px solid blue;cursor}.tab ul li:first-child {
     border-left: 1px solid blue;}.tab ul li.active {
     background-color: orange;}.tab div {
     width: 500px;height: 300px;display: none;text-align: center;font-size: 30px;line-height: 300px;border: 1px solid blue;border-top: 0px;}.tab div.current {
     display: block;}</style>
</head>
<body><div id="app"><div class="tab"><ul><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 type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/**/var vm = new Vue({
     el: '#app',data: {
     currentIndex: 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){
     // 在这里实现选项卡切换操作：本质就是操作类名// 如何操作类名？就是通过currentIndexthis.currentIndex = index;}}});</script>
</body>
</html>

每日作业-Vue第01天

tab栏切换增强版

题目描述
- 点击tab栏内容区域显示对应的内容
- 如点击 SECTION 1 则内容区域显示对应 SECTION 1 的内容同时当前 SECTION的字体颜色变成蓝色
训练目标
- 能够理解vue 中的数据渲染
- 能够理解 v-for, v-if , v-bind , v-click 的使用
- 能够理解 vue 中调用函数的时候传递参数

训练提示

提供的数据如下

1、	数据list: [{
        id: 1,title: 'Section 1',content: 'content1'}, {
        id: 2,title: 'Section 2',content: 'content2'}, {
        id: 3,title: 'Section 3',content: 'content3'}, {
        id: 4,title: 'Section 4',content: 'content4'}, {
        id: 5,title: 'Section 5',content: 'content5'}, {
        id: 6,title: 'Section 6',content: 'content6'}]

2、 HTML 结构如下 
<div id="app" class="vertical-tab"><!-- 左侧tab栏 --><ul class="nav nav-tabs1"><li class="active"><a href="#"> Section 1 </a></li><li class=""><a href="#"> Section 2 </a></li><li class=""><a href="#"> Section 3 </a></li></ul><!-- 内容区域 --><div class="tab-content tabs"><div class="tab-pane fade active"><h3>Section 1</h3><p>content1</p></div><div class="tab-pane fade"><h3>Section 2</h3><p>content2</p></div><div class="tab-pane fade"><h3>Section 3</h3><p>content3</p></div><div class="tab-pane fade"><h3>Section 4</h3><p>content4</p></div><div class="tab-pane fade"><h3>Section 5</h3><p>content5</p></div><div class="tab-pane fade"><h3>Section 6</h3><p>content6</p></div></div><ul class="nav nav-tabs2"><!-- 右侧tab栏 --><li class=""><a href="#"> Section 4 </a></li><li class=""><a href="#"> Section 5 </a></li><li class=""><a href="#"> Section 6 </a></li></ul>
</div>

第一步：将 list 中的数据title 渲染到左侧和右侧的tab栏中
- 注意：左右各渲染3条数据
第二步：将 list 中的数据title 和 content 渲染到内容区域
第三步：给左侧的tab栏中的li绑定事件实现动态切换active 类名
- 注意：给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
- 其他 li 需要移除类名 active
第四步：拿到当前点击li的索引让内容区域中对应索引类名是 tab-pane 的 div 显示
- 注意：给类名是 tab-pane 的 div 添加类名 active 即可让当前div 显示出来 (类名是 active的样式已经在CSS中提前定义好 )
- 其他 tab-pane 的 div 需要移除类名 active
第五步：给右侧的tab栏中的li绑定事件实现动态切换active 类名
- 注意：给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
第六步：拿到当前点击li的索引让内容区域中对应索引类名是 tab-pane 的 div 显示
- 注意：这里需要注意索引问题：
  - 点击右侧第一个div 的时候需要让内容区域中的第 4个 div 显示出来
  - 点击右侧第2个div 的时候需要让内容区域中的第 5个 div 显示出来

操作步骤

HTML

<div id="app" class="vertical-tab"><!-- 左侧tab栏 --><ul class="nav nav-tabs1"><li class="active"><a href="#"> Section 1 </a></li><li class=""><a href="#"> Section 2 </a></li><li class=""><a href="#"> Section 3 </a></li></ul><!-- 内容区域 --><div class="tab-content tabs"><div class="tab-pane fade active"><h3>Section 1</h3><p>content1</p></div><div class="tab-pane fade"><h3>Section 2</h3><p>content2</p></div><div class="tab-pane fade"><h3>Section 3</h3><p>content3</p></div><div class="tab-pane fade"><h3>Section 4</h3><p>content4</p></div><div class="tab-pane fade"><h3>Section 5</h3><p>content5</p></div><div class="tab-pane fade"><h3>Section 6</h3><p>content6</p></div></div><ul class="nav nav-tabs2"><!-- 右侧tab栏 --><li class=""><a href="#"> Section 4 </a></li><li class=""><a href="#"> Section 5 </a></li><li class=""><a href="#"> Section 6 </a></li></ul>
</div>

CSS

  <style>* {
        margin: 0;padding: 0;}.vertical-tab {
        width: 920px;margin: 100px auto;}.vertical-tab .nav {
        list-style: none;width: 200px;}.vertical-tab .nav-tabs1 {
        border-right: 3px solid #e7e7e7;}.vertical-tab .nav-tabs2 {
        border-left: 3px solid #e7e7e7;}.vertical-tab .nav a {
        display: block;font-size: 18px;font-weight: 700;text-align: center;letter-spacing: 1px;text-transform: uppercase;padding: 10px 20px;margin: 0 0 1px 0;text-decoration: none;}.vertical-tab .tab-content {
        color: #555;background-color: #fff;font-size: 15px;letter-spacing: 1px;line-height: 23px;padding: 10px 15px 10px 25px;display: table-cell;position: relative;}.vertical-tab .nav-tabs1 {
        float: left;}.vertical-tab .tabs {
        width: 500px;box-sizing: border-box;float: left;}.vertical-tab .tab-content h3 {
        font-weight: 600;text-transform: uppercase;margin: 0 0 5px 0;}.vertical-tab .nav-tabs2 {
        float: right;}.tab-content .tab-pane {
        display: none;}.tab-content .tab-pane.active {
        display: block;}
</style>

data 中的数据

	     list: [{
        id: 1,title: 'Section 1',content: 'content1'}, {
        id: 2,title: 'Section 2',content: 'content2'}, {
        id: 3,title: 'Section 3',content: 'content3'}, {
        id: 4,title: 'Section 4',content: 'content4'}, {
        id: 5,title: 'Section 5',content: 'content5'}, {
        id: 6,title: 'Section 6',content: 'content6'}]

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {
     margin: 0;padding: 0;}.vertical-tab {
     width: 920px;margin: 100px auto;}.vertical-tab .nav {
     list-style: none;width: 200px;}.vertical-tab .nav-tabs1 {
     border-right: 3px solid #e7e7e7;}.vertical-tab .nav-tabs2 {
     border-left: 3px solid #e7e7e7;}.vertical-tab .nav a {
     display: block;font-size: 18px;font-weight: 700;text-align: center;letter-spacing: 1px;text-transform: uppercase;padding: 10px 20px;margin: 0 0 1px 0;text-decoration: none;}.vertical-tab .tab-content {
     color: #555;background-color: #fff;font-size: 15px;letter-spacing: 1px;line-height: 23px;padding: 10px 15px 10px 25px;display: table-cell;position: relative;}.vertical-tab .nav-tabs1 {
     float: left;}.vertical-tab .tabs {
     width: 500px;box-sizing: border-box;float: left;}.vertical-tab .tab-content h3 {
     font-weight: 600;text-transform: uppercase;margin: 0 0 5px 0;}.vertical-tab .nav-tabs2 {
     float: right;}.tab-content {
     position: relative;}.tab-content .tab-pane {
     position: absolute;top: 10px;left: 20px;}.nav li.active a {
     color: #198df8;background: #fff;border: none;}.fade {
     opacity: 0;transition: all .3s linear;}.fade.active {
     opacity: 1;}</style>
</head><body><div class="vertical-tab" id="app"><!-- Nav tabs --><ul class="nav nav-tabs1"><li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#"> {
   {item.title}} </a></li></ul><!-- Tab panes --><div class="tab-content tabs"><div class="tab-pane fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'><h3>{
   {item.title}}</h3><p>{
   {item.content}}</p></div></div><!-- Nav tabs --><ul class="nav nav-tabs2"><li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#"> {
   {item.title}} </a></li></ul></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({
     el: "#app",data: {
     currentIndex: 0, // 选项卡当前的索引list: [{
     id: 1,title: 'Section 1',content: 'content1'}, {
     id: 2,title: 'Section 2',content: 'content2'}, {
     id: 3,title: 'Section 3',content: 'content3'}, {
     id: 4,title: 'Section 4',content: 'content4'}, {
     id: 5,title: 'Section 5',content: 'content5'}, {
     id: 6,title: 'Section 6',content: 'content6'}]},methods: {
     change(index, flag) {
     if (flag) {
     console.log(index)this.currentIndex = index;} else {
     this.currentIndex = index;}}}})</script>
</body>

【16】Vue：01-指令、v-cloak、v-text、v-html、v-pre、v-once、双向数据绑定、v-model、mvvm、v-on、事件修饰符、按键修饰符、v-bind