7.Vue常用属性
1. data:数据属性
在之前的学习中我们已经了解到了data，属性中存放的就是js变量
<script>
new Vue({
el: '#app',
// data
data: {
username:'',
},
})
</script>
2. methods:方法属性
存放组件中的自定义方法
<script>
new Vue({
el: '#app',
data: {
username:'',
},
// 方法
methods: {
handler() {
axios.get('https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=2&k=8222481').then(res=>{
console.log(res.data);
this.username = res.data().username
})
}
} })
</script>
3.computed:计算属性
计算属性中存放的也是函数，但是可以当做属性值使用，也就是当做普通变量使用，但是注意一定要将数据return出去
特点：
- 当做属性使用
- 有缓存，当关联的数据发生变化才会重新执行该方法
举例：将前面搜索的案例重构如下
将filter_info变为计算属性，当关联的content发生改变，就会重新计算
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!-- 引入vue.js-->
7 <script src="js/vue.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 <p>
12 <label><input type="text" v-model="content"></label>
13 </p>
14 <ul v-if="!content">
15 <li v-for="item in info">{{item}}</li>
16 </ul>
17 <ul v-else>
18 <li v-for="item in filter_info">{{item}}</li>
19 </ul>
20
21
22 </div>
23 </body>
24 <script>
25 new Vue({
26 // vue管理的区域,所有的vue语法仅在该区域内生效
27 el: '#app',
28 data: {
29 content:'',
30 info:[
31 '中',
32 '中国',
33 '中国人',
34 '中国心',
35 '中国的',
36 '我是中国人'
37 ],
38 },
39 computed:{
40 filter_info(){
41 return this.info.filter((item)=>{
42 return item.indexOf(this.content) > -1
43 })
44 }
45 }
46
47 })
48 </script>
49 </html>
4.watch:监听属性
用于监听某一个变量属性，当变量发生改变，则执行对应的函数，在分组筛选中使用较多
方法的参数为变化之后的属性值
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!-- 引入vue.js-->
7 <script src="js/vue.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 <div>
12 <p>性别筛选:
13 <button @click="gender=0">男</button>
14 <button @click="gender=1">女</button>
15 </p>
16 </div>
17
18 </div>
19 </body>
20 <script>
21 new Vue({
22 // vue管理的区域,所有的vue语法仅在该区域内生效
23 el: '#app',
24 data: {
25 gender: ''
26 },
27 // 监听属性
28 watch:{
29 // 参数为监听属性变化之后的值
30 gender: function (val){
31 alert(val)
32 }
33 }
34
35
36 })
37 </script>
38 </html>
5.components:组件属性
用于定义该组件的局部组件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!-- 引入vue.js-->
7 <script src="js/vue.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 <!-- 局部组件只能在定义的当前文件中使用-->
12 <navbar></navbar>
13
14 </div>
15 </body>
16 <script>
17 new Vue({
18 // vue管理的区域,所有的vue语法仅在该区域内生效
19 el: '#app',
20 data: {},
21 // 定义局部组件
22 components: {
23 navbar: {
24 template: `
25 <div>我是一个局部组件{{ name }}
26 <button @click="handler">点我</button>
27 </div>`,
28
29 data() {
30 return {
31 name: 'kunmzhao'
32 }
33 },
34 methods: {
35 handler() {
36 alert('hello')
37 }
38 }
39 }
40 }
41 })
42 </script>
43 </html>
7.Vue常用属性的更多相关文章
- Vue 常用属性汇总
1.Vue实例常用属性 (1)数据 data:Vue 实例的数据对象 components:Vue实例配置局部注册组件 (2)类方法computed:计算属性 watch:侦听属性 filters:过 ...
- vue常用属性
关键词:filters | 自定义过滤器 (首字母大写) <p>{{ msg | capitalize }}</p> filters: { capitalize: funct ...
- vue常用属性解释。
props:详看 示例-网格组件. props 可以是数组或对象,用于接收来自父组件的数据.props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测.自定义校验和设置默认值 ...
- （二）Vue常用7个属性
学习vue我们必须之到它的7个属性,8个 方法,以及7个指令.787原则 el属性 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符. data属性 用来组织从view中抽象出 ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
- vue常用的修饰符
v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- Vue常用性能优化
Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...
- 【Android自学日记】五大布局常用属性
线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...
随机推荐
- 面试突击77：Spring 依赖注入有几种？各有什么优缺点？
IoC 和 DI 是 Spring 中最重要的两个概念,其中 IoC(Inversion of Control)为控制反转的思想,而 DI(Dependency Injection)依赖注入为其(Io ...
- 2022CISCN-satool
2022CISCN-satool 打国赛的时候自己还并不了解LLVM PASS pwn,前几天正好学习了一下LLVM PASS pwn,于是就顺便来复现一下这道题目. 首先找到二进制文件的重写函数的主 ...
- Little Girl and Problem on Trees
题意 给定一棵无边权的树,最多只有一个点度数超过2,有两种操作 1)(0 u x d)将距离u节点d距离之内的节点的值加上x 2)(1 u)询问u节点的值 n<=100000,q<=100 ...
- SpringBoot中maven项目Plugins里resources报红
错误原因:刚开始下载依赖时下载错误导致的 参考:解决idea中maven plugins标红的问题 - 走看看 (zoukankan.com) 如果还不行: 就根据上面提示的地址找到maven的配置包 ...
- sftp服务器的搭建与连接
在个人租用的vps上搭建sftp服务器并通过本机连接上去 本实验所需:Xshell(xshell中包含xftp).一台vps(windows系统) sftp是一种协议,即SSH File Transf ...
- 第三十一篇:vue3和vue2的不同
好家伙 1.为什么会有vue3? Vue2和Vue3的区别 - 简书 (jianshu.com) 貌似是因为他的对手太优秀,所以他也必须进步 2.什么是api? 从文件操作开始谈API. 以C语言为例 ...
- Linux云主机安全入侵排查步骤
导语 经常有用户报障系统被植入恶意程序,如挖矿软件.ddos攻击病毒.syn映射攻击病毒等,可以按照以下流程为用户排查入侵病毒类型: 一.定位病毒进程 对于用户反馈云主机性能卡顿,CPU和内存占用较高 ...
- Windows Server体验之管理
安装了只有命令行界面的Windows Server之后怎么去管理,对于传统的Windows管理员来说确实是比较棘手的.因为没有了图形化的管理界面,需要更多的去依赖Powershell或者cmd命令去做 ...
- firewalld教程
修改配置 cat firewalld.conf | grep -Ev "^#|^$" DefaultZone=trusted #主要是这个位置,必须修改trusted的 Minim ...
- Elasticsearch Reindex性能提升10倍+实战
文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247484134&idx=1&sn=750249a ...