Vue.js---------Vue基础

• 能够说出Vue的概念和作用
• 能够使用@vue/cli脚手架工程化开发
• 能够熟练Vue指令

一.vue基本概念

1.学习vue

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

渐进式javascript框架:https://cn.vuejs.org/

2.web里的渐进式

HTML能写网页，CSS能够让网页好看，JS赋予网页交互效果，JQ写的更快，node可以提供动态数据。

vue里面的渐进式是指:

 库和框架

库:封装的属性和方法(jQury)

框架:拥有自己的规则和元素，比库还强大(vue)

Vue是什么?
Vue是一个javascript渐进式框架
什么是渐进式呢?
渐进式就是逐渐使用，集成更多的功能什么是库和框架呢?
库是方法的集合，而框架是一套拥有自己规则的语法

Vue学习方式

传统开发模式:基于html文件开发VUe1

工程化开发模式:在webpack环境中开发vue 

传统的:                                              工程化开发模式:

 

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

结论

1. 修改state状态必须通过mutations

2. mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行

3. 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成

4. state的状态即共享数据可以在组件中引用

5. 组件中可以调用action

二.@vue/cli脚手架

1.@vue/cli和脚手架介绍

• @vue/cli是vue贵啊萌发提供的一个全局模块包（得到vue命令),此包用于创建脚手架项目

2._vue/cli安装

具体参考步骤可以观看Vue安装环境最全教程，傻瓜式安装-CSDN博客

全局安装@vue/cli模块包 

也可以用npm进行安装

查看是否成功

如果安装过程中，遇到以下情况：是因为vue.js脚本在没有编辑在环境变量中

 

 三.创建vue项目

1.创建项目

项目名不能有大写字母，中文， 特殊符号

建立一个新的脚手架项目, 在项目中应用vuex

vue create demo

以上显示的是是否使用淘宝镜像源，直接回车就好 

选择vue2

 使用命令用yarn还是npm

选择模板和包管理器，等待脚手架项目创建完毕

 

创建vue/cli3.x.x时，默认使用yarn作为包管理器，怎么修改为npm呢？
创建vuecli3.x.x的时候，会默认选择使用yarn作为包管理器，如果你不习惯yarn，想用npm，那么怎么更改呢？

第一步:

到c盘找到一个文件名叫".vuerc"的文件，打开
这个文件一般存储在C:\Users\86180

 

第二步

打开之后进行修改

如果遇到以上问题，原使用yarn命令可以转为npm命令，原因是yarn安装包有问题。

 

 2.启动@vue/cli开发服务器

cd 进入项目下，启动内置的webpack本地更新开发服务器-浏览项目页面

cd demo
// 运行网页命令
npm run serve

 打开浏览器，输入http://localhost:8080/，打开vue界面

如果未自动弹出浏览器，手动打开输入提示的域名+端口浏览项目页面

1.如何创建一个开箱即用的脚手架项目

              vue create 项目名

2.如何在网页上浏览这个项目

             yarn serve 启动本地热更新开发服务器

3.@vue/cli目录和代码分析

目标：文件夹和文件含义，关键文件里代码意思。

 

脚手架里主要文件和作用?

        1. node_modules-都是下载的第三方包

        2. public/index. html-浏览器运行的网页

        3. src/main. js- webpack打包的入口

        4. src/App. vue- Vue页面入口5. package. json- 依赖包列表文件 

 4.项目架构了解

目标：知道项目入口，以及代码执行顺序和引入关系

 main.js里面主要内容

import Vue from 'vue'  // 引入vue对象 类似于<script src="vue.js"></script>
import App from './App.vue'    //App.vue文件里对象引入过来(vue项目页面入口)

Vue.config.productionTip = false   //在控制台有一句提示消息

new Vue({  // 开始实例化vue
  render: h => h(App),  //准备渲染APP页面
}).$mount('#app')     //渲染到index.html文件里id叫app标签上

main. js和App. vue,以及index. html作用和关系?
1. main. js-项目打包主入口-Vue初始化
2. App. vue-Vue页面主入口
3. index. html-浏览器运行的文件
4.App.vue=>mainjs=>index.htm) 

5.@vue/cli自定义配置

目标:项目中没有webpack.config.js文件，因为Vue脚手架项目用的vue.config.js

src并列处新建vue.config.js,填入配置，重启webpack开发服务器

在src同目录下创建vue.config.js

// vue脚本架项目 - 默认的配置文件名
// webpack +node环境 - 导出配置对象
module.exports = {
    devServer:{
        port:3000,
        open:true  //浏览器自动打开
    }
}

