关于javascript:初级个人分享Vue前端开发教程笔记-打卡每天一份劝退技能

大家好，我是魔王哪吒，很快乐意识你~~

哪吒人生信条：如果你所学的货色处于喜爱才会有弱小的能源撑持。

每天学习编程，让你离幻想更新一步，感激不负每一份酷爱编程的程序员，不管知识点如许奇葩，和我一起，让那一颗到处流荡的心定下来，始终走上来，加油，2021加油！欢送关注，欢送点赞、珍藏和评论

不要胆怯做梦，然而呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

前言

如果这篇文章有帮忙到你，给个❤️关注，❤️点赞，❤️激励一下作者，接管好挑战了吗？文章公众号首发，关注 程序员哆啦A梦 第一工夫获取最新的文章

❤️笔芯❤️~

作为一名Vue开发使用者，必须理解其应用规定。

Vue.js的倒退

前端倒退的行业十分快，大部分学习者赶不上倒退的速度，每天都在学习Google的AngularJS，Fackbook的ReactJS，这些前端MVC（MVVM）框架和组件化学习，加上Vue.js的呈现，越来越多的前端投入了学习中。❤️

Vue.js是一个用来开发web界面的前端库，轻量级，具备响应式编程和组件化的特点。

hello world

引入vue.js

<script src="http://cdnjs.xxx"></script> // 应用CDN办法

通过NPM进行装置：

npm install vue

示例：

<div id="#app"> <h1>{{message}}</h1></div>var vm = new Vue({ el: '#app', data: {  message: 'hello world, 我是掘金，魔王哪吒' }})

特点：数据绑定

在浏览器控制台vm.message='hello vue'，输入后果hello vue，示意vm.message和视图中{{message}}是绑定的。

绑定用户输出的数据，视图会随着用户的输出而变动❤️

<div id="app"> <h1>dadaqianduan is {{message}}</h1>  <input type="text" v-model="message"></div>

vm.message的值会随着用户在input中输出的值的变动而变动，而无需咱们手动去获取DOM元素的值再同步到js中。

特点:组件化

能够本人定义html标签，在模板中应用它

示例：

<div id="app"> <message content="dadaqianduan"></message></div><script type="text/javascript"> var Message = Vue.extend({  props: ['content'],  template: '<h1>{{content}}</h1>' })  Vue.component('message', Message);  var vm = new Vue({  el: '#app', })</script>

命令行工具：

$npm install --global vue-cli$vue init webpack my-project$cd my-project$npm install$npm run dev

Vue实例

vue.js的应用是通过构造函数Vue({option})创立一个vue的实例：var vm = new Vue({})。

一个Vue实例相当于一个MVVM模式中的ViewModel，做图如下：

在实例化的时候，能够传入一个选项对象（数据，模板，挂载元素，办法，生命周期钩子） 等。

模板

el类型是字符串，DOM元素或者是函数，作用是为实例提供挂载元素。一般来说咱们会应用css选择符，或是原生的DOM元素。

如：el:'#app'，指定了el，实例将立刻进入编译过程。

template类型为字符串，默认会将template值替换挂载元素，el值对应的元素，合并挂载元素和模板根节点的属性。

数据

vue实例中能够通过data属性定义数据，这些数据能够在实例对应的模板中进行绑定并应用。

示例：

var data = {a:1}var vm = new Vue({ data: data})vm.$data === data // truevm.a === data.a // truevm.a = 2data.a // 2data.a = 3vm.a // 3

在模板中应用{{a}}就会输入vm.a的值，批改vm.a的值，模板中的值会随之扭转，称为响应式数据。

组件类型的实例能够通过props获取数据，同data一样，也须要在初始化时预设好。

<my-component title="myTitle" content="myContent"></my-component>var myComponent = Vue.component("my-component",{ props: ['title','content'], template: '<h1>{{title}}</h1><p>{{content}}</p>'})

办法

在methods对象中来定义方法，示例：

<button v-on:click="daBtn">dadaqianduan</button>new Vue({ el: '#app', data: {a:1}, methods: {  daBtn: function(){   console.log(this.a);  } }});

生命周期

beforeCreate，在实例开始初始化时同步调用，此时数据观测，事件等都尚未初始化。

created，在实例创立之后调用，此时已实现数据绑定，事件办法，但尚未开始DOM编译，即是未挂载到document中。

beforeMount，在mounted之前运行。

mounted，在编译完结时调用，此时所有指令已失效，数据变动已能触发DOM更新，但不保障$el已插入文档。

beforeDestroy，在开始销毁实例时调用。

destroyed，在实例被销毁之后调用，此时所有绑定和实例指令都曾经解绑，子实例也被销毁。

updated，在实例挂载之后，再次更新实例并更新完DOM构造后调用。

activated，须要配合动静组件keep-live属性应用，在动静组件初始化渲染的过程中调用该办法。

文本插值

数据绑定根底模式是文本插值，应用{{}}，为Mustache语法：

<span>hello {{name}}</span>

单次插值：

<span v-once>{{name}}</span>

HTML属性

示例：

<div v-bind:id="'id-'+id"/></div><div :id="'id-'+id"></div>

绑定表达式

放在Mustache标签内的文本内容称为绑定表达式。每个绑定中只能蕴含单个表达式，并不反对JavaScript语句，不反对正则表达式。

过滤器

