Vue2.0

手把手教你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:"<div>hello 组件</div>"

}))

简写：

Vue.component("v-head",{

​	template:"<div>hello 组件</div>"

})

注：也可以分开写

//  创建组件

var Head=Vue.extend({

​	template:"<div>hello 组件</div>"

})

//  注册组件

Vue.component('v-head',Head)

局部组件

//在实例中创建，只能在该实例中调用；其他实例无法获取。
var app=new Vue({

​	el:'#app'

​	component:{

​		'v-head':{

​			template:"<div>局部组件</div>"

​		}

​	}

})

组件对象和实例对象属性相同组件对象中的data是函数形式，需要返回值。data(){retun {}}

组件模板

1、script模板

<script  type='x-template'  id='head'>
    <div>
    	<h2>hello script 模板</h2>
    </div>
</script>

template:'#head'

2、template模板

<template id:'head'>hello template 模板</template>

template:'#head'

注：

组件嵌套：注册的组件名在父组件的组件模板中使用；局部的组件嵌套子组件需要在父组件中通过components注册出来

组件传值（组件之间的数据通信）

父传子

在子组件的标签上绑定一个自定义的属性名,值为父组件传的数据

<uploadPicture :callBack='dialogPicture' @subdata='tap'/>

dialogPicture: function(list) {
  for (var key in list) {
    console.log('创建章节id = ' + list[key].id)
  }
}

export default {
  props: {
    callBack: {
      type: Function
    }
  },

子组件内部通过props接收属性名

子传父

在子组件标签上绑定自定义事件，内部通过$emit给该事件推送数据，父组件通过事件函数的参数接收数据

绑定自定义事件：@subdata=’tap‘

给事件推送数据：this.$emit(‘subdata’,this.title)

父组件接收数据：tap(msg){this.title=msg}

兄弟之间传值：

利用其他vue实例对象，进行$emit事件数据推送,$, $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 name="ul-slot">没有内容时显示这段文本</slot>

//内容可通过  slot属性值查找是否显示默认

<p slot="ul-slot"></p>

自定义指令

全局自定义指令：

Vue.directive('color',{

​	inserted:function(el){

​		el.style.color='red'//el==绑定该自定义指令的DOM元素 

​	}

})

局部自定义指令：

在实例对象中

directives('color':{

​	inserted:function(el){

​		el.style.color='red'//el==绑定该自定义指令的DOM元素

​	}

})
//调用方法v-color
<p v-color>这是一段文字</p> //这段文字字体显示为红色。

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、先写导航标签

<router-link to="/index">首页</router-link>

3、创建视图容器

作用：用来存放每个路径应该加载的组件视图的

<router-view></router-view>

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:100//pagesize：请求数据的条数
​	}
}).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”>首页</router-link>不同之处改to为绑定属性

<router-link :to={name:"index"，query：{id：item.pid}}>首页</router-link>

：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></router-view>

<router-view  name：“other”></router-view>

//路由规则写法

{
	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 框架

看快速上手啊-------