wngzhem的博客

component 使用

transition 只能满足单个节点的过渡效果，在多个节点的渲染使用transition-group

transition 的使用props:1.name 过渡名，会自动生成拓展的过渡的class名2.过渡class:enter-class,leave-class,enter-active-class,leave-active-class,appear-class,appear-active-class,(也可以使用 过渡名-[enter|leave|enter-active.

vue Render函数进阶

绝大多数情况下使用template来构建html,然而有些时候需要使用

render 中 slot 的一般默认使用方式如下：this.$slots.default 对用 template的的使用没有name 。想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。 this is slot Vue.compone

vue除了内置的核心指令(v-model 、v-show)外，也允许注册自定义指令，这对vue的扩展提供了很大的方便,同时vue的社区很活跃，相信会有很多有意思的指令分享。基本简单的自定义指令使用：v-focus的使用时，改input的元素会自动获取焦点，并改变color的颜色。 Vue.directive('focus',{

混合对象可以包含任意组件选项。组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

全局混合全局混合的使用如下，使用前注意，会影响到之后所有的创建的实例。 Vue.mixin({ created:function(){ this.hello() }, methods:{

// 基于全局Vue对象使用http Vue.http.get(‘/someUrl’, [options]).then(successCallback, errorCallback); Vue.http.post(‘/someUrl’, [body], [options]).then(successCallback, errorCallback);// 在一个Vue实例内使用httpthis.

问题描述： data () { return { goods:0, dataGoods:[ {id:1,title:'1',imgsrc:'./src/img/timg1.jpg',price:10.00}, {id:2,title:'2',imgsrc:'./src/img/timg2.jpg',price:20.02}, {id

对vue.js 的响应式的原理的理解，有助于更加灵活的使用vue,和避开一些坑所以了解其运行原理十分重要

vue的表单 使用v-model来绑定数据

props使用方法Vue.component('my-component',{ props:['message'], template:'{{message}}' });注意：props 的声明需要放在template的前面props可以使用实例中的变量赋值全局组件可以获取用使用prop 的做操作下面例子为m

学习vue的初心 是因为 angular react 的生态比较大也比较全面，在针对的单页的应用时，加载文件显得笨重,反而没优势，执行效率也比不上vue这类框架。在引入vue.js  vuejs 的算是很简洁的了var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在绑定的父级元素el：可

子组件要把数据传递给父级 依靠自定义事件

动态组件的使用虽然vue 已经提供了 v-if  v-show来动态显示隐藏组件同时也提供元素在一个挂载点上动态的切换组件，通过is

vue 中对v-for 遍历数据的处理方式 可以分为两类 ：一.对data 直接赋值（比较笨，但是比较直接） {{item.n}} var app=new Vue({ el:'#app', data:{ l

v-for的使用的方法，和注意事项。v-for 给了两个参数 key 和 index这里需要对遍历的数据 分为 数组 和 对象分别对待数组下是没有 key值的而对象下可以得到参数key值 实际显示效果如下：

在这里我觉得讲 computed  和methods放在一起讨论 更 便于 理解。computed：{{comput1}}var vm = new Vue({ el: '#example', data: { message: 10 }, computed: { comput1: function () { return this.message

vue 对数据提供一个  filter 的处理器，虽然命名为  filter  ，但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下  输出前段需要的格式数据。基本调用方法：{{ message | filterFun }}new Vue({ // ... filters: { filterFun: function (value) { ret

vue 非父子组件通信两个不相关的实例通信  需要第三方实例来完成通信下面试  app app2 两个不相关的实例bus实例为通信实例app app2 之间的通信 需要依靠bus 来完成例子中app 的点击事件会触发bus 的'example'监听事件，bus 的监听事件会对app2的pn值进行操作从而实现了在不影响app与app2 基础上从app 传递信息到app2 的操

Vue的组件api 主要来自三部分 props：外部数据传递给组件events:组件触发外部状态的改变slots:各个组件的混合组合使用javascript对子组件操作的备用方案： 使用ref为子组件添加一个索引id 可以使用 vueobj.$refs.refID来获取注意：$refs只在组件渲染完成后才填充，它仅作为访问子组件的应急方案（暂时没有发现在何种情况下会使用

使用slots 分发内容，组件直接套用组件的话，父级组件会将子级组件覆盖掉，不能实现需求的效果，为了实现该效果就需要使用 slots来内容分发。

在vue 2.5.0+ 中slot-scope替代了 scope template 的使用情形为，我们已经封装好一个组建，预留了插槽，使用 的插槽首先 我们的创建一个组建 组建很简单有一个 slot,slot有两个属性 a=123,b=msg<template> <div> <div>下面是一个