vue.js基础学习(2)
vm=new vue({
date:{name:"aa",
user:{“name”:"lsm"}});
获取属性值
1:vm.name
2:vm.$data.name
3:获取vue关联的实例 vm.$el
vm.$el.style.color="red"
4:获取自定义属性
vm.$options.name
5:获取所有添加了ref属性的元素
vm.$refs <h2 ref="hello"></h2> vm.$el.hello.style.color="red"
6:$set $delete 对象属性的添加和删除
method:{
add(){
this.$set(this.user,"age",22)
}
del(){
this.$delete(this.user,"age")
}
}
7:全局组件
创建方法1:var Component =vue.extend({
template:'<h1>hello</h1>'
})
vue.component(“hello”,Component)
创建方法2: vue.component(“wrold”{
template:'<h1>wrold</h1>'
})
引用:<hello></hello>
8:局部组件
1.自动挂载
components:{
"my-adress":{
template:'<h1>wrold</h1>'},
"my-name":{
template:'<h1>{{name}}</h1>',
data(){
return {"name":"lsm"}}}
}
2.手动挂载
"my-name":{
template:'#myname',
data(){
return {"name":"lsm"}}}
}
<template id="myname"><template>
9.$nextTick 用于延时,待页面渲染以后再获取dom元素的值
10:组件之间的传值
1):父传子 父使用指定变量传参(如a="2"b="6"),子组件使用对应的参数(props:["a","b"])接收,参数名对应,如果需要限制类型,
写法为
props:{
a:string,
b:string,
name:{
type:string,
required:false
},
age:
{type:number, 数据类型
default:10, 默认值
validator:function(){return value<0} 参数校验
}
2):子传父 $emit发射
this.$emit("name",parm1,parm2) 写在子组件中
<my-child message1="dddd" message2="ffff"@name=“getSubData“></my-child>
也可以在生命周期mounted中使用vm.$on("name",name=>{this.name=name}) $on用于监听指定事件
触发getSubData为父组件的方法用于获取广播过来的参数
3):非父子关系组件之间使用$emit发射的方式
vue.js基础学习(2)的更多相关文章
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- 两万字Vue.js基础学习笔记(二)
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- vue.js基础学习(1)
一:v-cloak:解决浏览器闪烁,编译过程中不会显示,直到编译结束才显示. 用法:[v-cloak] { display: none;} <div v-cloak> {{ message ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- Vue.js基础拾遗
本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...
- JS基础学习——对象
JS基础学习--对象 什么是对象 对象object是JS的一种基本数据类型,除此之外还包括的基本数据类型有string.number.boolean.null.undefined.与其他数据类型不同的 ...
- JS基础学习——闭包
JS基础学习--闭包 什么是闭包 闭包的定义如下,它的意思是闭包使得函数可以记住和访问它的词法范围,即使函数是在它声明的词法范围外执行.更简单来讲,函数为了自己能够正确执行,它对自己的词法范围产生闭包 ...
- JS基础学习——作用域
JS基础学习--作用域 什么是作用域 变量的作用域就是变量能被访问到的代码范围,比如在下面的这个js代码中,变量a的作用域就是函数foo,因此在全局作用域内的console.log(a)语句不能访问到 ...
随机推荐
- Ansible Ad-Hoc命令集
Ad-Hoc Ad-Hoc就是 “临时命令”, 从功能上讲 Ad-Hoc跟Ansible-playbook都差不多,Ansible提供了两种完成任务的方式: Ad-Hoc命令集与Ansible-pla ...
- sdut oj 操作系统实验--SSTF磁盘调度算法【操作系统算法】
操作系统实验--SSTF磁盘调度算法 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 磁盘调度在多道程序设计的计算机系统中,各个进 ...
- HDU 1533 Going home
Going Home Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- Servlet的过滤器(Fliter)
Servlet过滤器与Servlet十分相似,但具有拦截客户端(浏览器)请求的功能,可以改变请求中的内容来满足实际开发的需求.对于开发人员而言,过滤器实质就是在Web应用服务器上的一个Web应用组件, ...
- Oracle备份和恢复
--什么是脱机备份 脱机备份也叫冷备份,首先管理员使用 shutdown immediate 命令关闭数据库的服务. 之后复制需要的文件,包括数据文件和控制文件等相关内容复制到磁盘的其他位置.当 数据 ...
- eclipse自动提示功能没了的解决办法
由于重新配置了环境,并且eclipse也是装的4.2的,今天用的时候发现了,居然没有自动提示功能,也就是当一个对象居然点不出他的相关方法.后来网上搜索了下,成功的 办法是. 1.我window-> ...
- c语言代码风格2
1.注释 注释的目的是为了说明做了什么,而不是怎么做,所以注释表达应该准确而又简洁.注释要放在被注释内容的上方或右方.注释一般采用/*.........*/或//........ 对代码源文件和函数应 ...
- Idea_学习_03_IDEA中使自定义类型的文件进行代码高亮识别
如果你只是想用xml的编辑模式来编辑*.screen文件的话,可以在 Settings->Editor->File Types 中,在Recognized File Types选中XML, ...
- 尴尬的app:layout_scrollFlags="scroll|enterAlways" 配合NavigationDrawer
昨天想到了NavigationDrawer中Item点击的问题. 点击Drawer中的一个Item需要到一个新的页面,你是应该打开一个新的Activity呢还是直接用fragment呢? 如果打开新的 ...
- 基于libRTMP的流媒体直播之 AAC、H264 推送
这段时间在捣腾基于 RTMP 协议的流媒体直播框架,其间参考了众多博主的文章,剩下一些细节问题自行琢磨也算摸索出个门道,现将自己认为比较恼人的 AAC 音频帧的推送和解析.H264 码流的推送和解析以 ...