vue--基础了解(每晚凌晨更新)

原创 onlyclover 随笔 个人笔记 337阅读 2018-03-06 20:36:22 举报

vue单文件方式: xxx.vue
1,配置好文件,package.json(包描述文件,封装 命令npm run dev)+webpack.config.js文件(打包的配置文件)
2,创建index.html(但页应用的页)
3,创建main.js(入口文件)
4,引入vue和相关文件xxx.vue
5,new Vue({options})
6,options(选项):
-data
-methods
-components(组件内声明组件)
-props
7,实例:
-在组件内(xxx.vue)中的this
-new Vue()
-事件
+this.$on(事件名,回调函数(参数))
+this.$emit(事件名,数据)
+this.$once(事件名,回调函数(参数)就触发一次)
+this.$off(事件名);取消事件
8.全局
-vue.component('组件名',组件对象) 在哪里都可以使用
9.组件传值
-父传子:属性作为参数
+常量 title="xxx" 子组件声明接收参数 prop:['xxx']
+变量 :title="num" 子组件声明接受参数prop['xxx']

-子传父:vuebus(只能是同一辆车)
+先停车到父组件,on一下
+在开车到只组件,如果需要的话。emit一下,触发上述事件的回调函数
通过new Vue()这样的一个对象,来$on('事件名',fn(prop1,prop2))
另一个组件引入同一个vuebus,来$emit('事件名',prop1.prop2)

过滤器:
content|过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器
组件内的过滤器+全局过滤器
组件内过滤器就是options中的一个filters的属性(一个对象)
多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体
Vue.filter(名,fn)

若局部和全局同时存在的时候,就近原则,取局部。
全局:如果出现同名时,权利小,范围大
局部:如果存在同名时,权力大,范围小

获取DOM元素
在指定的元素上,添加ref="名称A"
在获取的地方加入this.$refs.名称A
如果ref放在了原生DOM元素上,获取的数据就是原生DOM:
可以直接操作
如果ref放在了组件对象上,获取到的就是组件对象:
$el
对应的事件:
created
mounted

父子组件使用(父传子)
父和子,使用的是父,被用的是子。
父需要声明子组件,引入子组件对象,声明方式如下:

全局组件,使用更为方便,不需要声明,直接用
在main.js中引入一次,在main.js中使用

所有的组件就可以直接通过组件名直接使用

父传子:
父组件通过子组件的属性将值进行传递
1,常量: props1 = ‘常量值’
2,变量: v:bind:props2 = ‘变量’

子组件需要
props:['props1','props2']
在页面中直接使用{{props1}},{{props2}}
在js中的使用:this.props1获取

1,父亲要聆听
2,父和子通讯要一个频率
(必须保证这个对象是同一个)
3,当子有需要,就触发通讯

关于api的理解
全局的代表:
Vue.
实例的代表:
this. new Vue().
选项的代表:
new Vue(参数)
export default里边的属性

评论 ( 2 )
最新评论
onlyclover 1F 2018-03-07 12:28:55 2F

666

18323947911 2018-03-07 10:44:11 1F

~~-子传父:vuebus(只能是同一辆车)
+先停车到父组件,on一下
+在开车到只组件,如果需要的话。emit一下,触发上述事件的回调函数~~

这里有问题,子传父,自定义事件,兄弟组件用公共bus,先到的是emit,后到在on