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水 ...
随机推荐
- 漏洞扫描工具awvs13破解
AWVS13_windows破解版:链接:https://pan.baidu.com/s/1qeGiNubhWgY6oeMx_IkMtg 提取码:2i2o AWVS13_linux破解版:链接:htt ...
- 【深度学习】DNN房价预测
前言 我们使用深度学习网络实现波士顿房价预测,深度学习的目的就是寻找一个合适的函数输出我们想要的结果.深度学习实际上是机器学习领域中一个研究方向,深度学习的目标是让机器能够像人一样具有分析学习的能力, ...
- Linux之NFS服务搭建及autofs服务搭建
NFS 网络文件系统,英文Network File System(NFS),是由SUN公司研制的UNIX表示层协议(presentation layer protocol),能使使用者访问网络上别处的 ...
- GNSS模块使用笔记
目录 目录 GNSS芯片 NMEA0183 协议 指令 GNSS TO MCU MCU TO GNSS GNSS芯片 ATGM336H-5N31(GPS+BDS双模) 原理图 NMEA0183 协议 ...
- Mac隔空投送功能
使用mac 或iphone 的隔空投送功能可以互发文件,亲测可用 具体可以看mac的文档 需要注意的是: 如果是mac传iphone,iphone会显示你需要存储文件的地方,比如选择在文稿中.然后在文 ...
- 阿里云Centos7部署私人CSGO服务器
大四毕业生,论文和答辩分别以1.8%的重复率和只答不辨的态度双双过关.现在就是在家等着学校发毕业证了.顺带学学驾驶...可是我这么一个喜欢折腾的人,怎么能够让自己接受这么无聊的咸鱼时光呢?因为这个寒假 ...
- Java 快速开发几 MB 独立 EXE，写图形界面很方便
Java 写的桌面软件带上运行时只有 6 MB,而且还是独立 EXE 文 件,是不是难以置信? 想一想 Electron 没写多少功能就可能超过百 MB 的体积,Java 写的桌面软件算不算得上小.轻 ...
- 《Java基础——方法的调用》
Java基础--方法的调用 总结: 1. 在同一个类中-- 对于静态方法,其它的静态和非静态方法都可以直接通过"方法名"或者"类名.方法名"调用它. 对 ...
- Python数据科学手册-机器学习: 主成分分析
PCA principal component analysis 主成分分析是一个快速灵活的数据降维无监督方法, 可视化一个包含200个数据点的二维数据集 x 和 y有线性关系,无监督学习希望探索x值 ...
- CentOS7下yum安装GitLab-CE
前提准备 建立git用户 useradd git 关闭防火墙 systemctl stop firewalld systemctl disable firewalld 安装依赖库 yum instal ...