Vue实例 中的常用配置项
创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外)
如:
new Vue({
//选项配置
el: '#app',
components: { App },
template: '<App/>'
})
配置项一共可以分为六大类:数据、DOM、生命周期钩子、资源、组合、其他
一、数据
(1)data:Vue根实例或者当前组件上的数据对象,类型可能是纯粹的object形式,但当为组件上的数据时,必须是function类型
当是Vue根实例上时:
new Vue ({
data: {
num: 3
}
})
当是组件上的数据时:
export default {
data: function () {
return {
num: 3
}
}
}
(2)computed:计算属性,根据data中的数据需要动态计算的属性。在new根实例和组件中使用的方法和含义都一样,不一一举例(以下所有配置不提名都代表一样)
new Vue({
data: {
a: 1
} ,
computed: {
dbA: function(){
return this.a * 2;
}
}
})
如上例中,计算属性dbA是由data数据中的属性得到,使用时和数据属性a是一样的,没有差距
(3)watch:侦听器,监视data中属性的变化,来做出反应
new Vue({
data: {
a: 1,
dbA:2
},
watch: {
a: function(val,oldVal){//监听a的变化,val为变化后的值,oldVal为变化之前的值
this.dbA = val *2
}
}
})
和计算属性进行对比可以发现,当有一些数据需要随着其他数据变化而变化时,计算属性和侦听器有时均可以实现,要优选计算属性,避免侦听器的滥用!但是当需要在数据变化时执行异步操作或者开销较大的操作时,要是用侦听器
(4)methods:方法的集合,用到的所有方法,定义在其中
new Vue({
data: {
a: 1
} ,
methods: {
clickBtn: function(){
this.a++;
}
}
})
(5)props:接受从父组件传过来的数据
在父组件中,使用子组件时:<child v-bind:data1="data1"></child>,通过v-bind把子组件中所需要的数据传递给子组件,在子组件中通过props来接受
子组件中props的格式一般为为:props:['data1','data2',....]或者是 props:{data1:data1Type,data2:data2Type,...}
export default {
data () {
return {
show: true
}
},
props: {
lists: Array
}
}
(6)porpsData:只能用在new创建的根实例中,主要作用是方便测试
二:DOM
(1)el:只有在new创建的根实例中才有,提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标,可以是一个CSS选择器也可以是一个HTMLElement实例,一般选用CSS选择器中的id来标识
(2)template:一个字符串模板作为Vue实例的标识使用
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
(3)render:字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
(4)renderError:当render函数遭遇错误时,提供的另外一种渲染输出
三:生命周期钩子
生命周期钩子即生命周期回调函数,常用的分为以下三种:
(1)初始化阶段(执行一次):
- beforeCreate(){},
- created(){},
- beforeMount(){},
- mounted(){},//初始化完成后触发,一般在该回调函数中发送ajax请求或者启动定时器等异步任务
(2)更新阶段(执行0~n次):
- beforeUpdated(){},
- updated(){}
(3)死亡阶段(执行1次):
- beforeDestroy(){},//做收尾工作,如:清除定时器
- destroyed(){}
四:资源
(1)components:注册vue实例中可用的组件,是object类型
<template>
<div class="container">
<!--使用组件-->
<vue-header/>
<Menu/>
</div> </template> <script>
//引入组件
import VueHeader from './components/Header'
import Menu from './components/Menu'
export default{
components: { //注册组件
VueHeader,
Menu
}
}
</script>
(2)directives:注册(自定义)局部指令,自定义的指令只有在当前vue实例中有效
语法:directives:{"diretiveName":function(){}}
(3)filters:定义本地过滤器
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
//除了上面在一个组件的选项中定义本地的过滤器,也可在在创建 Vue 实例之前全局定义过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}) new Vue({
// ...
})
过滤器可以用在两个地方:双花括号插值和 v-bind
表达式
<!-- 在双花括号中 -->
{{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
Vue实例 中的常用配置项的更多相关文章
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 详解Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 2-3 Vue实例中的数据,事件和方法
上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...
- Vue学习之vue实例中的数据、事件和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue实例中created、mounted以及其他类型说明
生命周期图示(图片来自coderwhy老师): 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后 ...
- Vue实例中封装api接口的思路 在页面中用async,await调用方法请求
一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时 接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...
- yarn 在Vue框架中的常用命令
初始化项目 yarn add init 安装vue yarn add vue 安装webpack,webpack-dev-server(是一个小型的Node.js Express服务器) yarn a ...
- Vue.js中的常用的指令缩写
Vue.js为两个最为常用的指令提供了特别的缩写: v-bind缩写 <!--完整语法--> <a v-bind:href="url">测试</a&g ...
- Vue开发中的常用技巧(持续更新)
1. 监听子组件的生命周期例如有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就做一些逻辑处理,常规写法可能如下: // Parent.vue <Child @m ...
随机推荐
- ord 字符转code chr : code转字符
print(ord('刀')) # ord 字符转Unicode # 20992 print(chr(20992)) # Unicode 转成chr(字符)
- 论文 ClickP4: Towards Modular Programming of P4 小结
当前P4存在的问题(ClickP4为解决的问题) 1.随着P4程序的规模和复杂性的增加,从零开始开发单片P4程序容易出错,需要相当多的时间和精力去解决,所以网络政策的多样性和动态性使得运营商为了满足要 ...
- Gsoap在QT工程里如何调用
Qt并没有SOAP的官方实现,都是借助三方库来实现,不过似乎有个QtSoap,不过这个不是太会用,所以还是用Gsoap 这里生成纯C文件, 1.下载gSOAP(http://sourceforge.n ...
- pyspark视频
在一个网课上买了一个pyspark视频,贼贵,本来是想把视频解压密码记下来分享出来的,可是其实用的是EVPLAYER,一机一码,一共只有3个激活码 这里我分享视频链接,百度网盘: https://pa ...
- 【原创】Apache ab结果参数详解
解释如下: Server Software 服务器软件软件名称. Server Hostname 被测服务器的主机名. Server Port 被测试的Web服务器的监听端口. SSL/TLS Pro ...
- Spring Boot中使用EhCache实现缓存支持
SpringBoot提供数据缓存功能的支持,提供了一系列的自动化配置,使我们可以非常方便的使用缓存.,相信非常多人已经用过cache了.因为数据库的IO瓶颈.一般情况下我们都会引入非常多的缓存策略, ...
- Zookeeper学习之路 (二)集群搭建
ZooKeeper 软件安装须知 鉴于 ZooKeeper 本身的特点,服务器集群的节点数推荐设置为奇数台.我这里我规划为三台, 为别为 hadoop1,hadoop2,hadoop3 ZooKeep ...
- Service通信
1.简介 Service通信是双向的, 它不仅可以发送消息, 同时还会有反馈. 所以service包括两部分, 一部分是请求方( Clinet) , 另一部分是应答方/服务提供方( Server) . ...
- nginx学习要点记录
IO多路复用: 1.轻量 2.cpu亲和性:把CPU核心和nginx工作进程绑定,把每个worker进程固定在一个CPU上执行,减少切换cpu的cache miss,获得更好的性能 3.IO多路复用e ...
- FFMpeg笔记(三) 音频处理基本概念及音频重采样
Android放音的采样率固定为44.1KHz,录音的采样率固定为8KHz,因此底层的音频设备驱动需要设置好这两个固定的采样率.如果上层传过来的采样率不符的话,需要进行resample重采样处理. 几 ...