vue容许在表达式后增加可选的过滤器，以管道符 "|"批示，能够有多个过滤器链式应用：

{{time | paramsTime}}

计算属性

var vm = new Vue({ el: '#app', data: {  firstName: 'da',  lastName: '哪吒', } computed: {  fullName: function() {   // this 指向vm实例   return this.firstName + ' ' + this.lastName  } }});<p>{{firstName}}</p><p>{{lastName}}</p><p>{{fullName}}</p>

Setter

示例：

var vm = new Vue({ el: '#el', data: {  num: 100, } computed: {  price: {   set: function(newValue){    this.num = newValue * 100;   },   get: function() {    return (this.num/100).toFixed(2);   }  } }});

表单控件

输入框示例：

<input type="text" v-model="message"/><span>dadaqianduan {{message}}</span>

单选框示例：

<label><input type="radio" value="male" v-model="gender"> 男 </label><label><input type="radio" value="famale" v-model="gender"> 女 </label><p>{{gender}}</p>

checkbox复选框，单个勾选框和多个勾选框

<input type="checkbox" v-model="checked"/><span>dadaqianduan{{checked}}</span>

多个勾选框，v-model应用雷同的属性名称，且属性为数组：

<label><input type="checkbox" value="1" v-model="multiChecked">1</lable><label><input type="checkbox" value="2" v-model="multiChecked">2</lable><label><input type="checkbox" value="3" v-model="multiChecked">3</lable><p>{{multiChecked.join('|')}}</p>

select:

单选：

<select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option></select><span>dadaqianduan: {{selected}}</span>

多选：

<select v-model="multiSelected" multiple> <option selected>A</option> <option>B</option> <option>C</option></select><span>dadaqianduan: {{multiSelected.join('|')}}</span>

绑定value

表单控件的值同样能够绑定在vue实例的动静属性上。

// checkbox<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">

选中：vm.checked==vm.a未选中：vm.hchecked==vm.b

class与style绑定

class属性，绑定的数据能够是对象和数组

<div class="da" v-bind:class="{'active':active, 'unactive':!active}"></div>vm实例中须要蕴含：data: { active: true}

渲染后果：<div class="tab active"></div>

数组语法

<div v-bind:class="[classA, classB]"></div>data: { classA: 'class-a', classB: 'class-b',}

渲染后果：`<div class="class-a class-b'></div>

内联款式绑定

对象语法：间接绑定合乎款式格局的对象

<div v-bind:style="dada"></div>data: { dada: {  color: 'green',  fontSize: '10px' }}

<div v-bind:style="{ fontSize: color: 'green' }"></div>

数组语法：v-bind:style容许将多个款式对象绑定到对立元素上。

<div v-bind:style="[ styleObjectA, styleObjectB ]"></div>

模板渲染

前端渲染的长处：

第一，业务拆散，后端只须要提供接口，前端在开发时也不须要部署对应得后端环境，通过一些代理服务器工具就能近程获取后端数据进行开发，可能晋升开发效率。

第二，计算量得转移，本来须要后端渲染得工作交给了前端，加重了服务器得压力。

后端渲染的长处：

第一，对搜索引擎比拟敌对。

第二，首页加载工夫端，后端渲染加载实现后就间接显示html，但前端渲染在加载实现后还须要有段js渲染的工夫。

条件渲染

v-if和v-else的作用是依据数据值来判断是否输入该DOM元素，以及蕴含的子元素。

v-else必须紧跟v-if，不然该指令不起作用。

v-show元素的应用会渲染并保留在DOM中。只是切换元素的css属性display。

v-if和v-show的条件发生变化时，v-if引起了dom操作级别的变动，而v-show仅仅产生了款式的变动，从切换的角度来说，v-show耗费的性能要比v-if小。

v-if切换时，vue.js会有一个部分编译/卸载的过程，因为 v-if 中的模板也可能包含数据绑定或子组件。v-if 会确保条件块在切换当中适当地销毁与两头外部的事件监听器和子组件。

v-if 是惰性的，如果在初始条件为假时，v-if 自身什么都不会做，而v-show 则仍会进行失常的操作，而后把 css 款式设置为 display:none。

v-if 有更高的切换耗费而 v-show 有更高的初始渲染耗费

列表渲染

示例：

<ul><li v-for="item in items">　　 <h3>{{item.web}}</h3>　　 <p>{{item.da}}</p> </li></ul>var vm = new Vue({el : '#app', data: {　　 items : [　　　 { title : 'web-1', description : 'da-1'},　　　 { title : 'web-2', description : 'da-2'},　　　 { title : 'web-3', description : 'da-3'},　　　 { title : 'web-4', description : 'da-4'}　　 ] }});

v-for 内置了 $index 变量，输入以后数组元素的索引，也能够本人指定索引的别名。`<li v-for="(index,item) in items">{{index}} –
{{$index}} – {{item.title}}</li>`

在vue.js中提供了$set办法，批改数据的同时进行试图更新。

vm.$set('item[0]', {title: 'da'})

修饰符

.stop: 等同于调用 event. stopPropagation()。

.prevent: 等同于调用 event.preventDefault()。

.capture: 应用 capture 模式增加事件监听器。
.self: 只当事件是从监听元素自身触发时才触发回调。

示例：

<form v-on:submit.prevent="onSubmit"></form> // 阻止表单默认提交事件<form v-on:submit.stop.prevent="onSubmit"></form> // 阻止默认提交事件且阻止冒泡<form v-on:submit.stop.prevent></form> // 也能够只有修饰符，并不绑定事件

Vue.extend()

Vue.js 提供了 Vue.extend(options) 办法，创立根底 Vue 结构器的“子类”

Vue.component('child', Child) // 全局注册子组件<child ….></child> // 子组件在其余组件内的调用形式var Child = Vue.extend({template : '#child',data : function() {　　 return {　　　 ….　　 } }….})

内置指令

v-bind用于动静绑定DOM元素属性attribute，元素属性理论的值是由vm实例中的data属性提供的。

![](avatar)new Vue({ data: {  avatar: 'http://' }})

v-text 须要绑定在某个元素上，能防止未编译前的闪现问题。

v-ref作用于子组件上，实例能够通过$refs拜访子组件。

示例：

<message v-re:title content="title"></message><message v-ref:sub-title content="subTitle"></message>var Message = Vue.extend({ props: ['content'], template: '<h1>{{content}}</h1>'});Vue.component('message', Message);

v-pre指令，示意跳过编译这个元素和子元素，显示原始的{{}}Mustache标签，用来缩小编译工夫。

v-clock指令相当于在元素上增加一个[v-cloak]的属性，直到关联的实例完结编译。能够和css规定[v-cloak]{display:none}一起应用，能够暗藏未编译的Mustache标签直到实例筹备结束。

<div v-cloak>{{msg}}</div>

v-once指令是用于表明元素或组件只渲染一次，即便随后产生绑定数据的变动或更新，该元素或组件以及蕴含的子元素都不会再次被编译和渲染。

自定义指令

通过Vue.directive(id,definition)办法注册一个全局自定义指令，接管参数id和定义对象。id是指令的惟一标识，定义对象就是指令的相干属性以及钩子函数。

Vue.directive('global-directive', definition)

<div v-global-directive></div>

部分注册：

var com = Vue.extend({ directives: {  'localDirective': {} }});

指令实例属性

el指令绑定的元素
vm，该指令的上下文ViewModel，能够为new Vue()的实例，也能够为组件实例。
expression，指令的表达式，不包含参数和过滤器
arg，指令的参数
name，指令的名字
modifiers，一个对象，蕴含指令的修饰符
descriptor，一个对象，蕴含指令的解析后果

过滤器

vue.js能够在表达式前面增加可选的过滤器，以管道符示意：

{{time | paramsTime }}

过滤器的实质是一个函数，承受管道符后面的值作为初始值，同时也能承受额定的参数，返回值为通过解决后的输入值。

Vue.filter('date', function(value){ if(!value instanceof Date) return value; return value.toLocalDateString();})</div> {{ date | date }}</div>var vm = new Vue({ el: '#app', data: {  date: new Date() }})

组件注册

示例：

var MyComponent = Vue.extend({...})

vue.js提供了两种注册形式，别离是全局注册和部分注册。

Vue.component('my-component', MyComponent);

应用办法：

<div id="app"> <my-component></my-component></div>var MyComponent = Vue.extend({template : '<p>掘金 魔王哪吒</p>'})Vue.component('my-component', MyComponent)var vm = new Vue({el : '#app'});

部分注册

var Child = Vue.extend({template : '<p>dadaqianduan.cn</p>'});var Parent = Vue.extend({template: '<div> 　　 <p>dada</p>　　 <my-child></my-child>　　 </div>', components: {　　 'my-child': Child }});

注册语法糖

示例：

// 全局注册Vue.component('my-component', {template : '<p>dadaqianduan.cn</p>'})// 部分注册var Parent = Vue.extend({template: '<div>　　　 <p>掘金 魔王哪吒</p> 　　　 <my-child></my-child>　　 </div>', components: {　　 'my-child': {　　　　template : '<p>dada</p>'　　 } }});

组件`props`

props将父组件的数据传递给子组件，子组件在承受数据时，须要显示申明props。

示例：

Vue.component('my-child', {props : ['parent'],template: '<p>{{ parent }} is from parent'})<my-child parent="魔王哪吒"></my-child>

prop: Number，承受的参数为原生结构器，String,Number,Boolean,Function,Object,Array，也可承受null，象征任意类型均可。

多种类型：prop: [Number,String],；参数必须：prop:{type: Number, required: true}。

参数默认：prop: {type: Number, default: 12},

示例：

prop: { type: Object, default: function() {  return {a: 'a'} }}

组件间通信

vue.js提供了三个属性对其父子组件以及根实例进行间接拜访。

$parent，父组件实例
$children，蕴含所有子组件实例
$root，组件所在的根实例

倡议应用props在组件间传递数据。

`$emit`

示例：

events : {'add' : function(msg) {　　 this.todo.push(msg); }}methods: {onClick : function() {　　 this.$emit('add', 'dada'); }}

`$dispatch`

示例：

父组件：events : {'add' : function(msg) {　　 this.todo.push(msg); }}子组件：methods: {toParent : function() {　　 this.$dispatch('add', 'dada'); }}

子组件索引

vue.js提供了间接拜访子组件的形式，除了this.children外，还给子组件绑定一个v-ref指令。

<child-todo v-ref:first></child-todo>

在父组件中就能够通过 this.$refs.first 的形式获取子组件实例。

组件缓存

keep-alive如果把切换进来的组件保留在内存中，能够保留它的状态或防止从新渲染。

<keep-alive> <component :id="currentView"> </component></keep-alive>

生命周期：

// 组件被创立之前beforeCreate(){ console.log("组件被创立之前")}created(){ console.log("组件被创立之后")}beforeMount(){ console.log("组件被渲染之前")}mounted(){ console.log("组件被渲染之后")}beforeUpdate(){ console.log("数据扭转渲染之前")}updated() { console.log("数据扭转渲染之后}beforeDestory(){ // 组件销毁之前}destoryed(){ // 销毁之后}

自定义指令和过滤器

// 注册一个全局自定义指令Vue.directive('focus', { inserted: function(el){  // 聚焦元素  el.focus() }})

注册部分指令，组件中也承受一个directives的选项：

directives: { focus: {  // 指令的定义  inserted: function(el){   el.focus();  } }}

过滤器

vue.js过滤器能够用在两个中央：双花括号插值和v-bind表达式。

{{message | capitalize}}<div v-bind:id="rawId | formatId"></div>

能够在一个组件的选项中定义本地的过滤器：

filters: { capitalize: function(value) {  if(!value) return ''  value = value.toString()  return value.charAt(0).toUpperCase() + value.slice(1); }}

Vue.filter("author",function(value){ return value+"-dadaqianduan";})Vue.filter("money", function(value){ return "$"+value;})

axios根底get申请

axios是一个基于promise的HTTP库，能够用在浏览器和node.js中。

特点：

从浏览器中创立XMLHttpRequests
从node.js创立http申请
反对Promise api
拦挡申请和响应
转换申请数据和响应数据
勾销申请
主动转换JSON数据
客户端反对进攻XSRF

装置：

应用npm：

npm install axios

执行GET申请：

axios.get('/user?ID=123') .then(function(response){  console.log(response); }) .catch(function(error){  console.log(error); });axios.get('/user', { paras: {  ID: 123 }}).then(function(response){ console.log(response);}).catch(function(error){ console.log(error);});

执行post申请

axios.post('/user', { firstName: 'da', lastName: 'jeskson'}).then(function(response){ console.log(response);}).catch(function(error){ console.log(error);});

执行多个并发申请

function getUserAccount() { return axios.get('/user/123');}function getUserPermissions() { return axios.get('/user/123/permissions');}axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct, perms){}));

axios api: 能够通过向axios传递相干配置来创立申请

// axios（config）axios({ method: 'post', url: '/user/123', data: {  firstName: 'dada',  lastName: 'dadaqianduan' }});

axios(url[,config])

// 发送get申请axios('/user/123');

示例：

created(){ this.$axios.get("http://xxx") .then(res=>{  this.axiosData = res.data }) .catch(error => {  console.log(error); })}}

`vue-axios`全局配置和拦截器

全局的axios默认值：

axios.defaults.baseURL='http://xxx';

自定义实例默认值：

// 创立实例时设置的默认值var instance = axios.create({ baseURL: 'http://xxx'});

拦截器：在申请或响应被then或catch解决前拦挡它们。

// 增加申请拦截器axios.interceptors.request.use(function(config){ // 在发送申请之前做些什么 return config },function(error){  // 对申请谬误做些什么 return Promise.reject(error);});// 增加响应拦截器axios.interceptors.response.use(function(response){ // 对响应数据做点什么 return response; },function(errror){ // 对响应谬误做点什么 return Promise.reject(error);});

增加申请拦截器

Axios.interceptors.request.use(function(config){ // 在发送申请之前做些什么 if(config.method === 'post'){  config.data = qs.stringify(config.data); } console.log(config); return config;},function(error){// 对申请谬误做些什么return Promise.reject(error);});

`vue-axios`跨域解决

proxy: { host: '127.0.0.1', port: 9000, auth: {  username: 'jeskson',  password: '123' }}

路由根底

<div id="app"> <router-view></router-view></div>const User = { template: '<div>User</div>`}const router = new VueRouter({ routes: {  {path: '/user/:id', component: User} }})

`router-link`

<router-link>组件反对用户在具备路由性能的利用中导航，通过to属性指定指标地址，默认渲染成带有正确链接的<a>标签，能够通过配置tag属性生成别的标签。另外，当指标路由胜利激活时，链接元素主动设置一个示意激活的css类名。

<router-link>比起写<a href="...">会好一些。

无论是html5 history模式还是hash模式，它的体现行为统一，所以，当你要切换路由模式，或者在ie9降级应用hash模式，毋庸作任何变动。
在html5 history模式下，router-link会守卫点击事件，让浏览器不在从新加载页面。
当你在html5 history模式下应用base选项之后，所有的to属性都不须要写基门路了。

路由嵌套

要在嵌套的进口中渲染组件，须要在VueRouter的参数中应用children配置：

const router = new VueRouter({ routes: [  {path: '/user/:id', component:User,  children: [   {    path: 'profile',    component: UserProfile   },   {    path: 'posts',    components: UserPosts   } ]})

路由参数传递：

<router-link :to="{name: 'dada', params: {id:'111', count: 12} }">魔王哪吒</router-link>

vue框架比照

vue:

模板和渲染函数的弹性抉择
简略的语法以及我的项目创立
更快的渲染速度和更小的体积

react:

更实用于大型利用和更好的可测试性
同时实用于web端和原生app
更大的生态圈带来的更多的反对和工具

vue核心思想

数据驱动和组件化

nodejs和npm的装置和环境搭建

Webpack代码模块化构建打包工具
Gulp基于流的自动化构建工具
Grunt是JavaScript世界的构建工具
Babel是应用最新的标准来编写js
vue是构建数据驱动的web界面的渐进式框架
Express是基于Node.js平台，疾速，凋谢，极简的web开发框架

下载地址：https://nodejs.org/en/download/

vue环境搭建以及vue-cli应用

vue多页面利用文件援用：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

vue-cli构建spa利用

npm install -g vue-clivue init webpack-simple demovue init webpack demo2

a vue.js projectnpm installnpm run devnpm run build

vue根底语法

模板语法：Mustache语法：{{msg}}

html赋值：v-html=""
绑定属性：v-bind:id=""
应用表达式：{{ok?'yes':'no'}}
文本赋值：v-text=""
指令v-if=""
过滤器：{{message | capitalize}}

class和style绑定

对象语法：v-bind:class="{active: isActive, 'text-danger': hasError}">
数组语法：<div v-bind:class="[activeClass,errorClass]">
style绑定对象语法：v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"

vue组件

全局组件和部分组件
父子组件通信-数据传递
Slot

Vue-router

什么是前端路由：就是依据不同的url地址展现不同的内容或页面

vue-router用来构建spa

<router-link></router-link>或者this.$router.push({path:''})<router-view></router-view>

动静路由匹配
嵌套路由
编程式路由
命名路由和命名视图

什么是动静路由匹配

示例：

import GoodsList from './../views/GoodsList'Vue.use(Router)export default new Router({ routers: [  {   path: '/goods/:goodsId',   name: 'GoodsList',   component: GoodsList  } ]})<template> <div>  <span>{{$route.params.goodsId}}</span> </div></template>

什么是嵌套路由

// App.vue<template> <div id="app">  ![](./assets/logo.png)  <router-view></router-view> </div></template>

import GoodsList from './../views/GoodsList'import Title from '@/views/Title'import Image from '@/views/Image'Vue.use(Router)export default new Router({ routers: [  {   path: '/goods',   name: 'GoodsList',   component: GoodsList，   children: [    {      path: 'title',      name: 'title',      component: Title     },     {      path: 'img',      name: 'img',      component: Image     }   ]  } ]})<template> <div>  <span>{{$route.params.goodsId}}</span>    <router-link to="/goods/title">显示商品题目</router-link>  <router-link to="/goods/image">显示图片</router-link>    <div>   <router-view></router-view>  </div> </div></template>

什么是编程式路由

通过js来实现页面的跳转。

$router.push("name")$router.push({path:"name"})$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})$router.go(1)

import GoodsList from './../views/GoodsList'import Title from '@/views/Title'import Image from '@/views/Image'import Cart from '@/views/Cart'Vue.use(Router)export default new Router({ routers: [  {   path: '/goods',   name: 'GoodsList',   component: GoodsList，   children: [    {      path: 'title',      name: 'title',      component: Title     },     {      path: 'img',      name: 'img',      component: Image     }   ]  },  {   path: '/cart',   component: Cart  } ]})<template> <div>  <span>{{$route.params.goodsId}}</span>    <router-link to="/goods/title">显示商品题目</router-link>  <router-link to="/goods/image">显示图片</router-link>    <div>   <router-view></router-view>  </div>    <router-link to="/cart">购物车</router-link>  <button @click="jump">跳转购物车</button> </div></template>...methods: { jump() {  this.$router.push("/cart");  // ({path: '/cart?id=123'}); }}

命令路由和命名视图

给路由定义不同的名字，依据名字进行匹配

给不同的router-view定义名字，通过名字进行对应组件的渲染

<router-link v-bind:to="{name: 'cart'}">跳转到购物车页面</router-link><router-link v-bind:to="{name: 'cart', params:{cartId:123}}">跳转到购物车页面</router-link>路由：{ path: '/cart/:cartId", name: 'cart', component: Cart}

app.vue代码如下：

<template> <div id="app">  ![](./assets/logo.png)  <router-view></router-view>  <router-view name="title"></router-view>  <router-view name="img"></router-view> </div></template>

router/index.js

import Vue from 'vue'import Router from 'vue-router'import GoodsList from './../views/GoodsList'import Title from '@/views/Title'import Image from '@/views/Image'import Cart from '@/views/Cart'Vue.use(Router);export default new Router({ routers: {  {   path: '/',   name: 'GoodsList',   components: {    default: GoodsList,    title: Title,    img: Image   }  },  {   path: '/cart/:cartId',   name: 'cart',   components: Cart  } }})

Vue-resource和Axios

下载安装形式：

<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>npm install vue-ressource -save

vue-resource的申请api是依照rest格调设计的，提供7个申请api:

get(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body], [options])put(url, [body], [options])patch(url, [body], [option])

全局拦截器interceptors

Vue.http.interceptors.push{(request, next) => { // 申请发送前的解决逻辑 next((response) => {  // 申请发送后的解决逻辑  return response })})

vue-resource.html（全局拦截器）

mounted() { Vue.http.interceptors.push(function(request,next){  next(function(response){   return response;  }); });}

axios的应用

<script src="https://unpkg.com/axios/dist/aios.min.js"></script>npm install axios -save

示例：

function getUserAccount(){ return axios.get('/user/12345');}function getUserPermissions(){ return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function(acct, perms){}));

mounted: function(){ axios.interceptors.request.use(function(config){  return config; }) axios.interceptors.response.use(function(response){  return response; })}

ES6常用命令

函数的Rest参数和扩大，Promise应用，module.exports和es6 import/export的应用

let checkLogin = function () { return new Promise(function(resolve,reject){  let flag = document.cookie.indexOf("userId") > -1 ? true:false    if(flag) {   resolve({    status: 0,    result: true   })  }else{   reject("error");  } })};checkLogin().then(function(res){if(res.status==0){ console.log("login success");}}).catch((error)=>{ console.log(`error:${error}`);})

一旦有了名字就要大块来接管

export let sum = (x,y)=>{ return x+y;}export let minus  = (m,n) => { return m-n;}import {sum, minus} from './util'sum()console.log(`sum:${sum(1,2)}`);

import * as util from './util'// util.sum(1,2)

AMD,CMD,CommonJS和ES6

AMD是RequireJS在推广过程中对模块定义的规范化产出
CMD是SeaJS在推广过程中对模块定义的规范化产出
CommonJS标准-module.exports

示例：

exports.area = function(r){ return Math.PI * r * r;};

脚手架

Vue根底：环境搭建，模板，计算属性，类与款式，条件，列表渲染，事件处理，深刻理解组件，路由根底，Vuex根底。

vue-cli@3vue@2.5// 第一种搭建npm install -g @vue/cli// 第二种搭建yarn global add @vue/cli

v-bind缩写

// 残缺语法<a v-bind:href="url">...</a>// 缩写<a :href="url">...</a>

v-on缩写

// 残缺语法<a v-on:click="doSomething">...</a>// 缩写<a @click="doSomething>...</a>

自定义指令

申明自定义指令的名称，通过vue.directive申明，设置钩子函数，在什么机会做什么事件：

// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当被绑定的元素插入到DOM中时 inserted: function(el){  // 聚焦元素  el.focus() }})

钩子函数

一个指令定义对象能够提供如下几个钩子函数：

（初始化的操作）
bind，只调用一次，指令第一次绑定到元素时调用，在这里能够进行一次性的初始化设置。

inserted，被绑定元素插入父节点时调用，（仅保障父节点存在，但不肯定已被插入文档中）。

update，所在组件的VNode更新时调用，然而可能产生在其子VNode更新之前。指令的值可能产生了扭转，也可能没有，然而你能够通过比拟更新前后的值来疏忽不必要的模板更新。

componentUpdated，指令所在组件的VNode及其子VNode全副更新后调用。

unbind，只调用一次，指令与元素解绑时调用。

指令钩子函数会被传入以下参数

el，指令所绑定的元素，能够用来间接操作DOM。

binding，一个对象，蕴含以下属性：

name，指令名，不蕴含v-前缀
value，指令的绑定值，例如，v-my-directive="1+1"中，绑定值为2
oldValue，指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否扭转都可用。
expression，字符串模式的指令表达式，例如v-my-directive="1+"中，表达式为"1+1"
arg，传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"
modifiers，一个蕴含修饰符的对象，例如：v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}
vnode，vue编译生成的虚构节点。
oldVnode，上一个虚构节点，仅在update和componentUpdated钩子中可用。

除了el外，其它参数都应该是只读的，切勿进行批改。如果须要在钩子之间共享数据，倡议通过元素的dataset来进行。

计算属性

示例：

<div id="jeskson"> <p>{{message}}</p> <p>{{reversedMessage}}</p></div>

利用场景：具备依赖关系的数据监听。

事件

事件的定义以及缩写
事件传参和事件对象
疾速联合键盘事件晋升效率

事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是十分常见的需要。

vue.js为v-on提供了事件修饰符：

.stop.prevent.capture.self.once.passive

深刻理解组件

props，组件的参数传递；slot，插槽在组件形象设计中的利用；自定义事件，父子组件的通信形式。

生命周期钩子

beforeCreate组件创立前
created组件创立前
beforeMount组件挂载前
mounted组件挂载结束
beforeUpdate组件更新之前
updated组件更新结束
beforeDestory组件销毁前
destory组件销毁结束

示例：

<div id="app"> <h1>{{dada}}</h1> <button v-on:click="updateInfo">批改数据</button> <button v-on:click="destoryComponent">销毁组件</button></div>var vm = new Vue({ el: '#app', data: {  info: 'dadaqianduan.cn‘ }, beforeCreate: function(){  console.log("beforeCreated，组件创立前");  console.log(this.$el);  console.log(this.$data); }, created: function(){  console.log("created，组件创立结束");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, beforeMount: function() {  console.log("beforeMounted，组件挂载前");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, mounted: function(){  console.log("mounted，组件挂载结束");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, beforeUpdate: function(){  console.log("beforeUpdate，组件更新前");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, updated: function(){  console.log("updated，组件更新结束");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, beforeDestroy: function(){  console.log("beforeDestory，组件销毁前");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); }, destroyed: function(){  console.log("destoryed，组件销毁结束");  console.log(this.$el);  console.log(this.$data);  console.log(this.$data.info); },})

组件创立前-beforeCreate：组件创立前，组件须要挂载的DOM元素el和组件的数据data都未被创立。

el: undefineddata: undefined

组件创立结束-created：组件的数据曾经创立结束，然而DOM元素的el还没被创立

el: undefineddata: {info: 'dadaqianduan.cn’}

组件挂载前-beforeMount：DOM元素被创立，而data中的数据还没有

el有值，data有值，info没值

组件挂载结束-mounted：data中的数据有值。el,data,info都有值。
组件更新前-beforeUpdate：data数据曾经更新，dom元素的内容也同步更新。
组件更新结束-updated：data数据曾经更新，dom元素的内容也同步更新。
组件销毁之前-beforeDestroy：销毁前，不再受vue治理，然而能够持续更新数据，但模板曾经不再更新了。
组件销毁之前-destroyed：组件销毁结束，不再受vue治理。

生命周期阶段

new Vue()，新建vue实例
初始化，事件和生命周期
beforeCreate
初始化，注入和校验
created
是否指定el选项，是间接走判断（是否指定template选项），否-当调用vm.$mount(el)函数时（是否指定template选项）
是否指定template选项-（是：将template编译到render函数中，否：将el内部的html作为template编译）
beforeMount
创立vm.$el并用其替换el
mounted
挂载结束（如当data被批改时，调用beforeUpdate-，进入虚构DOM从新渲染并利用更新，调用updated。
当调用vm.$destroy()函数时。
beforeDestroy
解除绑定，销毁子组件以及事件监听器

15.销毁结束-destroyed

父子组件通信

父组件能够通过props传递给子组件，子组件能够通过$parent,$emit传递父组件。

// 组件援用<dada></dada>// 引入import Dada from './components/Dada'export default { name: 'App', // 注册 components: {Dada}}

流程：引入，注册，应用。

props

示例：

Vue.component('da-da', { props: ['textTitle'], template: '<h2>{{textTitle}}</h2>'})// 应用<da-da text-title="dadaqianduan.cn"></da-da>

prop类型如下：

props: {  title: String,  likes: Number,  isPublished: Boolean,  commentIds: Array,  author: Object,  callback: Function,  contactsPromise: Promise}

传递动态或动静prop

<da-da title="dadaqianduan.cn"></da-da>

prop能够通过v-bind动静赋值：

// 动静赋值<da-da v-bind:title="dada.title"></da-da><da-da v-bind:title="dada.title+'da da'+dada.author.name"></da-da>

父组件prop的更新会向下流动到子组件中，然而反过来则不行，这样会避免从子组件意外变更父级组件的状态，示意你不应该在一个子组件外部扭转prop，否则vue会在浏览器的控制台中收回正告。

这个 prop 用来传递一个初始值；这个子组件接下来心愿将其作为一个本地的 prop 数据来应用。在这种状况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值

示例：

props: ['dada'],data: function () {  return {    counter: this.dada  }}

以一种原始的值传入且须要进行转换。

示例：

props: ['size'],computed: {  normalizedSize: function () {    return this.size.trim().toLowerCase()  }}

prop验证

示例：

Vue.component('my-component', {  props: {    // 根底的类型查看 (`null` 和 `undefined` 会通过任何类型验证)    propA: Number,    // 多个可能的类型    propB: [String, Number],    // 必填的字符串    propC: {      type: String,      required: true    },    // 带有默认值的数字    propD: {      type: Number,      default: 100    },    // 带有默认值的对象    propE: {      type: Object,      // 对象或数组默认值必须从一个工厂函数获取      default: function () {        return { message: 'hello' }      }    },    // 自定义验证函数    propF: {      validator: function (value) {        // 这个值必须匹配下列字符串中的一个        return ['success', 'warning', 'danger'].indexOf(value) !== -1      }    }  }})

类型查看

type能够是下列原生构造函数中的一个：通过 instanceof 来进行查看确认。

StringNumberBooleanArrayObjectDateFunctionSymbol

$emit

子组件通过$emit向父组件传递通信。

vm.$emit(eventName,[...args])参数：1. {string} eventName2. [...args]触发以后实例上的事件，附加参数都会传给监听器回调。

子组件中执行$emit(eventName)时，就会触发父组件中对应的event。

'$parent:$parent是vue`的一个实例属性，它示意的是以后组件的父实例

如果父组件中有一个办法为sayDa，在子组件中能够间接应用this.$parent.sayDa去调用父组件的办法。

Vuex我的项目实战

Vuex的根本应用步骤
Vuex的外围概念
Vuex实现业务性能

Vuex概述

组件之间共享数据的形式

如果父组件要向子组件传值，应用v-bind属性绑定

如果子组件要向父组件传值，应用v-on事件绑定

兄弟组件之间共享数据：EventBus

$on接收数据的那个组件
$emit发送数据的那个组件

Vuex是什么

vuex是实现组件全局状态数据管理的一种机制，能够不便的实现组件之间数据的共享。

应用vuex对立治理状态的益处

1.可能在vuex中集中管理共享的数据，易于开发和前期保护

2.可能高效地实现组件之间的数据共享，进步开发效率

3.存储在vuex中的数据都是响应式的，可能实时保持数据与页面的同步

什么样的数据能够存储到vuex中

个别状况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中公有的数据，存储在组件本身的data中。

vue的根本应用

装置vuex依赖包

npm install vuex --save

导入vuex包

import Vuex from 'vuex'Vue.use(Vuex)

创立store对象

const store = new Vuex.Store({ // state中寄存的是全局共享的数据 state: {count:0}})

将store对象挂载到vue实例中

new Vue({ el: '#app', render: h=>h(app), router, // 将创立的共享数据对象，挂载到Vue实例中 // 所有的组件，就能够间接从store中获取全局的数据 store})

vuex的外围概念

组件拜访state中数据的第一种形式：

this.$store.state.全局数据名称

组件拜访state中的数据第二种形式：

// 从vuex中按需导入mapState函数import {mapState} from 'vuex'

通过刚导入的mapState函数，将以后组件须要的全局数据，映射为以后组件的computed计算属性：

// 将全局数据，映射为以后组件的计算属性computed: { ...mapState(['count'])}

Mutation用于批改store的数据

只能通过mutation变更Store数据，不能够间接操作Store中的数据。
通过这种形式尽管操作起略微繁琐一些，然而能够集中监控所有数据的变动。

// 定义Mutationconst store = new Vue.store({ state: {  count: 0 }, mutations: {  add(state) {   // 变更状态   state.count++  } }})

// 触发mutationmethods: { handle1() {  // 触发mutations的第一种形式  this.$store.commit('add') }}

能够在触发mutations时传递参数：

// 定义Mutationconst store = new Vuex.Store({ state: {  count: 0 }, mutations: {  addN(state,step){   // 变更状态   state.count += step  } }})

// 触发mutationmethods: { handle2() {  // 在调用commit函数  // 触发mutations 时携带参数  this.$store.commit('addN',1) }}

this.$store.commit()是触发mutations的第一种形式，第二种如下：

// 从vuex中按需导入mapMutations函数import {mapMutations} from 'vuex'

将须要的mutations函数，映射为以后组件的methods办法：

methods: { ...mapMutations(['add','addN'])}

不要在mutations函数中，执行异步操作

Action 用于解决异步工作。

如果通过异步操作变更数据，必须通过Action，而不能应用Mutation，然而在Action中还是通过触发Mutation的形式间接变更数据。

// 定义Actionconst store = new Vuex.store({ mutations: {  add(state){   state.count();  } }, actions: {  addAsync(context){   setTimeout(()=>{    context.commit('add')   },1000)  } }

// 触发Actionmothods: { handle() {  // 触发actions的第一种形式  this.$store.dispatch('addAsync'); }}

触发action异步工作时携带参数：

this.$store.dispatch('addNAsync',5)

触发actions的第二种形式：

// 从vuex中按需导入mapActions函数import {mapActions} from 'vuex'

将须要的actions函数，映射为以后组件的methods办法：

methods: { ...mapActions(['addAsync','addNASync'])}

import {mapState,mapMutations,mapActions} from 'vuexcomputed: { ...mapState(['count'])},methods: { ...mapMutations(['sub','subN']), ...mapActions(['subAsync']), btnHandler1(){  this.sub() }, btnHandle2(){  this.subN() }}

getter

vuex中的getter

Getter用于对Store中的数据进行加工解决造成新的数据

Getter能够对Store中已有的数据加工解决后造成新的数据。
Store中数据发生变化，Getter的数据会跟着扭转

const store = new Vuex.store({ state: {  count: 0 }, getters: {  showNum: state => {   return state.count  } }})

应用getters的第一种形式：

this.$store.getters.名称

应用getters的第二种形式：

import { mapGetters } from 'vuex'computed: { ...mapGetters(['showNum'])}

点赞、珍藏和评论

我是Jeskson(达达前端)，感激各位人才的：点赞、珍藏和评论，咱们下期见！(如本文内容有中央解说有误，欢送指出☞谢谢，一起学习了)

咱们下期见！

文章继续更新，能够微信搜一搜「 程序员哆啦A梦 」第一工夫浏览，回复【材料】有我筹备的一线大厂材料，本文 http://www.dadaqianduan.cn/#/ 曾经收录
github收录，欢送Star：https://github.com/webVueBlog/WebFamily

前言

Vue.js的倒退

hello world

Vue实例

模板

数据

办法

生命周期

文本插值

HTML属性

绑定表达式

过滤器

计算属性

Setter

表单控件

绑定value

class与style绑定

内联款式绑定

模板渲染

条件渲染

列表渲染

修饰符

Vue.extend()

内置指令

自定义指令

指令实例属性

过滤器

组件注册

组件props

组件间通信

$emit

$dispatch

子组件索引

组件缓存

生命周期：

自定义指令和过滤器

axios根底get申请

vue-axios全局配置和拦截器

vue-axios跨域解决

路由根底

router-link

vue框架比照

vue核心思想

nodejs和npm的装置和环境搭建

vue环境搭建以及vue-cli应用

vue根底语法

Vue-router

命令路由和命名视图

Vue-resource和Axios

ES6常用命令

AMD,CMD,CommonJS和ES6

脚手架

v-bind缩写

v-on缩写

自定义指令

计算属性

事件

深刻理解组件

生命周期钩子

生命周期阶段

父子组件通信

Vuex我的项目实战

vue的根本应用

vuex的外围概念

getter

点赞、珍藏和评论

咱们下期见！

组件`props`

`$emit`

`$dispatch`

`vue-axios`全局配置和拦截器

`vue-axios`跨域解决

`router-link`