Fork me on GitHub

vue notes

发表于 | 分类于

vue-cli

1
2
3
4
5
6
7
8
npm install vue-cli -g
vue init webpack my-project
npm install 生成package.json
npm run dev 本地运行 或 npm run build 上线(生成dist文件夹)
经验:现在vue-cli版本是2.9.1 ,运行vue会报错，貌似是因为新版本有es6内容，下载2.8.1版本可以解决。
     并且 运行dev后如果报错，那就是npm与node的问题，要更新npm与node
windows 下 repeating 插件会报错 要在node_modules中 更改一下

vue 三个特点

双向绑定
组件化(模块化)
单文件组件 js css html 存在于一个组件中(.vue)

语法

v-text,v-html

1
区别v-html可以过滤掉html标签

v-for

1
2
3
数组:v-for="(item, index) in arrList"
对象:v-for="(value, key) in objList"
组件:<componentA v-for="(value, key) in objList" :key="key"></componentA>

组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
引入: import componentA from './components/a'
注册: components: {componentA}
使用: 
  1. <component-a></component-a> (最好改成这种格式)
  2. 通过 :is渲染 <p :is="comToRender"></p>
动态组件
   <p :is="currentView"></p>
父子组件通信
父:静态传递:<component-a number=5></component-a>
   动态传递:<component-a :my-value="myVal"></component-a>
子:props:{
	number:[Number],
	my-value:{
		type:String,
		default:''
	}
   }
   * 注意: 传递属性eg:my-value必须是这样写,不能驼峰命名,子组件接收props时也是这样,html使用时可以驼峰命名
}
slot
1
2
3
4
5
6
7
8
9
10
非具名slot:
父: <component-a>
      <p>hahaha</p>
    </component-a>
子: <slot></slot> 中就是<component-a />中的p标签
具名slot:
父: <component-a>
      <p slot="haha">hahaha</p>
    </component-a>
子: <slot name="haha"></slot> 中就是<component-a />中的p标签
class\style绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class:
    支持三目运算
      :class="classA ? 'class-a' : 'class-b' "
    对对象的绑定要加{}。
      :class="{ 'class-a': isA, 'class-b': isB}"
      isA:true,isB:true为data对象
    对数组数据绑定
      :class="[classA, classB]"
style:
    :style="{color:item.tit_color}"

双向绑定

同步更新
1
2
3
4
5
6
7
8
9
数组的push、pop、shift、unshift、splice、sort、reverse会同步更新
methods:{
	addItem(){
		this.list.push({
			name:'pinaapple',
			price: 256
		})
	}
}
不触发同步更新
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
数组的filter、concat、slice      不会同步更新
vm.items[indexOfItem] = newValue 不会同步更新
vm.items.length = newLength      不会同步更新
eg:
    methods:{
    	addItem(){
    		this.list[1] = {
    			name:'pinaapple',
    			price: 256
    		}
    	}
    }
同步更新方法: Vue.set(this.list,1,{
	  name:'pinaapple',
	  price: 256
	})

v-bind

1
2
3
简写 :
用来绑定各种属性
:class="{active:(index==nowIndex)}"

条件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
v-if、v-else、v-show
v-if
v-if接收bool类型。true的话则生成html，false则不生成。或者直接将元素remove掉。
举例如：
<div v-if="true">你好</div>
v-else
v-else紧跟在v-if或者v-show后边，否则将不被识别
举例如：
 
<div v-if="flase">错的</div>
<div v-else>不是错的</div>
 v-show
通过此指令控制元素的显示隐藏，即控制元素的display。
举例如：
1 <div v-show="true" style="display:none">我显示</div>
2 <div v-show="false" style="display:none">我隐藏</div>
v-hide
与v-show相反。
v-if与v-show区别:频繁切换 v-show，否则 v-if。 
    一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-on

1
2
3
4
5
6
7
8
简写@
@click
@keydown.enter
@keydown.13
@my-event this.$emit('my-event') 注意:自定义事件不支持驼峰命名
@touchstart,@touchend,@touchmove =>touch事件
router-link 支持@click 、@mouseover特殊：@mouseover.native="Over()" @mouseout.native="click()"

表单事件绑定

1
2
3
4
v-model
v-model.lazy 在enter或blur事件之后触发刷新
v-model.number 只输入数字时,为number类型
v-model.trim  自动过滤掉空格

过渡

组件间过渡，可以用mode ,分为out-in与in-out,默认是in-out。
css过渡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
      vue2.18以上6个状态，增加了v-enter-to与v-leave-to
      否则4个状态
     
      v-enter -> v-enter-active v-leave -> v-leave-active 中间两个状态是默认状态一般不用设置
      -active 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
      
      6状态官方案例:
      .slide-fade-enter-active {
        transition: all .3s ease;
      }
      .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
      .slide-fade-enter, .slide-fade-leave-to  //-leave-to代替-leave-acive
      /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
      }
      
      4状态案例:
        .fold-enter-active,.fold-leave-active {
          transition: all .5s  //opacity为1,,位置默认为原来位置(0,0,0)
        }
          
        .fold-enter,.fold-leave-active{
          opacity: 0
          transform: translate3d(0,100%,0)
        }
