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水 ...
随机推荐
- Jira使用浅谈篇一
本篇参考: https://www.jianshu.com/u/9dd427d9ad94 Salesforce 生命周期管理(二)Agile & Scrum 浅谈 我们都知道 salesfor ...
- python九周周末总结
python九周周末总结 UDP协议 udp协议的交互模式服务端不需要考虑客户端是否退出,你发多少那么他就会按照你发的东西直接去传输给客户端不存在黏包现象 服务端: import socket ser ...
- Springboot连接数据库
好家伙, 这里使用的软件是IDEA 2021 1.新建项目 2.更改配置项目文件目录 更改前: 更改后: 2.1.更改pom.xml文件 在该文件中添加: <dependency> < ...
- Openstack neutron：目录
为什么? 最近一直在学习SDN方面的知识,本着"最好的学习就是分享"的精神,记录下本系列的文章,尝试更好地去理解SDN这一正当红的技术. 如何? SDN领域现在已经充斥了大量的公司 ...
- 凭借SpringBoot整合Neo4j，我理清了《雷神》中错综复杂的人物关系
原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra. 虽然距离中秋放假还要熬过漫长的两天,不过也有个好消息,今天是<雷神4>上线Disney+流媒体的日子 ...
- PHP 使用AES加密，并扩展失效时间检测
/** * 具有时间校验的AES加密 * @param string $string 要处理的字符串 * @param int $timeout 超时时间,单位秒 * @param string $t ...
- 【学习笔记】RNN算法的pytorch实现
一些新理解 之前我有个疑惑,RNN的网络窗口,换句话说不也算是一个卷积核嘛?那所有的网络模型其实不都是一个东西吗?今天又听了一遍RNN,发现自己大错特错,还是没有学明白阿.因为RNN的窗口所包含的那一 ...
- 解决Nginx+Tomcat中https转http请求问题---解决js加载使用http的问题
解决js加载使用http的问题 控制台错误提示: Mixed Content: The page at '' was loaded over HTTPS, but requested an insec ...
- Centos安装nodejs,npm （压缩包）
下载node阿里云镜像(推荐) 地址:https://npm.taobao.org/mirrors/node/latest-v14.x/ 选择自己要下载的版本,这里我选择的v14.6.0 cd /us ...
- 第六章：Django 综合篇 - 5：自定义django-admin命令
我们可以通过manage.py编写和注册自定义的命令. 自定义的管理命令对于独立脚本非常有用,特别是那些使用Linux的crontab服务,或者Windows的调度任务执行的脚本.比如,你有个需求,需 ...