vue2基本启动项目选项详解

vscode-icons 图标显示
jquery 是用来简化 DOM 操作的
vue 是一款更优秀的框架

nodejs：包管理工具 --- jar
下载依赖用的
写 vue 的代码，必须得有 nodejs
nodejs 最好下载 14、16

 

npm install *** -g/-D
-g: 全局安装：依赖下载到你的电脑里面（占用磁盘空间）一直存在
-D: 开发时依赖：依赖只存在你当前的项目中。

 

包管理工具：npm、cnpm、yarn、pnpm

 

yarn：是 npm 的一个进阶，它比 npm 优秀，解决了 npm 的一些问题

cnpm install ***

babel: 它可以把 es6 以及之后的代码转为 es5

 

 css 预处理器: less、sass 就是 css 的高级写法

 

package.json 类似于 maven 中的 pom.xml

 

 

src下：
assets：静态资源，一般放图片
components：组件，公共组建（解耦）---- 一个东西到处用，可以省着重复去写了
router：路由 vue-router
store：vuex 状态管理

views：页面，视图
App.vue：根组件

mian.js:入口文件

registerserviceWorker.js：处理一些网络请求方面的

 

.gitignore:git 忽略文件 git 上传项目的话，有些文件是不需要上传

babel.config.js: 依兼容的，它可以把 es6 以及之后的代码转为 es5，这样的话绝大多数浏览器就支持了
package.json: 依赖

README.md：说明文档，说明这个项目。书写项目各种说明

 

 

 

 

 

 

 

public 静态文件夹

　　favicon.ico 网站图标

　　index.html 页面入口文件

注：可以把images文件夹放在public中必须使用绝对路径引用这些文件background-image: url('/search2.png')

　　也可以把images文件夹放在public中只支持相对路径形式。<img src="@/assets/logo.png" alt="">

　　public建议放一些外部第三方，自己的文件放在assets，别人的放public中public放别人家js文件(也就是不会变动)，assets放自己写的js文件

 

src 核心项目代码

　　assets 存放静态资源

　　components 存放组件

　　App.vue 根组件

　　mainjs入口js文件

.gitignore git忽略文件

 

 

在使用 Vue CLI 创建项目选择功能特性时，具体选择取决于项目需求：
常规项目
Babel：必选。它能将 ES6+ 等新语法转换为浏览器可识别的 ES5 等旧语法，确保代码在不同浏览器兼容性良好。
Router：如果项目涉及多页面切换、路由管理，如单页应用（SPA），需勾选。它可实现不同视图间的切换和导航，像 Vue Router 能方便管理页面路由。
CSS Pre - processors：推荐选。可使用 Sass、Less 等预处理器，以更高效、灵活的方式编写 CSS，如使用变量、混合等功能，提升样式代码的可维护性。
Linter / Formatter：建议选。能规范代码格式和语法，及时发现潜在错误和不规范写法，提升代码质量和团队协作规范性，常见的有 ESLint 结合 Prettier。
复杂或大型项目
Vuex：当项目组件间数据交互复杂，存在多组件共享、管理数据需求时（如电商应用中购物车数据等），需勾选。它是 Vue 的状态管理模式，方便集中管理和操作数据。
Unit Testing：如果注重代码质量，想对组件、函数等进行单元测试，保证功能正确性，可勾选。比如用 Jest、Mocha 等测试框架结合 Vue Test Utils 来测试 Vue 组件。
E2E Testing：对于大型项目，希望从用户角度对整个应用进行端到端测试，模拟真实用户操作流程来验证功能，可勾选。像 Cypress、Nightwatch 等工具可用于 E2E 测试。
特定场景
Progressive Web App (PWA) Support：若要将 Web 应用打造成具备类似原生应用特性（如离线可用、添加到主屏幕等）的渐进式 Web 应用，就勾选此项。
TypeScript：若团队熟悉 TypeScript，或项目规模大、对代码类型检查要求高，以增强代码的可读性、可维护性和健壮性，可勾选。它是 JavaScript 的超集，增加了类型系统。

 这里一般这样选，后面一直按回车

 

 

 

 

 

 

 

