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元素上的属性