vue学习汇总

目录

一、vue基本语法

1.插值表达式 {{}} 

2.显示数据(v-text)和(v-html)

3.事件处理(v-on)

4.循环遍历(v-for)

5.判断语法(v-if)

6.元素显示与隐藏(v-show)

7.动态设置属性(v-bind)

8.数据双向绑定(v-model)

9.计算属性

二、vue组件

1.使用组件的三个步骤

2.注册组件的两种方式

 3.组件嵌套

 4.认识vue文件

 5.创建组件并暴露的写法

三、axios异步请求

1.引入axios

2.get和post请求

3.vue+axios

四、创建 vue-cli 脚手架

1.什么是npm

2.使用webpack手动执行(不用脚手架)

3.创建脚手架步骤

4.npm run serve 命令可能出现的问题

5.vue脚手架项目结构

6.项目创建步骤示例(脚手架中执行)

五、vuex

六、vue-router 前端路由

1.基本使用

2.路由嵌套

七、Vue插件库的使用


一、vue基本语法

1.插值表达式 {{}} 

插值表达式用户把vue中所定义的数据,显示在页面上.。 

el挂载点:设置Vue实例挂载(管理)的元素

语法{{ 变量名/对象.属性名 }}

案例:

<div id="one">{{message}}
</div>
<script>var v1 = new Vue({el: "#one",data: {message: "hello world!"},})
</script>

2.显示数据(v-text)和(v-html)

v-test和v-html都是专门用来展示数据,其作用和插值表达式类似。并且还可以解决因网速慢差值表达式会显示原始的{{}}问题。

区别

v-text:把数据当作纯文本显示.
v-html:遇到html标签,会正常解析

示例 

<div id="one" ><div v-text="message"></div><div v-html="message"></div>
</div>
<script>var v = new Vue({el: '#one',data: {message: "<h3>哈哈哈</h3>"}});
</script>

结果 

3.事件处理(v-on)

​ Vue中也可以给页面元素绑定事件.如元素点击click事件,提交submit事件,回车keyup.enter事件。

  • 语法
<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点击</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点击</button>
  • 案例