1. 进入项目路劲
cd shop
cd：不加参数，回到当前用户家目录
cd ..：返回当前文件夹上一级目录
2. 启动项目
npm run serve
或：Yarn serve
3. 查看已启动的项目

 

1. 访问 main.js
main.js 是项目的入口文件，项目中所有的页面都会加载 main.js, 主要有三个作用:
① 实例化 Vue。
② 放置项目中经常会用到的插件和 CSS 样式。例如：网络请求插件:axios 和 vue-resource
图片懒加载插件: vue-lazyload
③ 存储全局变量。
・import {createApp} from 'vue'
・import App from './App.vue'
・import './registerServiceWorker'
・import router from './router'
・import store from './store'
・createApp (App).use (store).use (router).mount ('#app')

 

2. 访问 App.vue
App.vue 是 vue 页面资源的首加载项，是主组件，页面入口文件，所有页面都是在 App.vue 下进行切换的；
app.vue 中不但可以当做是网站首页，也可以写所有页面共同样式

<template>
<!--相当于a标签,to="地址"-->
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>|
<router-link to="/index">index</router-link>
</nav>
<!--router-view:展示路由对应的组件内容 对应index.js-->
<router-view/>
</template>

 

3. 访问 router/index.js（这是配置的一个路由信息）
指定页面的跳转
import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
//which is lazy-loaded when the route is visited.
component: () => import ('../views/AboutView.vue')
}
]
const router = createRouter ({
history: createWebHistory (process.env.BASE_URL),
routes
})
export default router

4.HomeView.vue
根据 router/index.js 设定的’/’，跳转到 HomeView.vue 页面
5.public/index.htm 中显示出上面所有结果

 

• main.js, App.vue, index.html 之间的关系
• index.html--- 主页，项目入口
• App.vue--- 根组件
• main.js--- 入口文件
• 网页的 Title 部分，加载了 index.html 中定义的 Title,
• 正文部分，加载了 App.vue 中定义的部分

 

 

1、Vue2、3 模板语法

• Vue3 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
• Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
• 结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

 scripts里面可以看到serve是启动口令 build是打包口令

 

 

 

2、Vue基本页码结构

<template>
<div class="home">
</div>
</template>

页面显示

 

<script>
export default {
name: 'HomeView',
// 定义数据
data() {
return {counter: 1}
},

定义变量

methods: {
counterAdd() { this.counter += 1 }
},

定义自定义方法

// 定义常规方法
computed:{ //计算属性
},

定义计算属性方法

watch:{ //监听属性
}

定义监听方法
}
</script>

 

 

 

 

 

 

 

 

 

两部分

1. 数据
2. 逻辑

展示数据

• v-html: 可以将一个字符串解析为 html 标签并渲染到模板中，主要用来渲染富文本内容，并且存在 XSS 攻击风险。
• v-text: 将数据绑定到模板中，它会替换目标元素的文本内容，防止 XSS 攻击，并且会对 HTML 标签进行转义。
• {{}}: 插值表达式，最常用，渲染数据的，并且会对 HTML 标签进行转义。

 

 

 

 

在 Vue 中，v - html、v - text和{{}} 都是用于数据展示的方式，它们的区别如下：

功能

• v - html：用于输出 HTML 代码，它会将绑定的数据当作 HTML 代码进行解析和渲染。比如 <div v - html="htmlContent"></div> ，若 htmlContent 为 <p>这是一段 <strong>加粗</strong> 文本</p> ，最终在页面上会显示为一段包含加粗效果的文本 。
• v - text：将数据作为纯文本插入到元素中，会替换元素原有的文本内容。比如 <p v - text="message"></p> ，若 message 是 "Hello World" ，那么 <p> 标签内就只会显示 "Hello World" ，不会解析其中的 HTML 标签。
• {{}}：即文本插值，也是用于显示数据，会把 data 中对应属性值以文本形式展示。如 <span>{{msg}}</span> ，会将 msg 对应的值显示在 <span> 标签内 ，同样不会解析 HTML 标签，若 msg 是 "<p>测试</p>"，展示出来就是"<p>测试</p>" 。

安全性

