前端开发一起交流QQ群：740034288
1. 官网：www.vuejs.org 。
2. 下载配置方法：
方法1：在官网www.vuejs.org下载vue.js文件，然后在html里面引入
<script src="vue.js"></script>
方法2：直接远程在线引入vue.js文件。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
方法3：npm 下载；
具体步骤：
程序（window键+R）cmd ---> 命令行中输入node i -g vue-cli回车；或在项目文件位置命令行中npm install vue-cli -g；命令行输入vue 查看是否按照成功，命令行输入vue -V 查看vue版本 V为大写字母。
方法4：webpack打包；在确认电脑安装Node和vue之后，在想创建项目的位置的命令行中(如c://xampp/htdocs)执行以下步骤：
（1）vue init webpack 项目文件名称（如taobao）：然后不修改的话，全回车即可；注意文件名不要有大写字母中文；
（2）在项目文件创建完成后进入项目文件下的命令行(cd taobao)；
（3）npm i；
（4）npm install vue-resource ： 在main.js中配置import VueResource from 'vue-resource'; Vue.use(VueResource) 。用于$http.get(utl).then(data=>{发送请求数据库获取的数据data});
（5）npm run dev： 启动项目；在项目文件下config->index.js可以设置端口号；
（6）在浏览器中输入localhost:端口号(默认808)，打开vue默认网页；
（7）在项目文件下scr->App.vue,scr->components->Hello.vue中可以删除默认样式和默认模板，然后就可以开始编译自己的
项目了；
（8）安装less ：
第一步：
安装less依赖：npm install less less-loader --save
第二步：
修改webpack.base.config.js文件中module{}里面，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
{test: /\.less$/, loader: "style-loader!css-loader!less-loader",
}第三步：
在.vue文件里设置的<style scoped lang="less"></style>
（9）在main.js文件或.vue文件中引入自己的CSS/JS文件 ：
<script>
import HeaderComponent from "./header.vue"
import "../assets/css/reset.css"
export default {
components:{
HeaderComponent
}
}
</srcipt>
3. 文件夹目录结构：
目录/文件 说明
build ： 最终发布的代码存放位置。
config : 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules : npm 加载的项目依赖模块
src : 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个
目录及文件：
assets: 放置一些自己写的css,js文件等。
commponents: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可直接将组建写这里，不使用 commponents目录。
main.js: 项目的核心文件。引入，导出文件！中 import “./assets/css/reset.css”， 引入全局
的css/js文件；
static : 静态资源目录第三方如jquery文件和图片/字体image文件等的存放处。
test : 初始测试目录，可删除
.xxxx文件 : 这些是一些配置文件，包括语法配置，git配置等。
index.html : 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
package.json : 项目配置文件，可查看已经配置的那些文件模块，如jquery,less,vue,mysql等。
README.md : 项目的说明文档，markdown 格式
4. vue基本语法：
4.1 v-bind:绑定属性指令；
<any v-bind:属性名="表达式"></any>
<any :属性名="表达式"></any>
<any v-bind:class="{类名:true/false条件表达式}" class="类名"></any>
<any :style="style"></any>
4.2 v-on:事件绑定
<any v-on:事件名="事件处理函数"></any>
<any @事件名="事件处理函数(参数,$event)"></any>
<any @事件名.事件修饰符="事件处理函数"></any>
注意：事件修饰符，指vue的事件处理函数一般只纯粹处理逻辑判断，不处理DOM事件细节：
如：修饰符 .stop .prevent .capturn .seft .once
按键修饰符 .enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta .键值
4.3 v-show="表达式": 根据表达式的值(true/false)来显示隐藏当前元素；
注意：vue重写的的数组API，会自动触发视图数据更新，如 push() pop() shift() unshift() splice() sort() reverse()
4.4 v-for:循环
<any v-for="value in list"></any>
<any v-for="(value,key) in list"></any>
<any v-for="(value,key) of list"></any>
<any v-for="(value, key, index) in object"></any> //index为索引值，key为object下标，value为object元素值；
<any v-for="n in 10">{{ n }} </any> //1 2 3 4 5 ...10
4.5 v-model:数据双向绑定，用于input 输入框
<any v-model="数据名"></any> //在data(){定义该数据名}4.
4.6 v-if:选择，是否挂载该标签/标签组
<any v-if="表达式"></any>
<any v-else-if="表达式"></any>
<any v-else></any>
4.7 v-自定义指令：
directives:{
"自定义指令名":{
bind(el,binding){}, //钩子函数
updata(el,binding){},
unbind(){}
}
}
Vue.directive('lang',function(el,binding){
//局部自定义指令
})
4.8 vue实例：全局组件和局部组件
new Vue({ 局部组件
el:"", //1. id或class，标签局部vue要嵌入的html标签的位置
data(){}, //2. 存放数据
methods:{}, //3. 存放方法
template:"", //4. 字符串模板
components:{}, //5. 引入的自定义模板
beforeCreate:{}， //6. 在实例初始化之后，数据观测 (data ) 和 event/watcher 事件配置之前被调用。
created:{}, //7. 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，
属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见
beforeMount:{}, //8. 在挂载开始之前被调用：相关的 render 函数首次被调用
mounted:{}, //9. el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个
文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate:{}, //10. 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手
动移除已添加的事件监听器
updated:{}, //11. 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大
多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或
watcher 取而代之。
activated:{}, //12. keep-alive 组件激活时调用
deactivated:{}, //13. keep-alive 组件停用时调用
beforeDestroy:{}, //14. 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed:{}, //15. Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除
，所有 的子实例也会被销毁。
errorCaptured:{}, //16.当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件
实例以及 一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
})
Vue.component("自定义组件名",{ //全局组件
template:"" //字符串模板
})
调用：在html中 <自定义组件名></自定义组件名>
4.9 模板：
1.html模板：基于DOM的模板，模板都是可被浏览器解析的有效的HTML；双花括号{{}}插值；不要在模板里面做过多的
逻辑处理，常把逻辑处理用计算属性先处理，在放模板{{}}里面；
2.字符串模板：如template:""；模板会替换挂着的元素将原来html中el:"#d1"替换成template:""的元素；
3.模板render函数：自定义标签模板；
new Vue({render(createElement){
return createElement("ul",
{
class:{类名:true},
style:{fontSize:"50px"},
attr:{abc:"miaov"}, //自定义属性
domProps:{innerHTML:'<li>1</li>'}, //会替代下面createElement的li标签
on:{},
....
},
[
createElement("li",1),
createElement("li",2) //标签<li>2</li>
])
}})
4.10 计算属性和监听属性：在html页面的模板中，尽量不要处理逻辑，所有需要用计算属性，对于任何复杂逻辑，你都应当使用计算属性。
computed:{
noCheck:function(){
return this.list.filter(function(item){
return !item.isC
}).length
}
}
调用：{{noCheck}}
watch:{ // 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
被监听的数据名:function(){ //浅监听数据改变之后的处理函数
},
被监听的数据名:{
handler:function(){ //深监听数据改版之后的处理函数
},
deep:true
}
}
hash值:指url后#及后面的内容；
5 .组件传值：
5.1组件间的传值：通过自定义属性名传值，
父传子：<son 自定义属性名="要传递给子组件的值"></son>
在子组件实例对象中props:["自定义属性名"]
子传父：
在父组件调用子组件时<son @自定义事件="自定义事件处理函数"></son>
在父组件中定义一个methods方法，处理自定义事件处理函数接受到的子组件的数据
在子组件中定义一个方法触发this.$emit("自定义事件名",要传递的数据)
注意：html中table下只能接tr标签，ul下只能接li标签，自定义标签时，可以<ul is="自定义组件名"></ul>从而
扩展Html标签，避免ul标签下直接接非li标签这样的错误出错
单向数据流：数据从父组件流向子组件，只能单向绑定，即子组件不能直接操作接受到的父组件
的数据，但是可以在子组件中定义data数据为接受到的数据，在操作这个父组件的data值即可。
或者在子组件中调用计算属性。
5.2 props传值：
props:["自定义属性名1","自定义属性名2",...];
props:{
自定义属性名:{
type:Number, //接受到的数据类型，多种类型时[Number,String]
defaule:10, //没有接受到数据值时，默认值
required:true, //必须接受存在该数据
validator:function(value){ //对传递过来的数据值value的研制满足条件
return
}
}
}
6. slot:定制模板：内容分发，即混合父子组件的内容与子组件自己的模板（在自定义组件里嵌套html标签内容）；
<自定义组件名>
<div slot="one">这是是单个div替换内容</div>
<template slot="tow">
<div>替换多个div组</div>
<div>2</div>
{{message}} //这条数据父组件中的数据.需要在template中slot
</template>
</自定义组件名>
template:"<div>{{message}} //这是自组件的数据渲染
<slot name="one">
<div>这是时原内容</div>
</slot>
<slot name="tow">
<div>这是原内容</div>
</slot>
<slot></slot>
</div>"
7. 页面跳转的三种方式方式：
7.1 直接修改页面URL的hash值；
7.2 this.$router.push("目地路由地址url/参数值zhangsan")；
this.$router.push({path:"/",params:{nameVal:data.data}}); 带参数跳转
7.3 <router-link to="目地路由地址url/参数值zhangsan"></router-link>
8.与服务器端通信
步骤：
8.1 引入vue-resource.js
8.2 发请求
this.$http.get('url').then((response)=>{
//response.data
})
8.3 vue跨域请求Php文件，在php中设置header("Access-Control-Allow-Origin:http://localhost:8080");
vue跨域请求node文件设置跨域访问app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
res.header('Access-Control-Allow-Credentials', "true"); //允许服务器发送cookie数据
next();
});
9.路由配置步骤：
9.1 指定容器: <router-view></router-view>
9.2 创建代码片段:
var login=Vue.component("login-component",{
template:""
})
9.3 配置路由词典:
new Vue({
router:new VueRouter({
routes:[path:"/myLogin:参数名uname",component:login,children:[path:"/a",
component:regiter]] // path:"*" 如404页面处理 this.$route.params.uname
})
})
10. vue中css动画效果：transition和animate.css。
10.1 将需要执行动画的标签包裹在<transition name="fade"></transition>。
10.2 name="fade",会自动生成.fade-enter,.fade-enter-to,.fade-enter-active，.fade-leave,.fade-leave-to,.fade-leave-active样式名。
10.3 enter-active-class,leave-active--class，为自定义进入动画样式，自定义离开时的样式。
10.4 appear ,.appear-active-class:为页面刷新第一次显示的的动画样式。
10.5 animated swing:为animate.css样式，fade-enter-active为自己写的css样式。
10.6 type="transition":表示动画时长以transiton定义的时长，即fade-enter-active中时长为准。
10.7 ：duration="1000",或:duration="{enter:500,leave:1000}";表示自定义进入或者离开时动画的时长。
11. vue中js动画效果：js和velocity.js
11.1 js钩子动画：@before-leave/enter,enter/leave,after-leave/enter；即动画离开/进入前，进入/离开时，进入、离开后执行的动画函数，el指的是被transition包裹的直接元素，done()表示动画执行完成结束。
11.2 velocity.js动画库：complete:done;表示动画执行完之后执行done回调即执行@after-enter函数