```          
##### js过渡
```bash
     各种钩子
     <transition
       v-on:before-enter="beforeEnter"
       v-on:enter="enter"
       v-on:after-enter="afterEnter"
       v-on:enter-cancelled="enterCancelled"
       v-on:before-leave="beforeLeave"
       v-on:leave="leave"
       v-on:after-leave="afterLeave"
       v-on:leave-cancelled="leaveCancelled"
     >
       <!-- ... -->
     </transition>
     method:{
     	beforeEnter: function (el) {
     	    // ...
     	  },
     	  // 此回调函数是可选项的设置
     	  // 与 CSS 结合时使用
     	enter: function (el, done) {
     	    // ...
     	    done()
     	},
     	afterEnter: function (el) {
     	    // ...
     	}....
     }
     注意点 ： done是在enter与leave中必须调用的
注意多元素过渡要使用key
1
2
3
eg:
<p v-if="show" key="1"></p>
<p v-else key="2"></p>

自定义指令

1
2
3
4
5
6
7
8
9
10
11
全局:
    Vue.directive()
局部:
    directives: {
       focus:{
       	inserted(el,binding){
       		el.focus()
       	}
       }
    }
 ->实现功能 进入页面就对input实现高亮。

vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let router = new VueRouter({
 linkActiveClass: 'tab_active', //定义activeClass
	mode: 'history', //地址后面就没有'#'了
	routes: [
	  {path:'/',component: IndexPage},
	  {path:'/orderList',component: orderListPage},
	  {path:'/detail',component: DetailPage,redirect:'/detail/analysis',
	    children: [
	      {path:'forecast',component: ForPage},
	      {path:'analysis',component: AnaPage},
	      {path:'count',component: CouPage},
	      {path:'publish',component: PubPage}
	    ]
	  }
	]
})
  
取参数 this.$route.params
router-link
1. <router-link to="/good"></router-link>
2. <router-link :to="{name:'banana',params:{color:'yellow'}}"></router-link>
3. <router-link to="/good" tag="li"></router-link> 就变成li标签了

vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
核心概念 State Getter Mutation Action Module
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
       应用层级的状态应该集中到单个 store 对象中。
       提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
       异步逻辑都应该封装到 action 里面。
State  作为一个“唯一数据源 (SSOT)”而存在
       从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
       computed: {
           count () {
             return store.state.count
           }
       } 
       mapState: mapGetters...同理
         import { mapState } from 'vuex'
         ...mapState(...)  
Getter  有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
        const store = new Vuex.Store({
          state: {
            todos: [
              { id: 1, text: '...', done: true },
              { id: 2, text: '...', done: false }
            ]
          },
          getters: {
            doneTodos: state => {
              return state.todos.filter(todo => todo.done)
            }
          }
        })
Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
         触发 store.commit('increment')
         注意事项
           最好提前在你的 store 中初始化好所有所需属性。
           当需要在对象上添加新属性时，你应该
           使用 Vue.set(obj, 'newProp', 123), 或者
           以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：
           state.obj = { ...state.obj, newProp: 123 }
         
           一条重要的原则就是要记住 mutation 必须是同步函数
Action    Action 类似于 mutation，不同在于：
            Action 提交的是 mutation，而不是直接变更状态。
            Action 可以包含任意异步操作。
          Action 通过 store.dispatch 方法触发：
            store.dispatch('increment')

eventBus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
功能:实现组件间通信，点击外部关闭select
建立eventBus.js
  import Vue from 'vue'
  const eventBus = new Vue()
  export { eventBus }
全局组件中定义click事件 
  resetComponent() { eventBus.$emit('reset-component') }
具有select的组件中触发eventBus 
  eventBus.$on('reset-component', () => { this.isDrop = false })
  toggleDrop(e) {
    e.stopPropagation()  //注意要阻止冒泡
    eventBus.$emit('reset-component')  //多个select 点击别的select也触发事件
    this.isDrop = !this.isDrop 
  }

用过的vue插件

better-scroll(https://jeft-hai.github.io/2017/10/21/better-scroll/)
vue-lazyload(https://jeft-hai.github.io/2017/10/21/vue-lazyload/)
vue-infinite-scroll(https://jeft-hai.github.io/2017/10/21/vue-infinite-scroll/)

image路径

1
2
3
4
5
6
7
8
9
10
11
修改build/utils.js 文件中
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}
-------------本文结束感谢您的阅读-------------