手把手教你Vue2.0一天从零到精通
前端开发规范
1、工作目录构建 － 简洁清晰，命名合理，直观
2、代码命名规范 － 与实际模块功能英文保持一致；注释，换行，嵌套合理；
3、开发文档 － 交接文档一目了然
vue基础语法
Vue全家桶：Vue axios Vue-router Vuex
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
Var app=new Vue({})
基础属性：
el:获取执行vue的dom元素－初始化范围
data ： 存储数据
methods ：执行的方法
绑定数据：
{{}} 或者 v-text=“” 只能绑定纯文本
绑定html：v-html
表达式 在{{}}中 ±*/ 直接可用 三木运算一样可用
事件绑定：
v-on或@表示事件绑定
例：v-on:click="“简写@click=”"
其他指令：
循环：v-for="(item,i) in list"；item为循环到的数值；i为循环到的数的下标。
v-model=""表示表单和应用状态之间的双向绑定。
v-if表示判断ture为节点存在false表示节点消失。
v-once表示一次渲染。
v-bind绑定元素特性（style样式）
vue基础语法
绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法
（src title class name等属性写法一样）
计算属性 放在computed:{//函数} 效率高 methods设置效率低
1.在模板中表达式非常便利，但是它们实际上只用于简单的操作。
2.模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
在 Vue.js 中，可以通过 computed 选项定义计算属性。
数据双向绑定原理
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果
组件
1、组件标签
组件标签命名以拼接方式（v-head）或首字母大写（Head）
全局组件
// 注册创建组件
Vue.component(“v-head”,Vue.extend({
template:“
}))
简写：
Vue.component(“v-head”,{
template:“
})
注：也可以分开写
// 创建组件
var Head=Vue.extend({
template:“
})
// 注册组件
Vue.component(‘v-head’,Head)
局部组件
var app=new Vue({
el:’#app’
component:{
‘v-head’:{
template:“
}
}
})
组件对象和实例对象属性相同组件对象中的data是函数形式，需要返回值。data(){retun {}}
组件模板
1、script模板
template:’#head’
2、template模板
<template id:‘head’>hello template 模板
template:’#head’
注：
组件嵌套：注册的组件名在父组件的组件模板中使用；局部的组件嵌套子组件需要在父组件中通过components注册出来
组件传值（组件之间的数据通信）
父传子
在子组件的标签上绑定一个自定义的属性名,值为父组件传的数据
子组件内部通过props接收属性名
子传父
在子组件标签上绑定自定义事件，内部通过$emit给该事件推送数据，父组件通过事件函数的参数接收数据
绑定自定义事件：@subdata=’tap‘
给事件推送数据：this.$emit(‘subdata’,this.title)
父组件接收数据：tap(msg){this.title=msg}
兄弟之间传值：
利用其他vue实例对象，进行, $on进行接收(与子传父类似)
组件操作（组件对象的直接获取）
父组件操作子组件—$refs
先给子元素标签添加一个ref="child"属性
在父元素中通过this.$refs.child拿到子组件对象
子组件操作父组件数据—$parent
直接在子元素中通过this.$parent拿到父组件对象
$nextTick
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …Tick(=>(){this.refs.title.innerHTML “在此处获取的为最新的DOM元素内容”})
SLOT:插槽/分发/占位符
可以实现购物车无商品提示**(可以在自定义标签中插入数据)**
Slot标签添加 属性
没有内容时显示这段文本
内容可通过 slot属性值查找是否显示默认
自定义指令
全局自定义指令：
Vue.directive(‘color’,{
inserted:function(el){
el.style.color=‘red’//el==绑定该自定义指令的DOM元素
}
})
局部自定义指令：
在实例对象中
directives(‘color’:{
inserted:function(el){
el.style.color=‘red’//el==绑定该自定义指令的DOM元素
}
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4YnK37eq-1572328777447)(C:\Users\29712\AppData\Roaming\Typora\typora-user-images\1572090380426.png)]
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用。(bind与该生命周期钩子函数作用十分类似)
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
简写形式
(1)
Vue.directive(‘bgcolor’,function(el,binding){
el.style.background=binding.value;
})
(2)
directives:{
简写 表示bind 和update的时候都会执行
‘color’:function(el,binding){
el.style.color=binding.value;
}
}
Vue路由
1、先引Vue文件再引vue-router
1、创建实例化对象
var app=new Vue（{
el：“#app”，
}）
2、先写导航标签
首页
3、创建视图容器
作用：用来存放每个路径应该加载的组件试图的
4、创建组件、有几个路径创建几个组件
（1）创建视图模板/创建组件模板
组件模板
（2）创建组件对象（不是创建组件标签）
var Index={
template：“#index”
}
5、配置路由规则
var routes=[
{
path:"/index",
component:Index
}
]
6、创建路由对象
var router=new VueRouter（{
routers：routers
}）
7、把路由对象通过实例对象的router属性挂载到实例
对象里边
var app=new Vue（{
el：“#app”，
router：router
}）
注：
1.可以根据导航栏切换类重新定义样式；
2.导航标签router-link标签得tag可以改变router-link标签转化后的标签类型（span、p等等）
3.component=6￥·············
4.编程式路由(跳转)：
(1) router.push(/index)
(2) router.go(-1)
5.路由重定向
在路由规则中添加一个对象**{path：“/”，redirect：“/index”}**，用于指定默认显示的路由组件
6.路径不对重定向提示
{path:"*",component:Err}
7.路由模式
history路由模式：生产版本中使用
hash路由模式：开发模式中使用
在路由对象中通过mode：“hash”改为hash路由模式
在路由对象中通过mode：“history”改为history路由模式
传参
params传参和query传参的区别：params传参改规则（需要占位符）；query传参不改规则（不需要占位符）
params传参：储存路径参数（路由规则） path：“/index/ ：id”(:id为一个占位符)
传入：(:to="’/detaile/’+item.pid")
获取：$router.params.id
axios请求商品列表：
axios({
url:“http://jx.xuzhixiang.top/ap/api/productlist.php”,
params:{
uid:19802,
//pagesize：请求数据的条数
pagesize:100
}
}).then((data)=>{
console.log(data.data.data)
this.list=data.data.data
})
通过params传参的id请求商品详情：
axios({
url:“http://jx.xuzhixiang.top/ap/api/detail.php”,
params:{id:this.$route.params.id}
}).then((data)=>{
this.detail=data.data.data
console.log(data.data.data)
})
query传参：
query传参对应一种路由命名（路径的另一种定义方式）：
与
<router-link to="/index”>首页
不同之处改to为绑定属性
<router-link :to={name:“index”，query：{id：item.pid}}>首页
：to={name：“index”，query：{id：item.pid（能传多个参数）}}
通过传参获取商品详情：
axios({
url:“http://jx.xuzhixiang.top/ap/api/detail.php”,
params:{id:this.$route.query.id}
}).then((data)=>{
this.detail=data.data.data
})
同一路径下加载多个组件写法
//视图写法
<router-view name：“other”>
//路由规则写法
{
path:"/other",
components:{default：Index，other：Other}
}
路由守卫/路由导航钩子
用于路由拦截
单个组件内的路由守卫函数
组件进入前：beforeRouteEnter(to,from,next)
组件更新前：beforeRouteUpdate(to,from,next)
组件离开前：beforeRouteLeave(to,from,next)
to和from是路径和携带信息的对象;
next()决定路由是否可以切换，方法调用才会触发路由切换 ；
全局路由守卫函数（也是to，from，next三个参数）
全局路由守卫加给router对象加：
router.beforeEach((to，from，next)=>{})//next属性不设置会拦截路由不进行跳转也可以通过meat属性携带一些预设信息
路由切换以前：beforeEach(()=>{})
路由切换以后：afterEach(()=>{})
单文件组件
1、安装vue2.0脚手架（全局只安装一次）
npm install --globa vue-cli（简写：npm i -g vue-cli）
2、项目构建
创建项目： vue init webpack +（my-project项目名字） （tips:包含完整结构，语法检查麻烦）
（必备三个环境webpack-dev-server、webpack、webpack-cli）
3、启动项目查看package.json文件中的scripts启动指令
浏览器输入 localhost：8080查看项目效果
.Vue文件包含三部分template、script、和style三部分组成
导入：import router from ‘./router’ (import:导入的什么；from：导入的路径)
注：文件夹下默认引入的是index/index可以不用写
简洁模板 vue init webpack-simple my-project （tips：只包括vue，其他依赖需自行配置，体积较小）
使用
1、创建单文件组件
在component文件夹里创建.vue文件
**暴露对象方式:**export default{name:“Home”,data(){return{}}}
**接收对象方式：**import Home from ‘./Home’
接收完成后在当前的实例对象中通过components注册成标签
scoped=“”表示组件样式唯一不冲突（在.vue文件中的style上添加）
脚手架不提供axios
1、在哪使用在哪导入：npm i axios --save-dev
2、全局配置axios：在main.js里边配置
Vue.prototype.$axios=axios
配置完成之后使用this.$axios来调用
3、在src中创建api文件夹放置axios交互请求 的封装，其他地方用直接调用
Element 框架
路径)
注：文件夹下默认引入的是index/index可以不用写
简洁模板 vue init webpack-simple my-project （tips：只包括vue，其他依赖需自行配置，体积较小）
使用
1、创建单文件组件
在component文件夹里创建.vue文件
**暴露对象方式:**export default{name:“Home”,data(){return{}}}
**接收对象方式：**import Home from ‘./Home’
接收完成后在当前的实例对象中通过components注册成标签
scoped=“”表示组件样式唯一不冲突（在.vue文件中的style上添加）
脚手架不提供axios
1、在哪使用在哪导入：npm i axios --save-dev
2、全局配置axios：在main.js里边配置
Vue.prototype.$axios=axios
配置完成之后使用this.$axios来调用
3、在src中创建api文件夹放置axios交互请求 的封装，其他地方用直接调用
Element 框架
看快速上手啊-------