6.eslint检查代码

目标:eslint是一种代码检查的工具

如果写代码违反了eslint的规则-报错

演示:在main.js中随便定义变量-不使用-观察eslint报错

import Vue from 'vue'  // 引入vue对象 类似于<script src="vue.js"></script>
import App from './App.vue'    //App.vue文件里对象引入过来(vue项目页面入口)

Vue.config.productionTip = false   //在控制台有一句提示消息

let a = 10

new Vue({  // 开始实例化vue
  render: h => h(App),  //准备渲染APP页面
}).$mount('#app')     //渲染到index.html文件里id叫app标签上

方式1：手动解决掉错误，以后项目中会讲如何自动解决

方式2：暂时关闭eslint检查(因为现在主要精力在学习上），在vue.config.js中配置后启动服务器。

// vue脚本架项目 - 默认的配置文件名
// webpack +node环境 - 导出配置对象
module.exports = {
    devServer:{
        port:3000,
        open:true  //浏览器自动打开
    },
    lintOnSave:false //关闭eslint检查
}

 

 7.单vue文件讲解

• vue推荐采用.vue文件来开发项目
• template里面只能有一个根标签
• js独立作用域互不影响
• style配合scoped属性，保证样式只针对当前templated内标签生效

8.脚本架项目_清理欢迎界面

• assets和components文件夹下的一切都删除(不要默认的欢迎界面）
• src/App.vue默认有很多内容，可以全部删除留下template和script和style的框

插播一条知识点:怎么样在vue后缀文件中生成vue的使用模板

第一步:

文件 --> 首选项 --> 用户代码片段 --> 输入vue，选择vue.json.code-snippets -->把里面已有的文件删掉 -->复制下面代码内容并保存

{
	// 打印输出
	"Print to console": {
		// 前缀  也就是用户输入的快捷键内容
		"prefix": "vue",
		// 输出内容
		"body": [
			"<!-- $0 -->",
			"<template>",
			"  <div>",
			"",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data () {",
			"    return {",
			"    }",
			"  }",
			"}",
			"</script>",
			"",
			"<style  scoped>",
			"",
			"</style>",
			""
		],
		// 描述
		"description": "Log output to console"
	}
}

第二步: 添加配置，让vscode允许自定义的代码片段提示出来

文件 --> 首选项 --> 设置 —> 添加这2项

“editor.snippetSuggestions”: “top”,
“editor.formatOnPaste”: true      可以搜索栏搜索之后进行修改

 第三步:测试是否添加成功
测试方法： 新建vue后缀文件，在空白文件内输入vue会出现提示，利用上下箭头选择第二个”vue模板“按下回车，如下面第二张就OK了

 

 四.Vue指令

1.Vue基础-插值表达式

目标:在dom标签中，直接插入vue数据变量

• 又叫:声明式渲染/文本插值
• 语法:{{表达式}}

• msg和obj是vue数据变量
• 要在js中data函数里声明

  

  //在APP.vue文件中添加内容
<!-- 输入vue,点击vue模板回车可出现如下结构-->
<template>
  <div>
    <!-- 2.把值赋予到标签 -->
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age >= 18 ? '成年了' : '未成年'}}</h3>
  </div>
</template>

<script>
  export default {
    // 1.变量在data函数return的对象上
    data(){
      return {
        msg:'Hello,Vue',
        obj: {
          name:'小vue',
          age: 5
        }
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss">

</style>

在终端中运行vue开发服务端:npm run serve

 

什么是插值表达式?

        双大括号， 可以把vue数据变量直接显示在标签内

Vue中变量声明在哪里?

        data函数返回的对象上， 用key属性声明

1).vue Devtools下载使用

Vue Devtools介绍
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。

下载安装
通过官方下载渠道（可跳过）
访问Vue2.x官网https://cn.vuejs.org/v2/guide/installation.html#Vue-Devtools
访问Vue3.x官网https://v3.cn.vuejs.org/guide/installation.html#vue-devtools

第一步：打开Home | Vue Devtools (vuejs.org)官网，点击安装

第二步:按照需要的进行安装

在搜索框搜索vue，下载beta版本的Vue.js Devtools 

进入Vue.js Devtools详情界面，点击推荐下载

 我的是在Edge上安装的，直接点击安装就好了，然后点击网页菜单，点击扩展

 点击这个标志，点击vue.js devtools,点击管理扩展

2).验证使用

1. 可在浏览器对插件进行固定显示。

   

2. 使用了Vue框架的界面的Vue-Devtools插件的logo才会亮起，否则是灰色的。按F12打开开发者工具。

   • Vue插件的logo亮起——页面使用了Vue——开发者工具栏有Vue选项

     

 思考:在上个代码基础上，在devtool工具改变M层的变量，观察V层(视图的自动同步）

QQ录屏20240408201038

 2.vue基础-MVVM设计模式

目标:转变思维，用数据驱动视图改变，操作dom的事，vue源码内干了

• MVVM，一种软件架构模式，决定了写代码的思想和层次

  • M： model数据模型 (data里定义)

  • V： view视图 （html页面）

  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V（修改视图） -> M（数据自动同步）

  • M（修改数据） -> V（视图自动同步）

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

什么是设计模式?　　

       设计模式是对代码分层， 引入一种架构的概念

MVVM是什么?　　

      MVVM(模型， 视图，视图模型双向关联的一种设计模式)

MVVM好处?

      减少DOM操作，提高开发效率

3.Vue指令-v-bind

目标: 给标签属性设置Vue变量的值

v-bind语法和简写

• 语法：v-bind：属性名=“vue变量”
• 简写::属性名="vue变量"

新创建一个文件App.vue(注意区分大小写)

<template>
    <div>
        <!-- 2.值 -> 标签原生属性上 -->
        <!-- 语法：v-bind：原生属性='vue变量' -->
        <a v-bind:href="url">点击去百度</a>
        <!-- 语法:原生属性名='vue变量' -->
        <!-- <img :src="imgUrl" alt=""/> -->
    </div>
</template>

<script>
    export default {
        // 1.准备变量
        data(){
            return {
                url:'http://www.baidu.com',
                imgUrl:"http://yun.itheima.com/Upload/Images/20210412/60741c11ab77b.jpg"
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss">

</style>

 第一种:连接到百度

第二种:出现照片

4.Vue指令-v-on

目标:给标签绑定事件

语法:

• v-on:事件名="要执行的少量代码"
• v-on:事件名="methods中的函数名"
• v-on:时间名="methods中函数名(实参)"

<template>
    <div>
        <p> 你要购买商品的数量:{{ count }}</p>
        <!-- 1.绑定事件
            语法:v-on:事件名='少量代码' -->
        <button v-on:click="count = count + 1"> +1</button>
        <!-- 语法:v-on:事件名="methods里函数名" -->
        <button v-on:click="addFn">+1</button>
        <!-- 语法:v-on:事件名="methods里面函数名(值)" -->
        <button v-on:click="addCountFn(5)">+5</button>
    </div>
</template>

<script>
    export default {

        data(){
            return {
                count : 1
            }
        },
        // 2.定义函数
        methods: {
            addFn(){
                // this指的是export default的{}的对象
                // data函数会把对象挂到当前组件对象上
                this.count++
            },
            addCountFn(num){
                this.count=this.count +num
            }
        }
    }
</script>

<style lang="scss">

</style>

 

 v-on:可以简写成@

@事件名="methods中的函数"

<template>
    <div>
        <p> 你要购买商品的数量:{{ count }}</p>
        <!-- 1.绑定事件
            语法:v-on:事件名='少量代码' -->
        <button v-on:click="count = count + 1"> +1</button>
        <!-- 语法:v-on:事件名="methods里函数名" -->
        <button v-on:click="addFn">+1</button>
        <!-- 语法:v-on:事件名="methods里面函数名(值)" -->
        <button v-on:click="addCountFn(5)">+5</button>
        <!-- 语法:@事件名="methods里函数名" -->
        <button @click="subFn">减少1</button>
    </div>
</template>

<script>
    export default {

        data(){
            return {
                count : 1
            }
        },
        // 2.定义函数
        methods: {
            addFn(){
                // this指的是export default的{}的对象
                // data函数会把对象挂到当前组件对象上
                this.count++
            },
            addCountFn(num){
                this.count=this.count +num
            },
            subFn(){
                this.count --
            }
        }
    }
</script>

<style lang="scss">

</style>

 

 目标:Vue事件处理函数中，拿到事件对象

• 无传参，通过形参直接接收
• 传参，通过$event指代事件对象传给事件处理函数

<template>
    <div>
        <a @click="one" href="http://www.baidu.com">百度</a>
        <hr />
        <a @click="two(10,$event)" href="http://www.taobao.com">淘宝</a>
    </div>
</template>

<script>
    export default {

        data(){
            return {
                
            }
        },
        methods: {
            // 1.事件触发，无传值，可以直接获取事件对象是
            one(e){
                e.preventDefault()
            },
            // 2.事件触发，传值，需要手动传入$event
            two(num,e){
                e.preventDefault()
            }
        }
    }
</script>

<style lang="scss">

</style>

Vue事件处理函数，如何拿到事件对象?

1.无传参，直接在形参接收

2.有传参,手动传入$event对象 

5.vue指令-V-on修饰符 

目标:在事件后面.修饰符-给事件带来更强大的功能

语法:

• @事件名.修饰符="methods里函数"

修饰符列表

• .stop   -阻止事件冒泡
• 
• .prevent -阻止默认行为
• 
• .once -程序运行期间，只触发一次事件处理函数
• 

• <template>
      <div>
          <div @click="fatherFn">
              <p @click.stop="oneFn">.stop - 阻止事件冒泡</p>
              <!-- 父级和子级都被阻止了 -->
              <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>
              <p @click.once="twoFn">点击观察事件处理函数执行几次</p>
          </div>
      </div>
  </template>
  
  <script>
      export default {
          data(){
              return {
                  
              }
          },
          methods: {
              fatherFn(){
                  console.log("father-触发click事件");
              },
              oneFn(){
                  console.log("p标签点击了")
              },
              twoFn(){
                  console.log("P标签被点击了")
              }
          }
      }
  </script>
  
  <style lang="scss">
  
  </style>

• 

Vue有哪些主要修饰符，都有什么功能?
1. . stop-阻止事件冒泡
2. . prevent-阻止默认行为
3. . once-只执行一次事件处理函数

 6.Vue指令-v-on按键修饰符

目标:给键盘事件，添加修饰符，增强能力

• @keyup.enter - 监测回车按键
• @keyup.esc - 监测返回按键

<template>
    <div>
        <!-- 1.绑定键盘按下事件.enter-回车 -->
        <input type="text" @keydown.enter="enterFn">
        <!-- 2. .esc修饰符 - 取消键 -->
        <hr>
        <input type="text" @keydown.esc="escFn">
    </div>
</template>

<script>
    export default {
        data(){
            return {
                
            }
        },
        methods: {
            enterFn(){
                console.log("用户按下的回车");
            },
            escFn(){
                console.log('用户按下esc键');
            }
        }
    }
</script>

<style lang="scss">

</style>

 

更多修饰符: https://cn.vuejs.org/v2/guide/events.html 

按键修饰符如何使用?

      @键盘事件.按键修饰符=“methods里函数名”

有哪些主要按键修饰符?

     1. .enter – 只要按下回车才能触发这个键盘事件函数

        2. .esc – 只有按下取消键才能触发这个键盘事件函数

7.课上练习_翻转世界  

需求：点击按钮 - 把文字取反显示 - 再点击取反显示(回来了) 提示: 点击事件里, 把Vue变量值挨个字母取反赋予回来 (提示跟数组有关系)

 

分析：先静后动

• ①：定义变量 message:‘HELLO, WORLD’
• ②：插值表达式赋予到dom上, 准备按钮和文字
• ③: 按钮绑定点击事件和函数
• ④: 对message值用split拆分, 返回数组
• ⑤: 数组元素翻转用reverse方法
• ⑥: 再把数组用join拼接成字符串赋予给message
• ⑦: 因为Vue是MVVM设计模式, 数据驱动视图, 所以视图自动改变

<template>
    <div>
        <!-- 1.变量准备-静态页面铺设 -->
        <h1>{{ msg }}</h1>
        <button @click="btn">逆转世界</button>
    </div>
</template>

<script>
    export default {

        data(){
            return {
                msg:"Hello,World"
            }
        },
        methods: {
            btn(){
                // // 3.截取字符串返回数组
                // let arr = this.msg.split("")
                // // 4.翻转
                // arr.reverse()
                // // 5.数组拼接起来
                // this.msg = arr.join("")

                // 简化
                this.msg = this.msg.split("").reverse().join("")
            }
        }
    }
</script>

<style lang="scss">

</style>

 

点击翻转字符串你有什么收货?

1. 写需求要先静态标签, 再考虑动态效果, 找好第一步干什么

2. 记住方法的特点 – 可以自己总结字典和口诀

3. Vue是靠数据驱动视图, 只需要关心数据变化即可

8.Vue指令-v-model  

目标：value属性和Vue数据变量, 双向绑定到一起

语法: v-model="Vue数据变量"

⚫ 双向数据绑定

⚫ 变量变化 -> 视图自动同步

⚫ 视图变化 -> 变量自动同步

⚫ 例子, 做个注册表单, 了解v-model在各种表单标签如何使用

<template>
    <div>
        <div>
            <span>用户名:</span>
            <!-- 1. v-model双向数据绑定，
                两者关联到一起，value变化vue的值也会跟着发生变化
                表单value属性 - vue变量， -->
            <input type="text" v-model="username">
        </div>
        <div>
            <span>密码：</span>
            <input type="password" v-model="pass">
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                username : "",
                pass: ""
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss">

</style>

v-model用在哪里?

          暂时只能用在表单标签上

v-model有什么作用?

          把vue的数据变量和表单的value属性双向绑定在一起

语法: v-model="Vue数据变量"

⚫ 例子如下:

 下拉菜单, 复选框, 单选框如何绑定Vue变量呢?

<template>
    <div>
        <div>
            <span>来自于: </span>
            <!-- 下拉菜单要绑定在select上 -->
            <select v-model="from">
                <option value="北京市">北京</option>
                <option value="南京市">南京</option>
                <option value="天津市">天津</option>
            </select>
        </div>
        <div>
            <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
            <span>爱好: </span>
            <input type="checkbox" v-model="hobby" value="抽烟">抽烟
            <input type="checkbox" v-model="hobby" value="喝酒">喝酒
            <input type="checkbox" v-model="hobby" value="写代码">写代码
        </div>
        <div>
            <span>性别: </span>
            <input type="radio" value="男" name="sex" v-model="gender">男
            <input type="radio" value="女" name="sex" v-model="gender">女
        </div>
        <div>
            <span>自我介绍</span>
            <textarea v-model="intro"></textarea>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            from: "",
            hobby: [],
            gender: "男",
            intro: ""
        }
    }
}
</script>

<style></style>

下拉菜单v-model写在哪里?

            在select, value在option上

v-model用在复选框时, 需要注意什么?

       v-model的vue变量是：

              非数组 – 关联的是checked属性

              数组 – 关联的是value属性

vue变量初始值会不会影响表单的默认状态?

        会影响, 因为双向数据绑定-互相影响

9.Vue指令-v-model修饰符  

目标：让v-model拥有更强大的功能

语法: v-model.修饰符="Vue数据变量"

• .number 以parseFloat转成数字类型
• .trim 去除首尾空白字符
• .lazy 在change时触发而非inupt时

<template>
    <div>
        <div>
            <span>年龄</span>
            <!-- .number修饰符-把值parseFloat转数值再赋予给v-model对应的变量 -->
            <input type="text" v-model.number="age">
        </div>
        <div>
            <!-- .trim修饰 - 去除首尾两边空格 -->
            <span>人生格言</span>
            <input type="text" v-model.trim="motto">
        </div>
        <div>
            <!-- .lazy修饰符 - 失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量 -->
            <span>个人简介</span>
            <textarea v-model.lazy="intro"></textarea>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            age: 0,
            motto: "",
            intro: ""
        }
    }
}
</script>

