Skip to content

qianyinghuanmie/vue2.0-demos

Repository files navigation

vue一些知识点整理

vue生命周期

图片来源 https://segmentfault.com/a/1190000008010666

vue生命周期

vue原理解析

vue与react对比

参考Vue与React比较

  • 生命周期的不同

  • 模板的不同 JSX vs Templates

  • 状态管理 vs 对象属性

    React在state状态管理存储数据的,不能修改数据,修改数据在Setstate中setState是异步的,如果需要马上利用结果,需要在setState传入回调,具体可以看看React中setState几个现象---先知道再理解在Vue中,state对象并不是必须的,数据由data属性在Vue对象中进行管理。`

vue服务端渲染

vue常用的一些方法

  • vue指令

      // 注册一个全局自定义指令 `v-focus`
      Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    
    
  • vue实例还暴露了一些有用的实例属性与方法

    举例

      var data = { a: 1 }
      var vm = new Vue({
        el: '#example',
        data: data
      })
    
      vm.$data === data // => true
      vm.$el === document.getElementById('example') // => true
    
      // $watch 是一个实例方法
      vm.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
      })
    
    

    暴露出来属性和方法

    方法 描述 补充
    vm.$props 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。 2.2.0 新增
    vm.$el Vue 实例使用的根 DOM 元素。
    vm.$options 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:
    vm.$parent 父实例,如果当前实例有的话。
    vm.$root 当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。
    vm.$children 当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 array 作为真正的来源。
    vm.$slots 用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。
    vm.$scopedSlots 用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
    vm.$refs 一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例。
    vm.$isServer 当前 Vue 实例是否运行于服务器。
    vm.$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
    vm.$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
    vm.$watch( expOrFn, callback, [options] ) 观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
    vm.$isServer 当前 Vue 实例是否运行于服务器。
    vm.$set( target, key, value ) 设置的值。
    vm.$delete( target, key ) 这是全局 Vue.delete 的别名。
    vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
    vm.$once( event, callback ) 监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。
    vm.$off( [event, callback] ) 移除自定义事件监听器。如果没有提供参数,则移除所有的事件监听器;如果只提供了事件,则移除该事件所有的监听器;如果同时提供了事件与回调,则只移除这个回调的监听器。
    vm.$emit( eventName, […args] )( target, key ) 触发当前实例上的事件。附加参数都会传给监听器回调。
    vm.$mount( [elementOrSelector] ) 如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
    vm.$forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
    vm.$nextTick( [callback] ) 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
    vm.$destroy() 完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。 触发 beforeDestroy 和 destroyed 的钩子。
  • vue常用的指令

    指令 描述 补充
    v-text 更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
    v-html 更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
    v-show 根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
    v-if 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是template ,将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
    v-for 基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名: 预期:array , Object , number , string , Iterable (2.6 新增)
    v-on 更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
    v-model 在表单控件或者组件上创建双向绑定。
    v-slot 提供具名插槽或需要接收 prop 的插槽。
    v-bind 动态地绑定一个或多个特性,或一个组件 prop 到表达式。 缩写::

    tips

    • v-for当和 v-if 一起使用时,v-for 的优先级比 v-if 更高

(更新于 2019-5-11)

image

Construction

使用vue-cli开始构建, ,关于 vue-cli

使用 vue-router 路由,关于 vue-router

使用 vue-resource关于 vue-resource

使用 sass 关于 sass

基于 element-ui ,关于 element-ui

基于 on mint-ui,关于 mint-ui

使用 vue-touch(this gesture plug-in is another vue-touch branch and support vue2.0),关于 vue-touch

使用 阿里字体 ,关于 Ali font

demos 列表

1、城市排序和检索

2、高德地图的使用

3、v-charts的使用

4、使用 vue-picture-input 预览图片

5、使用 element-ui 的图片上组件

6、mintUi好用的组件集合

7、vue-touch的使用

9、时间选择组件

教程

1、城市选择

2、高德地图的调用

3、高德地图的周边使用

可以参考my blog

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.