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水 ...
随机推荐
- python金牌班第五周周末总结
python金牌班第五周周末总结 常见内置函数 1.abs # 求绝对值,将负数变为整数,并且得出的值只有正数print(abs(-999)) # 999 2.all # 当在经历条件判断时所有的返回 ...
- MySQL源码分析之SQL函数执行
1.MySQL中执行一条SQL的总体流程 2.SQL函数执行过程 1.MySQL中执行一条SQL的总体流程 一条包含函数的SQL语句,在mysql中会经过: 客户端发送,服务器连接,语法解析,语句执行 ...
- 【c语言学习】1 基础环境安装调试
1-1下载 vs2019 vs2019下载链接https://visualstudio.microsoft.com/zh-hans/vs/community/ 1-2安装配置环境 记得勾选上c++开发 ...
- kingbaseES R6 读写分离集群修改ssh端口案例
数据库环境: test=# select version(); version ------------------------------------------------------------ ...
- mysql_varchar与中英文关系总结
mysql 4.0版本以下,varchar(50), 指的是50字节,如果存放utf8汉字时,只能存放16个(每个汉字3字节) mysql 5.0版本以上,varchar(50), 指的是50字符,无 ...
- 【HMS Core】集成地图服务不显示地图问题
[问题描述] 关于华为HMS-地图服务不显示地图的问题. 背景:集成华为地图服务运行后页面不显示地图,运行app后不展示地图报错MapsInitializer is not initialized. ...
- Docker安装MySQL并使用Navicat连接
MySQL简单介绍: MySQL 是一个开放源码的关系数据库管理系统,开发者为瑞典 MySQL AB 公司.目前 MySQL 被广泛地应用在 Internet 上的大中小型网站中.由于其体积小.速度快 ...
- PHP使用ZipArchive压缩、解压缩、加密压缩包等
<?php use ZipArchive; class Zip { /** * @var array $files 需要压缩的文件或文件夹 */ public $files = []; /** ...
- 跟羽夏学 Ghidra ——调试
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章 ...
- int和String的相互转化
int和String的相互转化 将int转化为String 通过valueof( )方法进行转化 int a=100;String num1=String.valueOf(a); Sys ...