<style></style>

v-model有哪些修饰符, 提高我们编程效率?

1. .number – 转成数值类型赋予给Vue数据变量

2. .trim – 去除左右两边空格后把值赋予给Vue数据变量

3. .lazy – 等表单失去焦点, 才把值赋予给Vue数据变量  

10.Vue指令-v-text和v-html 

目标：更新DOM对象的innerText/innerHTML

⚫ 语法:

• v-text="Vue数据变量"
• v-html="Vue数据变量"

⚫ 注意: 会覆盖插值表达式

 

<template>
    <div>
        <p v-text="str"></p>
        <p v-html="str"></p>
        <!-- 注意:v-text或v-html会覆盖插值表达式 -->
    </div>
</template>

<script>
    export default {
        data(){
            return {
              str:"<span>我是一个span</span>"  
            }
        },
        methods: {

        }
    }
</script>

v-text和v-html有什么作用?

         都可以设置标签显示的内容

区别是什么?

v-text把值当成普通字符串显示

v-html把值当成标签进行解析显示

11.Vue指令-v-show和v-if  

目标：控制标签的隐藏或出现

⚫ 语法:

• v-show="Vue变量"
• v-if="Vue变量"

⚫ 原理

• v-show 用的display:none隐藏 (频繁切换使用)
• v-if 直接从DOM树上移除

