RxxQingYi-优快云博客

原创 vue（七）

动态组件和缓存组件动态组件：在页面某个地方，对不同的组件之间进行动态切换标签属性：component标签的is属性语法：is后跟组件的变量名决定使用哪个组件来渲染<component is="Sinabox"></component>//这里is是组件名<component :is="mycomponent"></component>//这里:is是data中的变量中保存的组件名<srcipt> data(){ re

2021-10-20 20:33:39 130

原创 vue（六）

反向传值即子代向父传值语法：$emit$emit的第一个参数来自定义的事件，第二个参数为要传递给父组件的值，父组件在子组件标签上绑定自定义事件来接收子组件传递的数据父组件中使用子组件时，在子组件身上绑定一个自己的更新事件<Box :data="value" @myevent="myevent1"></Box>//补充一种语法糖写法注意这里的v-model的底层代码对应的是input方法，在使用其他方式的不要使用该语法糖<Box V-mode

2021-10-18 20:03:38 131

原创 vue（五）

组件全局组件组件的属性不能使用大写字母组件的名字可以使用驼峰命名法，但是使用的时候必须用连字符全局注册的组件使用时不能使用单标签（不会报错，但是只能使用一次，多次使用只显示第一个）注册的组件不要跟系统同名局部组件一个vm实列可以有多个局部组件，但是只能供当前vm实列使用单文件组件引入用官方的脚手架搭建环境挂载vm对象、组件引入并渲染到vm中单文件组件也有全局组件和局部组件只是把组件单独写在一个.vue文件中，共别的组件引入然后注册引入文件是；一般使用相对

2021-10-17 22:58:55 176 1

原创 Vue（四）

自定义指令directives全局指令<script>Vue.directive('foucs',{ //当绑定元素插入到DOM中。 inserted:function(el){ //聚焦元素 el.focus() }})</script>局部指令//实现的效果通全局指令<script>let vm = new Vue({ el:"#app", directive:{

2021-10-14 16:34:49 140

原创 vue（三）

过滤器filter:{}在数据展示前使用只能在v-bind或者插值表达式中使用示例//利用过滤器输出不同的时间对应不同的文本<div id='app'> <input type="text" :value="created_at|timerfamatter" />//v-bind <h1>{{created_at|timerfamatter}}</h1>// </div><script&g

2021-10-13 22:52:29 107

原创 vue学习（二）

响应式布局也就是单项数据绑定，即通过改变数据源来改变页面，或者通过页面改变来改变数双向数据绑定vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/se

2021-10-12 19:39:27 296

原创 vue学习（一）

.vuevue对象和基础指令插入数据：在标签中使用{{}}插入js表达式：变量，函数，三目运算符等简单js表达式<h1>{{msg}}</h1>//在h1标签中插入vue对象中的data中属性名为msg的变量 -------- msg:"hello,vue"插值表达式中的标识符代表vue对象中的data的属性名或者methods中的方法名指令v-html<h2 v-html="title"></h2>//在h2标签中插入

2021-10-11 20:33:24 666 1

qq_52245126的博客