【VUE】day03-vue过滤器、计算属性、vue-cli、vue组件
【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 组件的三个组成部分
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- 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>