⚫ 高级

• v-else的使用

<template>
    <div>
        <!-- v-show或者v-if
            v-show="vue变量" 
            v-if="vue变量"-->
        <h1 v-show="isShow">我是h1</h1>
        <h2 v-if="isOK">我是h2</h2>
        <!-- v-show隐藏:采用display:none //频繁切换
            v-if隐藏: 采用从DOM树直接删除   //移除
        -->

        <!-- v-if 和v-else使用 -->
        <p v-if="age >= 18">成年了</p>
        <p v-else>未成年</p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
               isShow: false ,
               isOK: false,
               age: 20
            }
        },
        methods: {

        }
    }
</script>

<style>

</style>

vue如何控制标签显示/隐藏

   v-show或v-if, 给变量赋予true/false, 显示/隐藏

区别是什么?

   v-show是用css方式隐藏标签

   v-if直接从DOM树上移除

   v-if 可以配合v-else或者v-else-if使用

 12.案例_折叠面板

需求：点击展开或收起时，把内容区域显示或者隐藏

分析:

• ①: 准备标签和样式, 下载less模块和less-loader@5.0.0模块
• ②: 熟悉下标签结构和样式, 对应页面哪一部分
• ③: 按钮绑定点击事件
• ④: 声明变量isShow来控制下面标签是否显示/隐藏
• ④: 点击时, 改变isShow的值, 来影响页面效果