• v - html：由于会解析并执行 HTML 代码，如果数据来源不可信，可能会导致跨站脚本攻击（XSS） ，使用时需确保内容安全可信。
• v - text：只插入纯文本，不会解析 HTML 标签，安全性较高，适合展示用户输入的未经验证的数据。
• {{}}：和v - text类似，将数据解释为纯文本插入，对 HTML 特殊字符会自动转义，能避免 XSS 攻击 。

其他差异

• v - html：会覆盖元素原有的内容。
• v - text：同样会覆盖元素原有的文本内容 ；在页面加载时不会像{{}} 那样出现闪烁（网络不佳等情况下，{{}} 可能会先显示{{undefined}} ，之后再替换为真实数据 ）。
• {{}}：不会覆盖标签原有的内容，只是替换插值位置的内容 。

 

 

v-html：输出 html 代码:

html

<template>
  <div class="home">
    <p v-html="rawHtml"></p>
  </div>
</template>
<script>
export default {
  name: 'HomeView',
  // 定义数据
  data() {
    return {
      rawHtml:"<span style='color: red'>这里会显示红色！</span>"
    } 
  }
}
</script>

 

文本插值 {{...}}

• 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值，vue 实例中数据发生变化则，{{...}} 中自动更新
  • <p> msg= {{ msg }}</p>
• 如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新
  • 如：<span v-once>这个将不会改变: {{ message }}</span>

JavaScript 表达式

• 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
  {{number + 1}}
  {{ isLogin? 'True' : 'False' }}
  {{ message.split ('').reverse ().join ('') }}

split ('')拼接

reverse ()反转

join ('')拼接

 

 

14.4.1 计算属性（函数式）

　　计算属性有一个缓存的机制：就是计算属性依赖的值不发生改变，计算属性就不会发生计算

• 使用模板内的表达式计算并显示数据非常便利，但是在模板中放入太多的逻辑会让模板难以维护。

html 

<div id="computedProperty">
  <p>翻转：{{ message.split('').reverse().join('') }}</p>
  <p>计算属性实现:{{ reversedMessage }}</p>
</div>

javascript

data() {
  return {
    message:"Hello"
  } 
},
computed:{
  reversedMessage () {
    return this.message.split('').reverse().join('')
  }
}

 

 

 

 

14.4.2 监听器

• 虽然计算属性在大多数情况下更合适，但有时也需要一个监听器来响应数据的变化。Vue 通过 watch 选项提供监听数据属性的方法（方法名与属性名相同），来响应数据变化。

html

<input v-model="uname">

监听 uname 的值，只要发生改变，则执行监听器中的方法

javascript

data() {
  return {
    uname:""
  }
},
watch:{
  uname(newName,oldName){
    console.log(oldName),
    alert(oldName+newName)
  }
}

computed 适用于一些简单的情况，
watch 使用于一些比较复杂的情况，以及侦听的情况

方法和 computed 的区别

1. computed 有缓存机制，而且它是一个属性
2. 方法，还是一个函数，需要去调用FUN ()

 

 

 

 

 

 

图片显示问题

• public 下的图片用绝对路径来访问（比如下 public 下的 img 中有一张图片 1.jpg）
  • src="/img/1.jpg "
• 如果要访问动态的图片则用如下写法:
  • <img :src="`/img/${pic}`"> ，pic: " 1.jpg"
• 存于 assets 中的图片用相对路径来访问 (比如下 assets 下的 img 中有一张图片 1.jpg)
  • src="@/assets/img/1.jpg"（@就相当于 src）
  • src="../assets/img/1.jpg "
  • let pic = "1.jpg"
  • <img :src="require('../assets/images/a/${pic}')">

 

 

 

v-bind 指令

• 在 HTML 元素的属性中不能使用表达式动态更新属性值。幸运的是，Vue.js 提供了 v-bind 指令绑定 HTML 元素的属性，并可动态更新属性值。

html

<div id="app">
  <a v-bind:href="myurl.baiduUrl">去百度</a>
  <img v-bind:src="myurl.imgUrl"/>
  <!-- v-bind:可缩写为":" -->
  <a :href="myurl.baiduUrl">去百度</a>
  <img :src="myurl.imgUrl"/>