<div id="one"><button v-on:click="addition()">加1</button><button v-on:click="subtraction()">减1</button><h1>{{score}}</h1>
</div>
<script>var app = new Vue({el:"#one",data:{score: 60},methods: {// 加1  addition() {this.score+=1;},// 减1subtraction() {this.score-=1;},}});
</script>

4.循环遍历(v-for)

1.遍历数组

  • 语法
v-for="item in items" // 遍历数组
v-for="(item,index) in items" // 遍历数组加下标
  • 示例 
<div id="one"><li v-for="user in users">{{user}}</li><li v-for="(user,index) in users">{{user}}--{{index}}</li>
</div>
<script>var v1 = new Vue({el: "#one",data: {users: ['user1','user2','user3','user4','user5']},})
</script>

2.遍历对象

  • 语法
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 示例 
<div id="one"><li v-for="key in person">{{key}}</li><li v-for="(key,value) in person">{{key}}--{{value}}</li><li v-for="(key,value,index) in person">{{key}}--{{value}}--{{index}}</li>
</div>
<script>var v1 = new Vue({el: "#one",data: {person: {"username":"lisi","age":"20","gender":"男"}},})
</script>

3.向数组中添加或删除元素

  • 示例
<div id="one"><button @click="add">添加</button><button @click="remove">移除</button><li v-for="user in users">{{user}}</li>
</div>
<script>var v1 = new Vue({el: "#one",data: {users: ['user1','user2','user3','user4','user5']},methods: {// 向users数组中添加元素add() {this.users.unshift("user6");},// 移除users中的元素remove() {this.users.shift();},}})
</script>

5.判断语法(v-if)

  • 语法
v-if="判断语句"
v-else-if="判断语句"
v-else
  • 示例 
<div id="one">请输入你的成绩:<input type="text" v-model.number="score"><div v-if="score>=90"> <h2>优秀!</h2></div><div v-else-if="score>=80"> <h2>良好!</h2> </div><div v-else-if="score>=70"> <h2>中等!</h2> </div><div v-else-if="score>=60"> <h2>及格!</h2> </div><div v-else><h2>不及格!</h2> </div>
</div>
<script>var app = new Vue({el:"#one",data:{score: 60},});
</script>

6.元素显示与隐藏(v-show)

条件满足(为true)时,显示元素,反之不显示。但是此元素依然存在,只是其CSS属性display变为none了。

<div id="one" ><h1 v-show="show">hello world!</h1>
</div>
<script>var v = new Vue({el: '#one',data: {show: true}});
</script>

当show设置为false时: 

7.动态设置属性(v-bind)

常用于动态设置标签的属性值,如src,href,value,class等等

  • 语法
v-bind:value=""  //正常写法
:value=""        //简写
  • 示例
<div id="one"><input type="button" v-bind:value="message">
</div>
<script>var v1 = new Vue({el: "#one",data: {message: "哈哈"},})
</script>

8.数据双向绑定(v-model)

数据双向绑定可以实现数据变化的时候,页面会自动刷新,页面变化的时候,数据也会自动变化

双向绑定只能绑定文本框,单选框,复选框,文本域以及下拉列表等表单元素。

1.绑定文本框

<div id="one"><input type="text" v-model="message"><span>{{message}}</span>
</div>
<script>var v1 = new Vue({el:"#one",data:{// 该属性和文本框的属性保持一致message: ""},});
</script>

2.绑定单个复选框

<div id="one"><input type="checkbox" v-model="message">同意<br><span>{{message}}</span>
</div>
<script>var v1 = new Vue({el:"#one",data:{// 该属性和文本框的属性保持一致message: false},});
</script>

3.绑定多个复选框

<div id="one"><input type="checkbox" v-model="message" value="Java">Java<br><input type="checkbox" v-model="message" value="Python">Python<br><input type="checkbox" v-model="message" value="C++">C++<br><span>{{message}}</span>
</div>
<script>var v1 = new Vue({el:"#one",data:{// 数组中的值就是被选中的元素的value属性值message: []},});
</script>

9.计算属性

1.计算属性很重要的特性: 带缓存, 性能极强

2.在第一次使用该属性时进行计算, 计算后将结果缓存起来, 后面如果还有其他地方用到, 会直接从缓存中取值, 不会再次计算。

3.如果方法中的某些数据更新了,与此相关的方法都会重新执行一遍。

  • 语法 
computed: {}
  • 示例
<div id="one">{{currentTime_methods()}}<br>   <!-- methods里的方法调用要加() -->{{currentTime_computed}}        <!-- computed里的方法调用不加   计算属性 -->
</div>
<script>var v1 = new Vue({el: "#one",data: {message: "hello world!"},methods: {currentTime_methods: function () {return Date.now();}},// 计算属性computed: {currentTime_computed: function () {return Date.now();}}
});

二、vue组件

1.使用组件的三个步骤

  1. 创建一个组件 (Vue.extend)
  2. 注册组件
  3. 使用组件
<div id="root"><!-- 3.使用student组件 --><student></student><school></school>
</div>
<!--<script src="vue/vue.min.js"></script>-->
<script>// Vue.config.devtools = true// 1. 创建student组件let student = Vue.extend({template: `<div><h1>{{ id }}--{{ name }}</h1></div>`,data(){return{id: '11',name: 'lisi',}}})// 创建组件可以简写// let student = {//     template: `<div>//                <h1>{{ id }}--{{ name }}</h1>//            </div>`,//     data(){//         return{//             id: '11',//             name: 'lisi',//         }//     }// }// 1. 创建school组件let school = Vue.extend({template: `<div><h1>{{ schoolName }}--{{ address }}</h1></div>`,data(){return{schoolName: '实验小学',address: '陕西省咸阳市',}}})new Vue({el: '#root',data: {},// 2.注册组件(局部注册)components: {student,school}});

2.注册组件的两种方式

  1. 局部注册
  2. 全局注册
// 局部注册组件
new Vue({el: '#root',data: {},// 2.注册组件(局部注册)components: {student}});// 全局注册组件 可以在任何div容器下使用该组件标签
Vue.component('student',student)

 3.组件嵌套

<script> // 如下school组件中嵌套了student组件// 1. 创建student组件let student = Vue.extend({template: `<div><h1>{{ id }}--{{ name }}</h1></div>`,data(){return{id: '11',name: 'lisi',}}})// 1. 创建school组件let school = Vue.extend({template: `<div><h1>{{ schoolName }}--{{ address }}</h1></div>`,data(){return{schoolName: '实验小学',address: '陕西省咸阳市',}},components: {// 组件嵌套student}})
</script>

 4.认识vue文件

<template><!-- 组件的结构 (模版里必须要有一个根元素,用div)包裹 --><div>...</div>
</template><script>
// 组件交互相关的代码(数据,方法等等)
// export 暴露导出模块
export default {name: "App" // 组件名
}
</script><style scoped>
/*组件的样式*/
</style>

 5.创建组件并暴露的写法

// 如下写法其实是一种简写
export default {}// 完整如下
export const Student = Vue.extend({})
export default(Student)
// 或者export let Student = Vue.export({})

三、axios异步请求

axios是一个基于 promise 的 HTTP 库, 主要用于:发送异步请求获取数据

1.引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.get和post请求

语法

// 方法一默认为正常响应回的数据,方法二为错误信息
axios.get("地址?key1=value1&key2=value2").then(function(response){},function(err){})
axios.post("地址",{key1:value1,key2:value2}).then(function(response){},function(err){})

示例

<script>// get请求axios.get("地址?key1=value1&key2=value2").then(// then中的第一个方法是响应成功返回的数据,第二个方法是返回的错误信息function (response) {console.log(response);},function (err) {console.log(err);})//post请求axios.post("地址",{// 请求参数username: "lisi",password: "123"}).then(// then中的第一个方法是响应成功返回的数据,第二个方法是返回的错误信息function (response) {console.log(response);},function (err) {console.log(err);})
</script>

3.vue+axios

<script>var v1 = new Vue({el: "#one",data: {user: {}},// 当页面加载完毕后created() {axios.get("info/userinfo",{// get请求的参数params: {username: "admin",password: "123",},// 响应数据格式为jsonresponseType: "json",}).then(ret => {// 打印响应数据console.log(ret.data);// 把响应数据赋值给vue中的user属性this.user=ret.data;}).catch(err => {// 打印错误信息console.log(err);});}});
</script>

四、创建 vue-cli 脚手架

1.什么是npm

npm是JS的一个包管理程序,相当于后端的maven,Node Package Manager 。

2.使用webpack手动执行(不用脚手架)

// 1.创建项目
vue init webpack 项目名
// 2,进行该项目
cd 项目
// 3.安装运行环境
npm install
// 4.启动项目
npm run dev
// 5.结束项目
ctrl+c// 由于JS文件引入使用了import,是es6语法,浏览器不认识,需要将该Js文件通过webpack
// 打包成一个新的压缩的JS文件后,再引入HTML文件中// 对JS文件打包成压缩的浏览器认识的JS文件,需要在webpack.confog.js
// 文件中配置【注意//webpack.confog.js配置文件的位置】
//module.exports = {
//    entry: './modules/main.js',      // 程序入口
//    output: {
//        filename: './js/bundle.js'   // 打包生成的JS文件位置
//    }
//}
webpack //打包命令

 可能出现的问题

解决办法

对 node_global文件node_cache文件 右键->属性->安全->编辑,全勾上。

3.创建脚手架步骤

  • 1. 创建vue项目 
vue create 项目名
  • 2.进入该项目
cd 项目名
  • 3.启动项目 
npm run serve
  • 4.结束项目
ctrl + c

4.npm run serve 命令可能出现的问题

原因是存在语法检查,组件命名没有按照它规范来。

解决办法:在vue.config.js文件中添加如下代码即可。

lintOnSave: false

5.vue脚手架项目结构

6.项目创建步骤示例(脚手架中执行)

  1. 首先创建两个vue文件(Student和School)
  2. 再创建一个vue文件(App),该文件嵌套上面两个文件(组件引入)
  3. 再创建一个JS文件(main),引入App.vue文件
  4. 最后创建一个HTML文件(index),并引入使用webpack打包而成的JS文件
  5. 最后在当前项目下使用 npm run serve 命令启动项目

首先创建两个vue文件(Student和School)

School.vue文件

<template>
<!-- 组件的结构 (模版里必须要有一个根元素) --><div><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2><button @click="showName">点我提示学校名</button></div>
</template><script>
// 组件交互相关的代码(数据,方法等等)
// export 将。。。暴露
export default {name: "School",  //组件名,最好跟文件名相同data() {return {name: '希望中学',address: '陕西省西安市'}},methods: {showName: function () {alert(this.name);}}
}
</script><style scoped>/*组件的样式*/
</style>

student.vue文件

<template><div><h2>学生姓名:{{name}}</h2><h2>学生年龄:{{age}}</h2><button @click="showName">点我提示学生名</button></div>
</template><script>
export default {name: "Student",data() {return {name: '张三',age: '18'}},methods: {showName: function () {alert(this.name);}}}
</script><style scoped></style>

再创建一个vue文件(App),该文件嵌套上面两个文件(即引入两个vue文件)

<template>
<!--  使用这两个组件--><div>  <!-- 切记模版里必须要有一个根元素 --><School></School><Student></Student></div>
</template><script>// 导入这两个组件import School from './components/School.vue'import Student from './components/Student.vue'export default {name: "App",data() {},components: {School,Student}}
</script><style scoped></style>

再创建一个JS文件(main),引入App.vue文件

// 引入vue组件
import Vue from 'vue'
// 引入App组件
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

最后创建一个HTML文件(index)

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

文件创建完毕,使用如下命令启动项目

npm run serve

五、vuex

实现多组件共享数据,管理数据的一个插件。

六、vue-router 前端路由

1.基本使用

1.安装vue-router

// 1.安装vue路由,3表示路由版本是3版本,路由3版本对应vue2版本
npm i vue-router@3

2.编写router配置项(js文件)

/***   该文件专门用来创建应用的路由器*/// 引入vue-router
import VueRouter from 'vue-router'// 引入路由对应的组件
import Student from './Student.vue'
import School from './School.vue'// 创建并暴露一个路由器
export default new VueRouter({// 如下,一个routers可以有一对或者多对 路径和组件routers: [{path: '/allstudents',      // 路径component: 'Student', // 组件名 前提是得引入组件},{path: '/allschools',component: 'School',}]
})

3.引入路由器(main.js文件中)

import Vue from 'vue'
import App from './App.vue'// 引入路由器(源自配置项中的路由器)
import router from './router'Vue.config.productionTip = falsenew Vue({render: h => h(App),router: router  // 设置路由器
}).$mount('#app')

3.实现切换(vue文件中的模版里不能再使用a标签,要替换成vue-router提供的router-link标签 )

<router-link to="/allstudents"></router-link>
<router-link to="/allschools"></router-link>

4.指定展示位置

<router-view></router-view>

2.路由嵌套

// 引入vue-router
import VueRouter from 'vue-router'// 引入路由对应的组件
import Student from './Student.vue'
import Student1 from './student1.vue'
import Student2 from './student2.vue'// 创建并暴露一个路由器
export default new VueRouter({routers: [{path: '/allstudents',      // 路径component: Student,        // 组件名 前提是得引入组件children: [                // 组件嵌套{path: 'student1',  // 嵌套的二级路由不用加斜杠component: Student1},{path: 'student2',component: Student2}]},]
})

七、Vue插件库的使用

以vue-router为例

1.引入插件库

import VueRouter from 'vue-router'

2.应用插件

Vue.use(VueRouter)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/844092.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有趣的css - 列表块加载动效

大家好&#xff0c;我是 Just&#xff0c;这里是「设计师工作日常」&#xff0c;今天分享的是用 css 打造一个极简的列表块加载动效。 最新文章通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页面渲染效果 整…

使用Ollama和Open WebUI管理本地开源大模型的完整指南

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;AI大模型部署与应用专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年5月27日12点20分 &#x1f004;️文章质量&#xff1a;96分 目录 ✨️Open-WebUI介绍 优点 &#x1f4a5;部署教程…

Linux命令 jps(Java Process Status)解释

文章目录 1、第一种解释2、第二种解释3、第三种解释 1、第一种解释 jps 命令本身并不是一个标准的 Unix/Linux 命令&#xff0c;但您可能是想提到 jps 的一个变种或误写了 jps 为 jps&#xff0c;而实际上可能是想提及 jps&#xff08;Java Virtual Machine Process Status To…

Power Bi 自定义进度条,圆角框,矩阵图标的实现

最近项目在做Power BI&#xff0c;我总结了几个常用的自定义样式&#xff0c;分享一下做法。 比如我们要实现如图这样的一个样式&#xff1a; 这包含了一个带文字的自定义进度条&#xff0c;矩阵有树型展开以及图标显示&#xff0c;最外面有圆角框包围。我觉得这几个样式出现…

海云安两大金融案例入编行业典范,七大安全领域实力登榜《2024中国金融网络安全全景图》

近日&#xff0c;数说安全与《中国信息安全》杂志联合编写并发布了《2024年中国金融行业网络安全研究报告》&#xff08;以下简称报告&#xff09;、《2024年中国金融行业网络安全案例集》&#xff08;以下简称案例集&#xff09;、《2024年中国金融行业网络安全市场全景图》&a…

VSCode 报错 之 运行 js 文件报错 ReferenceError: document is not defined

1. 背景 持续学习ing 2. 遇到的问题 在VSCode 右键 code runner js 文件报错 ReferenceError: document is not defined eg&#xff1a; // 为每个按钮添加点击事件监听器 document.querySelectorAll(button).forEach(function (button) {button.addEventListener(click, f…

kafka-守护启动

文章目录 1、kafka守护启动1.1、先启动zookeeper1.1.1、查看 zookeeper-server-start.sh 的地址1.1.2、查看 zookeeper.properties 的地址 1.2、查看 jps -l1.3、再启动kafka1.3.1、查看 kafka-server-start.sh 地址1.3.2、查看 server.properties 地址 1.4、再次查看 jps -l 1…

深入探索C++继承机制:从概念到实践的全面指南

目录 继承的概念及定义 继承的概念 继承的定义 定义格式 继承方式和访问限定符 继承基类成员访问方式的变化 默认继承方式 基类和派生类对象赋值转换 继承中的作用域 派生类的默认成员函数 继承与友元 继承与静态成员 继承的方式 菱形虚拟继承 菱形虚拟继承原理 继承…

【嵌入式】RS485通信+硬件

目录 1.物理层 2.协议层 3.收发电路 3.1三极管开关电路 3.2收发原理图解释 1.物理层 对比 CAN 通讯网络&#xff0c;可发现它们的网络结构组成是类似的&#xff0c;每个节点都是由一个通讯控制器和 一个收发器组成&#xff0c;在 RS-485 通讯网络中&#xff0c;节点中的…

Java基础:异常(三)

Java基础&#xff1a;异常&#xff08;三&#xff09; 文章目录 Java基础&#xff1a;异常&#xff08;三&#xff09;1. Java异常体系1.1 错误的分类1.2 异常的分类 2. 异常的捕获与处理2.1 try-catch2.2 finally 3. 异常的抛出4. 自定义异常 1. Java异常体系 Java的异常体系是…

ubuntu20 安装Anaconda

Anaconda官网&#xff1a;Anaconda | The Operating System for AI 然后就开始下载了。下载完 直接打开终端运行 bash Anaconda3-2024.02-1-Linux-x86_64.sh 按回车ENTER 一直空格&#xff0c;直到 yes&#xff0c;回车 确认安装路径&#xff0c;默认即可&#xff0c;直接回车…

SQL Server定期收缩日志文件详细步骤——基于SQL Server 2012

SQL Server定期收缩日志文件详细步骤 一、环境配置1、查看数据库的属性2、文件设置3、备份模式4、查看收缩配置5、查看收缩选项 二、编写作业计划1、选择新建作业2、常规配置3、步骤4、输入内容5、脚本详解6、新建计划7、输入名称、选择执行时间8、查看测试9、查看测试结果 一、…

【最优化方法】实验四 约束最优化方法的MATLAB实现

实验的目的和要求&#xff1a;通过本次实验使学生较为熟练使用MATLAB软件&#xff0c;并能利用该软件进行约束最优化方法的计算。 实验内容&#xff1a; &#xff11;、罚函数法的MATLAB实现 &#xff12;、可行方向法的MATLAB实现 学习建议&#xff1a; 本次实验就是要通…

国际标准引脚,宽范围工作温度–40℃ 到 105℃,3W 1.5KVDC 隔离单输出 DC/DC 电源模块 ——TPL-3W系列

TPL-3W系列是一款额定功率为3W的隔离产品&#xff0c;国际标准引脚&#xff0c;宽范围工作温度–40℃ 到 105℃&#xff0c;在此温度范围内都可以稳定输出3W&#xff0c;并且效率非常高&#xff0c;高达88%&#xff0c;同时负载调整率非常低&#xff0c;对于有输出电压精度有要…

失落的方舟台服封号的解决方法 怎么避免封号?

失落的方舟台服封号的解决方法 怎么避免封号&#xff1f; 失落的方舟这款游戏是由Smile Gate研发的MMORPG游戏&#xff0c;这款游戏将于5月30日正式开服。游戏采用虚幻3引擎&#xff0c;为玩家们提供了丰富的游戏玩法与精美的游戏画面。游戏的背景是在中世纪&#xff0c;玩家们…

网络原理-------TCP协议

文章目录 TCP协议TCP协议段格式TCP原理确认应答机制 (安全机制)超时重传机制 (安全机制)连接管理机制 (安全机制)滑动窗口 (效率机制)流量控制 (安全机制)拥塞控制 (安全机制)延迟应答 (效率机制)捎带应答 (效率机制) 基于TCP的应用层协议 TCP协议 TCP, 即 Transmission Contr…

C# TcpClient

TcpClient 自己封装的话&#xff0c;还是比较麻烦的&#xff0c;可以基于线程&#xff0c;也可以基于异步写&#xff0c;最好的办法是网上找个插件&#xff0c;我发现一个插件还是非常好用的&#xff1a;STTech.BytesIO.Tcp 下面是这个插件作者的帖子&#xff0c;有兴趣的可以…

Mac连接虚拟机(Linux系统)

1.确定虚拟机的IP地址 ifconfig //终端命令&#xff0c;查询ip地址 sudo apt install net-tools 安装完成后再次执行 ifconfig&#xff1a; 2.安装SSH&#xff08;加密远程登录协议&#xff09; (1).安装OpenSSH服务器软件包&#xff1a; sudo apt-get install openssh-ser…

【惊艳视界】Perfectly Clear Workbench:让您的图像瞬间焕发生机!

在数字化时代&#xff0c;图像已成为我们生活中不可或缺的一部分。无论是摄影爱好者&#xff0c;还是专业设计师&#xff0c;都渴望拥有一款能够轻松提升图像质量的神奇工具。今天&#xff0c;我们为您带来了一款图像清晰处理软件的佼佼者——Perfectly Clear Workbench&#x…

最新!!2024上半年软考【高级】系统分析师 综合知识真题解析

2024上半年软考考试已经结束了&#xff0c;为大家整理了网友回忆版的系统分析师选择题真题及答案&#xff0c;总共30道题。 上半年考试的宝子们可以对答案预估分数&#xff01;准备下半年考的宝子可以提前把握考试知识点和出题方向&#xff0c;说不定会遇到相同考点的题目&…