<template>
    <div id="app">
        <h3>案例：折叠面板</h3>
        <div>
            <div class="title">
                <h4>芙蓉楼送辛渐</h4>
                <!-- 1.绑定点击事件 -->
                <span class="btn" @click="btn">
                    <!-- 4. 根据isShow的值显示不同文字 -->
                    {{ isShow ? '收起' : '展开' }}
                </span>
            </div>
            <!-- 2. v-show配合变量来控制标签隐藏出现 -->
            <div class="container" v-show="isShow">
                <p>寒雨连江夜入吴,</p>
                <p>平明送客楚山孤。</p>
                <p>洛阳亲友如相问，</p>
                <p>一片冰心在玉壶。</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: true
        }
    },
    methods: {
        btn() {
            // 3. 点击时, 把值改成false
            this.isShow = !this.isShow
        }
    }
}
</script>

<style lang="less">
body {
    background-color: #ccc;

    #app {
        width: 400px;
        margin: 20px auto;
        background-color: #fff;
        border: 4px solid blueviolet;
        border-radius: 1em;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
        padding: 1em 2em 2em;

        h3 {
            text-align: center;
        }

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 0 1em;
        }

        .title h4 {
            line-height: 2;
            margin: 0;
        }

        .container {
            border: 1px solid #ccc;
            padding: 0 1em;
        }

        .btn {
            /* 鼠标改成手的形状 */
            cursor: pointer;
        }
    }
}</style>