</div>
<script src="js/vue.global.js"></script>

javascript

data() {
  return {
    myurl: {
      baiduUrl: 'https://www.baidu.c',
      imgUrl:'/images/ok.png'
    }
  }
}

• 使用 v-bind 指令动态绑定了链接的 href 属性和图片的 src 属性，当数据变化时，href 属性值和 src 属性值也发生变化，即重新渲染。

 

 

var、let、const

我们先说，它是来干什么用的，也可以说是共同点：都可以声明变量
我们再来说它们之间的区别

• 区别一：var 具有变量提升的机制，let 和 const 没有
• 区别二：var 可以多次声明同一个变量，let 和 const 不可以
• 区别三：var、let 声明变量，const 声明常量（也就是不去改变，固定住），也就是 var 和 let 声明的变量可以再次赋值，但是 const 是不可以的

　　我们以这三点为中心，展开说一下

　　还记得变量提升吗，这里说的是 var 的变量提升，理解变量提升的前提是理解作用域，具体的我就不在这里说了
我们要知道，变量提升是一个语法的缺陷，我们为了解决这个缺陷，就会用 let

 const obj不能改变 obj 但是可以改变obj里面的某个属性obj.age

 

 

 

 

 

 

模板字面量：

• `` 的核心用法就是在 js 代码中做字符串拼接
• let varA = 'world';
• let hello = 'hello'+ varA + '!';
• 使用 ` 可通过与 $() 组合简化写法
• let varA = 'world';
• let hello = `hello ${varA}!`;

 

 

 

 

 

 

 

• input: 输入事件
  • blur: 失去焦点
  • focus: 获得焦点
  • change: 内容改变
  • input: 输入内容
• <input type="text" placeholder="请输入电话号码" v-model= "tel" @blur="handleBlur" @input="handleInput">

 

html

<input type="text" placeholder="请输入电话号码" v-model= "tel" @blur="handleBlur" @input="handleInput">

 avascript

tel:""
handleBlur(){
  if(!this.tel){
    alert("手机号码不能为空")
  } 
},
handleInput(){
  if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){
    alert("手机号码格式有误")
  } 
}

 eg:

 

 

 

特殊变量 $event 访问原生的 DOM 事件

• Vue.js 用特殊变量 $event 访问原生的 DOM 事件，例如下面的实例阻止打开链接。

html

<a href="https://www.baidu.com/" @click="warn('考试期间禁止百度！', $event)">去百度</a>

javascript

methods: {
    warn(message, event) {
        //event访问原生的DOM事件
        event.preventDefault()
        alert(message)
        console.log(event)
    }
}

• 在事件处理中调用 event.preventDefault () 或 event.stopPropagation () 是非常常见的需求。尽管可以在方法中轻松实现这类需求，但方法最好只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

 

 message对应的是'考试期间禁止百度'

event对应的是$event

 

 

 

事件修饰符

为解决该问题，Vue.js 为 v - on 提供了事件修饰符。修饰符是由点开头的指令后缀表示。Vue.js 支持的修饰符有.stop、.prevent、.capture、.self、.once 以及.passive。用法是在 @绑定的事件后加小圆点 “.”，再跟修饰符。

html

<!-- 阻止单击事件 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>

html

<!-- 当事件在该元素自身触发时触发回调，即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>
<!-- 只触发一次 -->
<a @click.once="doThis"></a>
<!-- 滚动事件的默认行为（即滚动行为）将会立即触发，而不会等待“onScroll”完成 -->
<div @scroll.passive="onScroll">...</div>

 

条件渲染指令 v-if（判断元素是否显示在页面上）

• v-if 指令
• 与 JavaScript 的条件语句 if、else、else if 类似，Vue.js 的条件指令也可以根据表达式的值渲染或销毁元素 / 组件。

html

<div id="event-handling">
  <div v-if="score >= 90">优秀</div>
  <div v-else-if="score >= 80">良好</div>
  <div v-else-if="score >= 70">中等</div>
  <div v-else-if="score >= 60">及格</div>
  <div v-else>不及格</div>
</div>

html

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else 元素必须紧跟在 v-if 或者 v-else-if 元素后面；v-else-if 必须紧跟在 v-if 或者 v-else-if 元素后面。
条件渲染指令必须将它添加到一个元素上。但是如果想包含多个元素呢？此时可以使用<template>元素（模板占位符）帮助我们包裹元素，并在上面使用 v-if。最终的渲染结果将不包含<template>元素。

页面不显示文字

 页面显示文字，点击按钮，文字消失

 页面显示文字，点击按钮文字消失，再次点击按钮文字显示

 这三个必须紧挨着。

页面显示 哈 ，点击按钮之后显示 呵

 

 

 

 

 

 

v-show 指令

v-show 指令的用法基本与 v-if 一样，也是根据条件展示元素，例如：

html

<h1 v-show="yes">一级标题</h1>

不同的是，v-if 每次都会重新删除或创建元素，而带有 v-show 的元素始终会被渲染并保留在 DOM 中，只是切换元素的 display:none 样式。
所以，v-if 有更高的切换消耗，而 v-show 有更高的初始渲染消耗。
因此，如果需要频繁切换，v-show 较好；如果在运行时条件不大可能改变，v-if 较好。
另外，v-show 不支持<template>元素，也不支持 v-else。

 

 

演示 v-if 与 v-show 的区别

html

<div id="event-handling">
  <div v-if="flag">一直显示</div>
  <div v-show="flag">反复无常</div>
  <button @click="flag=!flag">隐藏/显示</button>
</div>
<script>
data() {
  return {
    flag: true
  }
}
</script>

通过 v-if 控制的元素，如果隐藏，从 DOM 中移除。而通过 v-show 控制的元素并没有真正移除，只是给其添加了 CSS 样式：display:none。

 页面显示 哈  呵，点击按钮后都消失了

在控制台Elements可以看到

 v-if写的代码删除了

v-show给其添加了 CSS 样式：display:none

 

 

 

 

 

 

列表渲染指令 v-for

可以使用 v-for 指令遍历一个数组或对象，它的表达式需结合 in 来使用，形式为 item in items，其中 items 是源数据，而 item 是被迭代集合中元素的别名。v-for 还支持一个可选的参数作为当前项的索引。

1. 遍历普通数组

html

<ul>
  <li v-for= "(item,index) in items" :key="id">
    {{index}} - {{ item }}
  </li>
</ul>

2. 遍历对象数组

html

<ul>
  <li v-for="user in users">
    {{ user.uname }}
  </li>
</ul>

3. 遍历对象属性

html

<li v-for="(value, key, index) in myObject">
  {{ ++index }}. {{ key }}: {{ value }}
</li>

4. 迭代数字

html

<li v-for="i in 100">
  {{ i }}
</li>

Key: 表示属性名称 --uname

 通常情况下key:id后端给的id

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<form>
  用户名: <input type="text" v-model.lazy.trim="uname" placeholder="请输入用户名"><br>
  性别: <input type="radio" v-model="sex" value="男">男
  <input type="radio" v-model="sex" value="女">女<br>
  地址: <select v-model="address">
    <option value="">请选择…………</option>
    <option value="大连">大连</option>
    <option value="北京">北京</option>
  </select><br>
</form>

 

【例 14-10】v-model 指令在表单元素上实现双向数据绑定

默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。如果不想在每次 input 事件触发后同步，可以添加 lazy 修饰符，从而转为在 change 事件后进行同步。

html 

<!-- 在“change”时更新 -->
<input v-model.lazy="msg"/>
加.lazy意思是：数据变动频繁，以最后一次的为准

如果需要将用户的输入值自动转为数值类型，可以给 v-model 添加 number 修饰符。

html

<input v-model.number="age" type="number" />
加.namber意思是里面是能是一个数字

如果需要将用户输入的首尾空格自动去除，可以给 v-model 添加 trim 修饰符。

html

<input v-model.trim="msg" />

　　加.trim的意思是去掉空格

 

 

 

表单与 v-model（双向绑定）

• 表单用于向服务器传输数据，较为常见的表单控件有：单选、多选、下拉选择、输入框等，用表单控件可以完成数据的录入、校验、提交等。Vue.js 用 v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定（Model 到 View 以及 View 到 Model ）。使用 v-model 指令的表单元素将忽略该元素的 value、checked、selected 等属性初始值，而是将当前活动的 Vue 实例的数据作为数据来源。所以，使用 v-model 指令时，应通过 JavaScript 在 Vue 实例的 data 选项中声明初始值。
• 从 Model 到 View 的数据绑定，即 ViewModel 驱动将数据渲染到视图；从 View 到 Model 的数据绑定，即 View 中元素上的事件被触发后导致数据变更将通过 ViewModel 驱动修改数据层。

 

 

 

 

 

v-on 指令

• 可以用 v-on 指令给 HTML 元素添加一个事件监听器，通过该指令调用在 Vue 实例中定义的方法。

html

<h1>v-on功能演示</h1>
<button v-on:click="handleCounter(5, $event)">数量+5</button>
<button @click="handleCounter(10, $event)">数量+10</button>
<p>counter={{ counter }}</p>

 

javascript

counter: 1
handleCounter(num, e) {
  this.counter += num,
  console.log(e) 
}

 

 

 

样式绑定 style 和 class

使用:style 和:class 实现样式的动态绑定。

html

//应用一个样式
<div v-bind:style="s1">大连市</div>
//多用样式
<div v-bind:style="[s1,s2]">大连外国语大学</div>
<div v-bind:class="sty">大连外国语大学</div>
<button @click="handelSty">改变样式</button

javascript

data() {
  return {
    n:0,
    s1: { color: 'green' },
    s2: { fontSize: '30px' },
    sty:"c1"
  }
},
handelSty(){
  if(this.n==0){
    this.sty="c2"
    this.n=1
  }else{
    this.sty="c1"
    this.n=0
  }
}

css

.c1{
  font-size: 20px;
  color: red;
}
.c2{
  font-size: 30px;
  color: rgb(25, 0, 255);
}

 显示绿色点击之后显示红色

 

 

 

 

 

 

绑定 class 的几种方式

html

<div id="vbind-class">
  <div :class="mycolor">对象语法</div>
  <div class="static" :class="{ 'active': isActive, 'text-danger': hasError }">在对象中传入更多字段</div>
  <div :class="[activeClass, errorClass]">数组语法</div>
  <div :class="[isActive ? activeClass : '', errorClass]">数组中使用三元表达式</div>
  <div :class="[{ 'active': isActive }, errorClass]">数组中嵌套对象</div>
</div>

javascript

data() {
  return {
    mycolor: 'my',
    isActive: true,
    hasError: false,
    activeClass:'your',
    errorClass:'his'
  }
}

html

<div id="vbind-class" data-v-app>
  <div class="my">对象语法</div>
  <div class="static active">在对象中传入更多字段</div>
  <div class="your his">数组语法</div>
  <div class="your his">使用三元表达式</div>
  <div class="active his">数组中嵌套对象</div>
</div>

 

 

14.4 组件

• 组件（Component）是 Vue.js 最核心的功能，是可扩展的 HTML 元素（可看作自定义的 HTML 元素），是封装可重用的代码，同时也是 Vue 实例，可以接受与 Vue 相同的选项对象并提供相同的生命周期钩子。
• 组件系统是 Vue.js 中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。这种前端组件化，方便 UI 组件的重用。

 .vue 的文件，就是一个组件，每个.vue 文件就是每个页面

 

html 的时候，每个页面都是一个 html
vue2 和 vue3 的生命周期钩子是不同的
components：常用的组件，公共的组件（比如你有一个列表，每个页面都用的就放这里）
views：用来存放页面的（单独一个用）

@：是路径别名。（在jsconfig.json文件中说明）

 

 

单文件组件

1. 创建一个组件，任何一个 vue 页面都可以是组件，把组件放在 component 中，如 MyComponent.vue
2. 在其他 vue 页面中导入 (ComponentView.vue)
   • 2.1 导入组件

javascript

import MyComponent from '@/components/MyComponent.vue';

• 2.2 注册组件

javascript

components:{  MyComponent }

 

• 2.3 使用组件

html

<my-component msg="我是给组件传值的" ></my-component>
<MyComponent msg="组件也可以这样用"></MyComponent>

 

 

 

 

 

 

单文件组件

1. 创建组件

任何一个 vue 页面都可以是一个组件

html

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<style scoped>
</style>

父组件

html

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

 

 

 

组件传参：父组件传值给子组件

• 在子组件中，在 props 中定义外界参数

javascript

 props: {

  msg:{type:String,
  default:"默认初始值"
  },
  uname:String
}

• 在父组件中：

html

<my-component msg="我是给组件传值的" uname="zhangsan"></my-component>

注意：父组件中的参数名必须和子组件中的参数名称一致

html

<MyComponent :msg="massage" ></MyComponent>

javascript

data() {
  return {
    massage:"动态传值"
  }
},

 

:msg: 表示动态绑定，"" 中的表示是一个变量

 

 

组件传参：子组件传值给父组件

通过自定义事件 (emit) 实现传值的

在子组件中

1. 定义一个 click 事件

html

<button @click="sendToFather">点击传值</button>

2. 实现 click 对应方法

javascript

sendToFather() {
  // 参数1：字符串,用户自定义,给父组件使用的事件名称
  // 参数2: 子组件要传递给组件的数据
  //固定写法
  this.$emit("onEvent", this.message)
}

 

message: "传递给父组件的消息"
message 是在 data 中定义的变量

 

 

 

 

 

 

 

 

• $emit 传递多个参数
• 将要传的数据放到对象中，再将对象传给父组件

子组件

html

<button @click="sendMulti">点击传值</button>

javascript

user:{
  uid:201,
  uname:"lisi"
}
sendMulti(){
  this.$emit("getUser",this.user)
}

父组件

html

<MyComponent @getUser="getUser" />
{{ user.uname }}{{ user.uid }}

javascript

user:{}
getUser(data){
  this.user=data
}

 

 

 

组件之间的操作详细步骤：

新建文件夹components

 新建文件Children.vue

 这样写

 这个页面这样写

 把Children.vue引入到App.vue当中

import Children from './components/Children.vue';

或者

import Children from '@/components/Children.vue';

(@：是路径别名。（在jsconfig.json文件中说明）)

 注册组件：components: {Children },

 使用组件：

<Children></Children>

 我现在想在 app.vue 中给 children.vue 中进行一个的传值操作

1、父组件向子组件进行传值：props

第一步：在Children上面加一个动态绑定的值

:msg="message"

第二部：在data(){return{ 这里}}，进行声明

message:'这是App.vue父组件的值'

完成这两步父组件已经完事了，剩下在是子组件进行一个接受

 第三步：在子组件里面定义一个props

props{}

第四步：传值 

传那个值？传的是msg这个动态的，这里面能写message应该写 : 后面（v-bind）绑定的值

 把这个值写到props:{}里面

 他是个对象，他有两个值：

type:传这个值是什么类型的。这里是字符串类型的我们给他一个String

default:''意思是如果父组件没有传过来值，这里给他 一个默认的值。在这里我们这样写default:'这是默认的值'

 最后，因为是动态的值，所以这里改成这样：

 2、子组件向父组件进行传值：emit（自定义事件）

第一步：创建一个自定义事件。这里创建一个点击事件

 <button @click="emit">子组件向父组件进行传值</button>

 第二步：在methdos：{}里面定义这个事件，在传两个参数

第一个参数“hhh”是：自定义事件的名字。第二个参数“子组件向父组件传值”是：传的值。

  emit(){ this.$emit('hhh',"子组件向父组件传值")}

 这个自定义事件在哪里去写呢，这时候返回我们的App.vue

 

 

 

 

 

 

 

 

 

 

 

 

 

 

14.5 组合式 API

Vue3 组合式 API（Composition API）主要用于在大型组件中提高代码逻辑的可复用性。

传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。

Vue3 使用组合式 API 的地方为 setup。

在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。

因此，组合式 API（Composition API）允许我们编写更有条理的代码。