Vue.js经常使用开发知识简要入门（一）

Vue-cli建立项目

• 安装：npm install -g vue-cli

• vue list命令 ：查看官方模版列表

• 初始化项目：vue init webpack 项目名

• 安装依赖：npm install

• 运行：npm run dev

Vue动画支持（transition）

以DIV从右到作的飞入动画为例。
在须要加动画的组建上设置属性：transition="动画名称"

<template>
  <div v-show="showFlag" transition="move" class="food">
  </div>
</template>

这里给要添加动画的组建设置了transition属性，而且值等于move，也就是去个名字

而后在style样式中分别写两个样式：

<style lang="less" rel="stylesheet/less">
  .food{
    // 其余样式
    ... ...
    &.move-transition{
      transition: all .2s linear;
      transform: translate3d(0,0,0);
    }
    &.move-enter,&.move-leave{
      transform: translate3d(100%,0,0);
    }
  }
</style>

样式以“动画名称-transition”为名，表示动画开始的设置，以“enter”“leave”结尾的表示动画结束的设置。

这样就完成了一个简单的Vue动画。

父组建调用子组件方法（v-ref）

parent组件中有child组件，而且在子组件上设置v-ref属性：

<template>
   // child组建
   <child v-ref:child></child>
</template>
<script type="text/ecmascript-6">
    export default{
        methods: {
            methodA() {
                // 调用子组件方法
                this.$refs.child.show();
            }
        }
    };
</script>
<style lang="less" rel="stylesheet/less">
</style>

注意：v-ref后面的值是以“:”链接的而不是“=”号。“this.$refs.child”就是获取到子组件。

child子组件内容

<template>
   <div>我是child组建</div>
</template>
<script type="text/ecmascript-6">
    export default{
        methods: {
            show() {
                //方法内容
            }
        }
    };
</script>
<style lang="less" rel="stylesheet/less">
</style>

子组建通知父组件（事件派发$dispatch）

在子组件方法中

this.$dispatch('content.toggle', type);

“ratingtype.select”是自定义事件名，在父组件中能够监听该事件，在父组件中定义events属性处理事件

events: {
      'ratingtype.select'(type) {
        this.selectType = type;
      },
      'content.toggle'(onlyContent) {
        this.onlyContent = onlyContent;
      }
}

DOM绑定（v-el）

经过给div设置“v-el:xxx”就如同给div设置一个id属性，而后能够经过这个id获取DIV元素。

<div class="food" v-el:food>

而后在使用$els便可访问该元素

let food = this.$els.food;

food获得的就是一个DOM对象

阻止元素点击穿透和冒泡

<div @click.stop.prevent="test">test</div>

生命周期不从新加载（keep-alive）

在切换路由的时候不但愿每次切换都从新被渲染一次，能够在路由出口上添加keep-alive属性便可

<router-view :user="user" keep-alive></router-view>

项目编译打包注意

使用vue-cli建立的项目使用npm run build命令进行打包编译成静态文件。可是可能遇到以下异常：

- building for production...shell.js: internal error
Error: ENOENT: no such file or directory, stat 'D:\xxxxxapp\static\*'
... ...

此时，能够尝试更新shelljs包的版本，如项目中shelljs当前版本是0.6.0，那么能够更新至0.7.4（npm update shelljs@0.7.4）后再次进行build命令

---

++++++++++本人出售本人出售《Vue.js权威指南》，二手价20元！++++++++++