VUE学习资源

VUE中国：https://cn.vuejs.org/

菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html

基于VUE的后台管理系统：https://github.com/PanJiaChen/vue-element-admin

基于VUE的表格组件：https://github.com/x-extends/vxe-table

基于vue2.0 +vuex+ element-ui后台管理系统：https://github.com/wdlhao/vue2-element-touzi-admin

基于 vue + element-ui 的后台管理系统：https://github.com/bailicangdu/vue2-manage

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用：https://github.com/bailicangdu/vue2-elm

.NetCore+Vue，前后端分离，支持前后端业务代码扩展的快速开发框架 https://github.com/cq-panda/Vue.NetCore

好资源：http://www.bootstrapmb.com/

VUE拖拽组件：

http://www.ptbird.cn/vue-draggable-dragging.html

https://sortablejs.github.io/Vue.Draggable/#/custom-clone

需要区分注意的知识点：

props:（父->子，传递数据给子组件）

:props

:props.sync

:props:once

solt

events

$emit

@click

基本语法：

• import：相当于c#中的using

import {模块或者变量名} from 'vue-count-to'

• export：相当于c#中的public表示对外公开这个变量或者函数

• export default：使用import命令时，用户必须知道并指定需要加载的变量或者函数，否则无法加载，所以用户必须了解模块的相关文档才能知道有哪些属性或者方法。为了给用户提供方便所以才有了export default

// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件，他的默认输出是一个函数。

• VUE的引用方式：CDN和NPM方式

• el:"#这里的值是是一个DOM节点，作为一个挂载目标"

• data:{}：里面存放是数据

• 双括号：插值、{{数据变量}}将数据挂载到DOM上，只支持表达式，不支持变量声明之类的语句

　　上面说了，{{}}不支持语句只支持表达式，所以VUE提供了另一种指令的方式：v-if（条件渲染）或者v-else或者v-for（循环渲染）或者v-show之类的语句来实现

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>

• 指令：绑定变量(常用的指令v-bind 所以可以简化为 ：)--------------指令(标志位):表示被标记了什么标记，VUE底层去做相应的逻辑处理

<a v-bind:href="url" v-bind:class="klass">click me</a>//直接绑定数据

<a v-bind:class="{active:isActive}">click me</a>//active表示要绑定的css类名，isActive是VUE中的数据，表示isActive为真时才添加

 

组件基础、组件注册

组件的意义：多次复用，减少重复带来的工作量

父子组件（子组件：组件模板，父组件：使用页面）

//父组件

<template>
 <div>
 <h1>我是父组件！</h1>
 <child></child>
 </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

//子组件

<template>
 <h3>我是子组件！</h3>
</template>
 
<script>
</script>

父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签的形式嵌进父组件了。

props（父->子，传递数据给子组件）

父组件先绑定自定义属性=要传递的数据，子组件声明props:[父组件的自定义属性名]接受数据
注意传递参数时要用—代替驼峰命名，HTML不区分大小写

<template>
 <div>
 <h1>我是父组件！</h1>
 <child :my-message="message" mm="123"></child>
 </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
     components: {Child},
     data() {
         return {
            msg: '我是子组件三！'+ Math.random()
         }
     }
}
</script>

子组件：

<template>
 <h3>{{myMessage}}</h3>
</template>

