我遇到了坑
slot是很关键的用法,这问题一定要想办法orz
https://forum.vuejs.org/t/slots-api/60802
解决方案(4.24)
卸载node,重新安装。
原因应该是vue-cli 2.x升级到3.x后,我有些包的版本没有升级,但vue-template-compiler升级后也不能编译具名slot,排查问题需要的精力太多了,不如推倒重新安装。
slot是很关键的用法,这问题一定要想办法orz
https://forum.vuejs.org/t/slots-api/60802
卸载node,重新安装。
原因应该是vue-cli 2.x升级到3.x后,我有些包的版本没有升级,但vue-template-compiler升级后也不能编译具名slot,排查问题需要的精力太多了,不如推倒重新安装。
父组件通过prop向子组件传入对象,父组件更新对象值,子组件状态不发生变化。
最终的解决方案倒不是用Vue的api,而是用v-if强制重新渲染。
尽可能简单地认识Vue.JS。
Vue.JS是一个JavaScript框架,它借鉴了MVVM的思想,Vue对象就像view model,使用Vue能够轻松地分离数据与视图表现,数据的变化会使视图也变化。
Vue.JS的另一个特点是组件化,一个Vue.JS项目可以抽象成一颗组件树,小型、独立、可复用的组件是大型应用构建的基础。
var vm = new Vue({ el:'#app',//选择器,Vue实例挂载到选择的元素上 data:{},//实例数据,数据变化会通过响应式系统触发视图变化 created:function(){}//实例生命周期钩子,可以在不同阶段插入自己的代码 })
<el>{{variable}}</el>展示变量文本值
<el v-html=”htmlData”></el> 输出HTML
<el v-bind:id=”dynamic”></el>或<el :href=”url” ></el> 动态绑定元素属性
v-前缀的特殊属性就是指令(Directives)
<el v-on:click=”onClick”></el>或<el @click=”submit”></el> 绑定事件
<form v-on:submit.prevent=”onSubmit”></form> 使用修饰符,.prevent修饰符阻止默认事件
<el v-if=”seen”>text</el> 控制元素是否在DOM中 ,可以结合v-else-if与v-else使用。
<el v-show=”ok”></el> 切换display属性控制元素是否可见。
<el v-for=”item in array” >{{item}}</el>或<el v-for=”item of array”>{{item}}</el> v-for将一个数组或对象渲染成一组元素,最好也提供key属性以便跟踪每个节点(在组件中必须提供),对于子元素只能是特定元素的情况,可以使用is属性
Vue实例中的computed对象内的函数:
computed:{//计算属性 total: function(){ return part1+part2;//如果part1与part2不变化,计算属性会返回缓存的结果 } }
计算属性的好处是,如果依赖不改变,计算属性不会重新求值。有需要的话,计算属性对象可以分成get和set。
当variable变化,控制台输出新值和旧值。
watch:{ variable: function(newVal,oldVal) { console.log(newVal+oldVal) } }
也可使用api:vm.$watch(‘keyPath’,callback) ,键路径形似a.b.c,指向对象的属性。
<div v-bind:class=”{‘class-name’: isActive}” ></div> 用Boolean数据动态决定class-name样式是否应用
<div v-bind:class=”[aActive,bActive]” ></div> 用String数据动态决定应用的样式
<div v-bind:class=”[isActive ? active:’non-active’, class-two,{‘class-three’:isThreeActive}]”></div> :class也支持三元表达式,数组中支持对象语法
<div v-bind:style=”{ color:dynamicColor }”></div> 动态绑定内联样式
<div v-bind:style=”styleObject”></div> 绑定样式到对象(styleObject:{color: ‘red’})
<div v-bind:style=”[styleObject1,styleObject2]”></div> 样式对象同样支持数组语法
v-on指令的内容可以是方法或一个js表达式,调用方法时可以传入$event
<input v-on:keyup.enter=”submit”> 监听键盘事件,KeyboardEvent.key 支持的按键名转换为kebab-case就可以作为修饰符,也可以监听鼠标事件
<input>、<textarea>、<select>中使用v-model指令,vue将自动控制双向绑定(监听输入、更新数据、处理特殊情况)。
组件是可复用的Vue实例,除了组件的特性,与Vue根实例不同的是,组件的data必须是一个函数,这个函数的返回值才是data的内容,由于js对于对象的引用传值,函数确保了每个组件都维护一份自己的数据。
data:function(){
return{text1:”,text2:”}
}
通过prop,组件可以获得上层传来的数据。Prop的流是单向的。
prop:{weight:Number,height:Number}
<el weight=”50″ height=”160″ ></el>
slot用于在组件内渲染自定义内容,<el></el>之间的内容位于slot的位置。
组件el的template: <div><slot></slot></div>
使用方式<el>abc</el>
通过is属性切换组件(可以用来路由的感觉)
<component :is=”com1″></component>
子组件的事件传递给父组件()
父组件<elf v-on:event-x=”…”></elf>
子组件<el v-on:click=”$emit(‘event-x’)”></el>也可以在函数内使用this.$emit(”,[arg],…)
我用它做了两个简版的博客,用原生js实现了全屏阅读。
原生JavaScript (桌面端)全屏阅读
javascript element.style window.innerHeight
http://demo.guohere.com/el-blog/
手动实现route ajax瀑布流 终端自适应 布局 CSS3过渡
max-width width flex sticky media query breakpoint regex prop eventListener axios transition $emit moment.js overflow
还没有添加对移动设备的支持