当前位置： 首页 > news >正文

【VUE】day03-vue过滤器、计算属性、vue-cli、vue组件

news 2025/3/16 16:04:53

【VUE】day03-vue过滤器、计算属性、vue-cli、vue组件

  • 1. 过滤器
  • 2.使用vue.filter定义全局过滤器
  • 3. 使用全局过滤器格式化时间
  • 4. 过滤器的其他用法
  • 5. 侦听器的基本用法
    • 5.1 进入页面就被侦听
  • 6. 计算属性
    • 6.1 了解计算属性的语法和特点
  • 7. axios
  • 8. vue-cli
    • 8.1 安装与使用
    • 8.2 创建一个Vue项目
    • 8.3 项目结构
  • 9.Vue组件
  • 10. 在组件中定义methods方法

1. 过滤器

过滤器(Filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由管道符进行调用，示例代码如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><div id="app"><p>message 的值是：{{ message | capi }}</p></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {message: 'hello vue.js'},// 过滤器函数，必须被定义到 filters 节点之下// 过滤器本质上是函数filters: {// 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值capi(val) {// 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来// val.charAt(0)const first = val.charAt(0).toUpperCase()// 字符串的 slice 方法，可以截取字符串，从指定索引往后截取const other = val.slice(1)// 强调：过滤器中，一定要有一个返回值return first + other}}})</script>
</body></html>

2.使用vue.filter定义全局过滤器

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><div id="app"><p>message 的值是：{{ message | capi }}</p></div><div id="app2"><p>message 的值是：{{ message | capi }}</p></div><script src="./lib/vue-2.6.12.js"></script><script>// 使用 Vue.filter() 定义全局过滤器Vue.filter('capi', function (str) {const first = str.charAt(0).toUpperCase()const other = str.slice(1)return first + other + '~~~'})const vm = new Vue({el: '#app',data: {message: 'hello vue.js'},// 过滤器函数，必须被定义到 filters 节点之下// 过滤器本质上是函数filters: {// 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值capi(val) {// 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来// val.charAt(0)const first = val.charAt(0).toUpperCase()// 字符串的 slice 方法，可以截取字符串，从指定索引往后截取const other = val.slice(1)// 强调：过滤器中，一定要有一个返回值return first + other}}})// ----------------------------------const vm2 = new Vue({el: '#app2',data: {message: 'heima'}})</script>
</body></html>

3. 使用全局过滤器格式化时间

<!-- 只要导入了 dayjs 的库文件，在 window 全局，就可以使用 dayjs() 方法了 --><script src="./lib/dayjs.min.js"></script><script src="./lib/vue-2.6.12.js"></script><script>// 声明格式化时间的全局过滤器Vue.filter('dateFormat', function (time) {// 1. 对 time 进行格式化处理，得到 YYYY-MM-DD HH:mm:ss// 2. 把 格式化的结果，return 出去// 直接调用 dayjs() 得到的是当前时间// dayjs(给定的日期时间) 得到指定的日期const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')return dtStr})

完整的代码

<!DOCTYPE html>
<html lang="en"><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"><title>品牌列表案例</title><link rel="stylesheet" href="./lib/bootstrap.css"><link rel="stylesheet" href="./css/brandlist.css">
</head><body><div id="app"><!-- 卡片区域 --><div class="card"><div class="card-header">添加品牌</div><div class="card-body"><!-- 添加品牌的表单区域 --><!-- form 表单元素有 submit 事件 --><form @submit.prevent="add"><div class="form-row align-items-center"><div class="col-auto"><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">品牌名称</div></div><input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand"></div></div><div class="col-auto"><button type="submit" class="btn btn-primary mb-2">添加</button></div></div></form></div></div><!-- 表格区域 --><table class="table table-bordered table-hover table-striped"><thead><tr><th scope="col">#</th><th scope="col">品牌名称</th><th scope="col">状态</th><th scope="col">创建时间</th><th scope="col">操作</th></tr></thead><tbody><tr v-for="item in list" :key="item.id"><td>{{ item.id }}</td><td>{{ item.name }}</td><td><div class="custom-control custom-switch"><!-- 使用 v-model 实现双向数据绑定 --><input type="checkbox" class="custom-control-input" :id="'cb' + item.id" v-model="item.status"><!-- 使用 v-if 结合 v-else 实现按需渲染 --><label class="custom-control-label" :for="'cb' + item.id" v-if="item.status">已启用</label><label class="custom-control-label" :for="'cb' + item.id" v-else>已禁用</label></div></td><td>{{ item.time | dateFormat }}</td><td><a href="javascript:;" @click="remove(item.id)">删除</a></td></tr></tbody></table></div><!-- 只要导入了 dayjs 的库文件，在 window 全局，就可以使用 dayjs() 方法了 --><script src="./lib/dayjs.min.js"></script><script src="./lib/vue-2.6.12.js"></script><script>// 声明格式化时间的全局过滤器Vue.filter('dateFormat', function (time) {// 1. 对 time 进行格式化处理，得到 YYYY-MM-DD HH:mm:ss// 2. 把 格式化的结果，return 出去// 直接调用 dayjs() 得到的是当前时间// dayjs(给定的日期时间) 得到指定的日期const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')return dtStr})const vm = new Vue({el: '#app',data: {// 用户输入的品牌名称brand: '',// nextId 是下一个，可用的 idnextId: 4,// 品牌的列表数据list: [{ id: 1, name: '宝马', status: true, time: new Date() },{ id: 2, name: '奔驰', status: false, time: new Date() },{ id: 3, name: '奥迪', status: true, time: new Date() },],},methods: {// 点击链接，删除对应的品牌信息remove(id) {this.list = this.list.filter(item => item.id !== id)},// 阻止表单的默认提交行为之后，触发 add 方法add() {// 如果判断到 brand 的值为空字符串，则 return 出去if (this.brand === '') return alert('必须填写品牌名称！')// 如果没有被 return 出去，应该执行添加的逻辑// 1. 先把要添加的品牌对象，整理出来const obj = {id: this.nextId,name: this.brand,status: true,time: new Date()}// 2. 往 this.list 数组中 push 步骤 1 中得到的对象this.list.push(obj)// 3. 清空 this.brand；让 this.nextId 自增 +1this.brand = ''this.nextId++}},})</script>
</body></html>

4. 过滤器的其他用法

1.连续调用多个过滤器
过滤器可以串联地进行调用，例如：
在这里插入图片描述

2.过滤器传参
过滤器本质是JavaScript函数，因此可以接收参数，格式如下：

在这里插入图片描述

5. 侦听器的基本用法

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法格式：
在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><div id="app"><input type="text" v-model="username"></div><script src="./lib/vue-2.6.12.js"></script><script src="./lib/jquery-v3.6.0.js"></script><script>const vm = new Vue({el: '#app',data: {username: 'admin'},// 所有的侦听器，都应该被定义到 watch 节点下watch: {// 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可// 新值在前，旧值在后username(newVal) {if (newVal === '') return// 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！$.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {console.log(result)})}}})</script>
</body></html>

5.1 进入页面就被侦听

通过方法格式的侦听器无法再刚进入页面的时候就自动触发，可以通过immediate选项，让侦听器自动触发。

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><div id="app"><input type="text" v-model="username"></div><script src="./lib/vue-2.6.12.js"></script><script src="./lib/jquery-v3.6.0.js"></script><script>const vm = new Vue({el: '#app',data: {username: 'admin'},// 所有的侦听器，都应该被定义到 watch 节点下watch: {// 定义对象格式的侦听器username: {// 侦听器的处理函数handler(newVal, oldVal) {console.log(newVal, oldVal)},// immediate 选项的默认值是 false// immediate 的作用是：控制侦听器是否自动触发一次！immediate: true}}})</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><div id="app"><input type="text" v-model="info.username"><input type="text" v-model="info.address.city"></div><script src="./lib/vue-2.6.12.js"></script><script src="./lib/jquery-v3.6.0.js"></script><script>const vm = new Vue({el: '#app',data: {// 用户的信息对象info: {username: 'admin',address: {city: '北京'}}},// 所有的侦听器，都应该被定义到 watch 节点下watch: {/* info: {handler(newVal) {console.log(newVal)},// 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”deep: true} */// 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号'info.username'(newVal) {console.log(newVal)}}})</script>
</body></html>

6. 计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：

在这里插入图片描述

<!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><script src="./lib/vue-2.6.12.js"></script><style>.box {width: 200px;height: 200px;border: 1px solid #ccc;}</style>
</head><body><div id="app"><div><span>R：</span><input type="text" v-model.number="r"></div><div><span>G：</span><input type="text" v-model.number="g"></div><div><span>B：</span><input type="text" v-model.number="b"></div><hr><!-- 专门用户呈现颜色的 div 盒子 --><!-- 在属性身上，: 代表  v-bind: 属性绑定 --><!-- :style 代表动态绑定一个样式对象，它的值是一个 {  } 样式对象 --><!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 --><div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">{{ `rgb(${r}, ${g}, ${b})` }}</div><button @click="show">按钮</button></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {// 红色r: 0,// 绿色g: 0,// 蓝色b: 0},methods: {// 点击按钮，在终端显示最新的颜色show() {console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)}},});</script>
</body></html>

6.1 了解计算属性的语法和特点

所有的计算属性，都要定义到 computed 节点之下
计算属性在定义的时候，要定义成“方法格式”

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

<!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><script src="./lib/vue-2.6.12.js"></script><style>.box {width: 200px;height: 200px;border: 1px solid #ccc;}</style>
</head><body><div id="app"><div><span>R：</span><input type="text" v-model.number="r"></div><div><span>G：</span><input type="text" v-model.number="g"></div><div><span>B：</span><input type="text" v-model.number="b"></div><hr><!-- 专门用户呈现颜色的 div 盒子 --><!-- 在属性身上，: 代表  v-bind: 属性绑定 --><!-- :style 代表动态绑定一个样式对象，它的值是一个 {  } 样式对象 --><!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 --><div class="box" :style="{ backgroundColor: rgb }">{{ rgb }}</div><button @click="show">按钮</button></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {// 红色r: 0,// 绿色g: 0,// 蓝色b: 0},methods: {// 点击按钮，在终端显示最新的颜色show() {console.log(this.rgb)}},// 所有的计算属性，都要定义到 computed 节点之下// 计算属性在定义的时候，要定义成“方法格式”computed: {// rgb 作为一个计算属性，被定义成了方法格式，// 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串rgb() {return `rgb(${this.r}, ${this.g}, ${this.b})`}}});console.log(vm)</script>
</body></html>

7. axios

axios是一个专注于网络请求的库！
axios的基本语法如下：

在这里插入图片描述

axios的使用

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><script src="./lib/axios.js"></script><script>// http://www.liulongbin.top:3006/api/getbooks// 1. 调用 axios 方法得到的返回值是 Promise 对象axios({// 请求方式method: 'GET',// 请求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查询参数params: {id: 1},// 请求体参数data: {}}).then(function (result) {console.log(result)})</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><button id="btnPost">发起POST请求</button><button id="btnGet">发起GET请求</button><script src="./lib/axios.js"></script><script>document.querySelector('#btnPost').addEventListener('click', async function () {// 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！// await 只能用在被 async “修饰”的方法中const { data } = await axios({method: 'POST',url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}})console.log(data)})document.querySelector('#btnGet').addEventListener('click', async function () {// 解构赋值的时候，使用 : 进行重命名// 1. 调用 axios 之后，使用 async/await 进行简化// 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来// 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }const { data: res } = await axios({method: 'GET',url: 'http://www.liulongbin.top:3006/api/getbooks'})console.log(res.data)})// $.ajax()   $.get()  $.post()// axios()    axios.get()    axios.post()    axios.delete()   axios.put()</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><button id="btnGET">GET</button><button id="btnPOST">POST</button><script src="./lib/axios.js"></script><script>document.querySelector('#btnGET').addEventListener('click', async function () {/* axios.get('url地址', {// GET 参数params: {}}) */const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {params: { id: 1 }})console.log(res)})document.querySelector('#btnPOST').addEventListener('click', async function () {// axios.post('url', { /* POST 请求体数据 */ })const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })console.log(res)})</script>
</body></html>

8. vue-cli

首先介绍一个名词叫单页面应用程序。简称SPA，顾名思义指的是一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在唯一的一个页面完成。

什么是vue-cli ?
vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。

8.1 安装与使用

(base) ➜  ~ node -v
v12.22.12
(base) ➜  ~ npm -v
6.14.16(base) ➜  ~ npm install -g @vue/clinpm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
npm WARN deprecated apollo-server-express@3.13.0: The `apollo-server-express` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-core@3.13.0: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
/Users/fanzhen/.nvm/versions/node/v12.22.12/bin/vue -> /Users/fanzhen/.nvm/versions/node/v12.22.12/lib/node_modules/@vue/cli/bin/vue.js> @apollo/protobufjs@1.2.7 postinstall /Users/fanzhen/.nvm/versions/node/v12.22.12/lib/node_modules/@vue/cli/node_modules/@apollo/protobufjs
> node scripts/postinstall> @apollo/protobufjs@1.2.6 postinstall /Users/fanzhen/.nvm/versions/node/v12.22.12/lib/node_modules/@vue/cli/node_modules/apollo-reporting-protobuf/node_modules/@apollo/protobufjs
> node scripts/postinstall+ @vue/cli@5.0.8
added 827 packages from 499 contributors in 14.984s======================================================================================================================(base) ➜  ~  vue --version
@vue/cli 5.0.8

(base) ➜  ~ npm fund
/Users/fanzhen
├─┬ https://opencollective.com/express
│ └── express@4.21.2
├─┬ https://tidelift.com/funding/github/npm/loglevel
│ └── loglevel@1.9.2
├─┬ https://tidelift.com/funding/github/npm/sockjs-client
│ └── sockjs-client@1.6.1
├─┬ https://github.com/sponsors/ljharb
│ └── deep-equal@1.1.2, is-arguments@1.2.0, is-date-object@1.1.0, is-regex@1.2.1, object-is@1.1.6, regexp.prototype.flags@1.5.4, call-bound@1.0.4, has-tostringtag@1.0.2, get-intrinsic@1.3.0, function-bind@1.1.2, gopd@1.2.0, has-symbols@1.1.0, call-bind@1.0.8, define-properties@1.2.1, define-data-property@1.1.4, has-property-descriptors@1.0.2, functions-have-names@1.2.3, qs@6.13.0, side-channel@1.1.0, object-inspect@1.13.4, side-channel-list@1.0.0, side-channel-map@1.0.1, side-channel-weakmap@1.0.2, minimist@1.2.8
├─┬ https://github.com/sponsors/feross
│ └── safe-buffer@5.2.1
├─┬ https://www.patreon.com/feross
│ └── safe-buffer@5.2.1
├─┬ https://feross.org/support
│ └── safe-buffer@5.2.1
├─┬ https://paulmillr.com/funding/
│ └── async-each@1.0.6
├─┬ https://github.com/sponsors/sindresorhus
│ └── component-emitter@1.3.1, merge-descriptors@1.0.3, p-limit@2.3.0
├─┬ https://github.com/sponsors/isaacs
│ └── glob@7.2.3
├─┬ https://github.com/sponsors/RubenVerborgh
│ └── follow-redirects@1.15.9
└─┬ https://github.com/sponsors/epoberezkin└── ajv@6.12.6

8.2 创建一个Vue项目

(base) ➜ ~ npm config get registry
https://registry.npmmirror.com/

vue create 项目的名称

脚手架文章

8.3 项目结构

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9.Vue组件

vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

vue 组件的三个组成部分

  1. template -> 组件的模板结构
  2. script -> 组件的 JavaScript 行为
  3. style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。
在这里插入图片描述

注意组件中的data必须是函数
在这里插入图片描述
在这里插入图片描述

10. 在组件中定义methods方法

<template><div><div class="test-box"><h3>这是用户自定义的 Test.vue --- {{ username }}</h3><button @click="changeName">修改用户名</button></div><div>123</div></div>
</template><script>
// 默认导出。这是固定写法！
export default {// data 数据源// 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。// 注意：组件中的 data 必须是一个函数data() {// 这个 return 出去的 { } 中，可以定义数据return {username: 'admin'}},methods: {changeName() {// 在组件中， this 就表示当前组件的实例对象console.log(this)this.username = '哇哈哈'}},// 当前组件中的侦听器watch: {},// 当前组件中的计算属性computed: {},// 当前组件中的过滤器filters: {}
}
</script>// 启用less语法
<style lang="less">
.test-box {background-color: pink;h3 {color: red;}
}
</style>

http://www.mrgr.cn/news/94571.html

相关文章：

  • Web元件库 ElementUI元件库+后台模板页面（支持Axure9、10、11）
  • 蓝桥杯Python赛道备赛——Day5：算术（一）（数学问题）
  • 网络协议栈
  • 【动态规划】- 线性dp
  • SSO单点登录
  • 011【fate/extra link】【概率论与数理统计】大数定律与中心极限定理 ，数理统计的基本概念，常用的统计三大分布，正态总体的抽样分布定理
  • 理解C++值类别(lvalue, rvalue, prvalue, xvalue)
  • 【C++】—— 一篇文章解决面试 继承菱形继承
  • 深入理解Linux网络随笔（七）：容器网络虚拟化--Veth设备对
  • 共享内存通信效率碾压管道？System V IPC原理与性能实测
  • Lora本地微调实战 --deepseek-r1蒸馏模型
  • 代码随想录刷题有感
  • SpringMVC （二）请求处理
  • Go语言对于MySQL的基本操作
  • 【后端开发面试题】每日 3 题（十三）
  • 图解AUTOSAR_CP_BSW_General
  • Python软件和搭建运行环境
  • [多线程]基于单例懒汉模式的线程池的实现
  • Centos7使用docker搭建redis集群
  • Java 大视界 -- Java 大数据中的异常检测算法在工业物联网中的应用与优化（133）