折叠面板-案例思路是?

1. 还是先静态标签

2. 显示/隐藏用v-show和vue变量来控制(默认true)

3. 点击切换vue变量来达到目的

13_vue指令-v-for

目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成

• 语法

  • v-for="(值, 索引) in 目标结构"

  • v-for="值 in 目标结构"

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

• 注意:

  v-for的临时变量名不能用到v-for范围外

<template>
    <div id="app">
        <div id="app">
            <!-- v-for 把一组数据, 渲染成一组DOM -->
            <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
            <p>学生姓名</p>
            <ul>
                <li v-for="(item, index) in arr" :key="item">
                    {{ index }} - {{ item }}
                </li>
            </ul>

            <p>学生详细信息</p>
            <ul>
                <li v-for="obj in stuArr" :key="obj.id">
                    <span>{{ obj.name }}</span>
                    <span>{{ obj.sex }}</span>
                    <span>{{ obj.hobby }}</span>
                </li>
            </ul>

            <!-- v-for遍历对象(了解) -->
            <p>老师信息</p>
            <div v-for="(value, key) in tObj" :key="value">
                {{ key }} -- {{ value }}
            </div>

            <!-- v-for遍历整数(了解) - 从1开始 -->
            <p>序号</p>
            <div v-for="i in count" :key="i">{{ i }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: ["小明", "小欢欢", "大黄"],
            stuArr: [
                {
                    id: 1001,
                    name: "孙悟空",
                    sex: "男",
                    hobby: "吃桃子",
                },
                {
                    id: 1002,
                    name: "猪八戒",
                    sex: "男",
                    hobby: "背媳妇",
                },
            ],
            tObj: {
                name: "小黑",
                age: 18,
                class: "1期",
            },
            count: 10,
        };
    },
};
</script>