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水 ...
随机推荐
- CCF NOI Online 2021 提高组 T3 岛屿探险（CDQ 分治，Trie 树）
题面 凇睦是一个喜欢探险的女孩子,这天她到一片海域上来探险了. 在这片海域上一共有 n 座岛屿排成一排,标号为 1, 2, 3, . . . , n.每座岛屿有两个权值,分别为劳累度 ai 和有趣度 ...
- 简易的AutoPlayCarousel 轮播控件
原理是使用StackPanel 的margin属性的偏移来实现轮播的效果 废话不多说直接上代码 AutoPlayCarousel核心代码 [ContentProperty(nameof(Childre ...
- PostgreSQL 时间函数分类与特性
KingbaseES 时间函数有两大类:返回事务开始时间和返回语句执行时的时间.具体函数看以下例子: 1.返回事务开始时的时间 以下函数返回事务开始的时间(通过 begin .. end 两次调用结果 ...
- 函数索引引用的函数必须是immutable类型
用户在使用中,可能会用到基于函数的索引,但是函数是非 immutable 类型的,导致函数索引无法创建.如: test=# create index ind_t1 on t1(to_char(crea ...
- flutter系列之:flutter中常用的Stack layout详解
[toc] 简介 对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等. 要实现这样的效果,我们需要在一个Im ...
- MySQL数据库中配置文件 read_only 参数的有关说明
1.对于MySQL单实例数据库和master库,如果需要设置为只读状态,需要进行如下操作和设置: 将MySQL设置为只读状态的命令(可以登录mysql执行下面命令, 或者在my.cnf配置文件中添加& ...
- kubeadm使用外部etcd部署kubernetes v1.17.3 高可用集群
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483891&idx=1&sn=17dcd7cd ...
- ERP系统都能给企业带来什么好处？
ERP系统但如果用得好,自然可以提高企业内部资源的计划和控制能力,提质增效降成本,提升企业竞争力,加速数字化转型步伐,但不是所有的企业使用ERP都能带来好处的,尤其是对于一些小微企业,带来的可能是灾难 ...
- 微信小程序开发优化
一.开发优化一 1.使用Vant Weapp 1.1 什么是Vant Weapp Vant Weapp官网链接 Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应 ...
- python-D1-typora软件和计算机入门1
一 typora软件 typora是一款目前非常火爆文本编辑器 1.1 安装 尽量安装在非系统盘符及设置为短路径,方便后面查找 1.2 文件路径 在计算机上就是一个资源的定位坐标,表现为具体在哪里,例 ...