<script>
 export default {
     props: ['myMessage','mm']
      // // 方式二：指定数据类型与默认值
        // props: {
        //     myMessage: {
        //         type: Array,
        //         default: [5,6,7]  //指定默认的值
        //     }
        // }

</script>

VUE中$refs的基本用法：

• ref加在普通元素上：用this.$refs.(ref值)，获取到的是DOM元素
• ref加在组件上：用this.$refs.(ref值),获取到的是组件实例，可以使用组件的所有方法(可以复用此方法将数据传递给组件)

<count-to
      ref="example"
      :start-val="_startVal"
      :end-val="_endVal"
      :duration="_duration"
      :decimals="_decimals"
      :separator="_separator"
      :prefix="_prefix"
      :suffix="_suffix"
      :autoplay="false"
      class="example"
    />

export default {
  name: 'CountToDemo',
  components: { countTo },
  data() {
    return {
          ...........
    }
  },
  computed: {
    ...........
  },
  methods: {
    start() {
      this.$refs.example.start()//这里调用了组件Count-to的实例方法
    },
    pauseResume() {
      this.$refs.example.pauseResume()//这里调用了组件Count-to的实例方法
    }
  }
}    

 

• prop和ref之间的区别：

　　prop 着重于数据传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
　　ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用（如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作　　用与JQ选择器类似。），这个功能比作为索引更常有用到。

• $emit(事件,值) （子->父，向父组件传入事件名称来触发一个事件）

　　$emit 方法向父组件传入事件名称来触发一个事件，事件在父组件定义。
　　e m i t 实 现 ∗ ∗ 子 组 件 向 父 组 件 通 信 ∗ ∗ 。 触 发 当 前 实 例 上 的 事 件 ， 附 加 参 数 都 会 传 递 给 监 听 器 回 调 : 子 组 件 t h i s . emit 实现**子组件向父组件通信**。触发当前实例上的事件，附加参数都会传递给监听器回调:子组件this. emit实现∗∗子组件向父组件通信∗∗。

　　触发当前实例上的事件，附加参数都会传递给监听器回调:子组件this.emit(evevt,arg),父组件@event=“XX” ，父组件methods:{XX(arg){}}。

父组件：

<template>
 <div>
 <h1>{{title}}</h1>
 <child  @returnBack="returnBack"></child>
 </div>
</template>
 
<script>
 import Child from '../components/child.vue'
 export default {
     components: {Child},
     data(){
          return{
              title:''
          }
     },
     methods:{
         returnBack() {
                //随便什么
            },
     }
 }
</script>

子组件：

<template>
<div class="header">
    <a class="backBtn" @click="returnBack"><i class="icon-back"></i></a>
    <h3 class="pageTitle">子组件标题}</h3>
</div>
</template>
<script>
 export default {
     methods: {
      returnBack(){
                this.$emit('returnBack')
            }
     }
 }
</script>

父组件用绑定属性的方式把方法传入子组件中 在子组件里直接调用这个方法（子->父）

<template>
  <div class="parent">
    <child :fatherMethod='fatherMethod'></child>// 父组件把方法传入子组件中，在子组件里直接调用这个方法
  </div>
</template>

<script>
    import child from '../base/child'
    
    export default {
        methods:{
            fatherMethod() {
                alert('我是父组件的know方法');
            }
        },
        components:{
            child
        }
    }
</script>

<template>
  <div class="child" @click='childClick'>
  </div>
</template>

<script>

    export default {
        props:{
            fatherMethod: {
                type: Function,
                default: null
            }
        },
        methods:{
            childClick(){
                this.fatherMethod()
            }
        }
    }
</script>

通过 $parent直接 获取父组件数据和调用父组件方法（子->父）

<template>
  <div class="parent">
    <child></child>
  </div>
</template>

<script>
    import child from '../base/child'
    
    export default {
        data() { // 组件的data必须是函数
          return {
            msg:'父组件数据测试'
          }
        },
        methods:{
          fatherMethod() {
            alert('我是父组件的方法')
          }
        },
        components:{
            child
        }
    }
</script>

<template>
  <div class="child" @click='childClick'>
  </div>
</template>

<script>

    export default {
        data() {
            return {  }
        },
        methods:{
            childClick(){
                this.$parent.fatherMethod()
                console.log(this.$parent.msg)
                }
        }
    }
</script>

< solt >插槽，承载分发内容的出口

Vue.component('Vbtn',{ template:'<div><button><solt></solt></button></div>'});

var  Vcontent={ 
    template:'<div><Vbtn>删除</Vbtn></div>'
}
var Vheader={
    template:'<div><Vbtn>播放</Vbtn></div>'
}

.native获取子组件的原生事件

var Vcontent={ 
    template:'<div><Vbtn @click.native='add'>删除</Vbtn></div>' ,
    methods:{
        add(){
            alert(1);
        }
    }
}

事件：

• V-ON：使用此指令来监听事件（简写形式@click)
• 事件方法的定义：定义在Method里面
• 事件的类型：dom组件事件、自定义组件事件
• 父子组件之间参数的传递：子组件传递数据给父组件使用$emit；子组件接收数据使用$on
• 其他事件类型：阻止冒泡，键盘事件

v-model和v-bind区别

v-model用在表单中，实质是v-bind的语法糖，v-bind.

可以使用v-model或v-bind将输入框的value与app的某个变量进行绑定，但是，v-model实施的是双向数据绑定，即双方任何一方的变动都会同步变化到另一方，而v-bind实施的是单向数据流的绑定，可以动态更新HTML元素上的属性