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

46次阅读

共计 26199 个字符，预计需要花费 66 分钟才能阅读完成。

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

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

每天学习编程，让你离幻想更新一步，感激不负每一份酷爱编程的程序员，不管知识点如许奇葩，和我一起，让那一颗到处流荡的心定下来，始终走上来，加油，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 // true
vm.a === data.a // true

vm.a = 2
data.a // 2

data.a = 3
vm.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>

内联款式绑定

  1. 对象语法：间接绑定合乎款式格局的对象
<div v-bind:style="dada"></div>

data: {
 dada: {
  color: 'green',
  fontSize: '10px'
 }
}
<div v-bind:style="{fontSize: color:'green'}"></div>
  1. 数组语法：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': {}
 }
});

指令实例属性

  1. el指令绑定的元素
  2. vm，该指令的上下文 ViewModel，能够为new Vue() 的实例，也能够为组件实例。
  3. expression，指令的表达式，不包含参数和过滤器
  4. arg，指令的参数
  5. name，指令的名字
  6. modifiers，一个对象，蕴含指令的修饰符
  7. 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 中。

特点：

  1. 从浏览器中创立XMLHttpRequests
  2. 从 node.js 创立 http 申请
  3. 反对Promise api
  4. 拦挡申请和响应
  5. 转换申请数据和响应数据
  6. 勾销申请
  7. 主动转换 JSON 数据
  8. 客户端反对进攻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="..."> 会好一些。

  1. 无论是 html5 history 模式还是 hash 模式，它的体现行为统一，所以，当你要切换路由模式，或者在 ie9 降级应用 hash 模式，毋庸作任何变动。
  2. 在 html5 history 模式下，router-link会守卫点击事件，让浏览器不在从新加载页面。
  3. 当你在 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:

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

react:

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

vue 核心思想

数据驱动 和 组件化

nodejs 和 npm 的装置和环境搭建

  1. Webpack代码模块化构建打包工具
  2. Gulp基于流的自动化构建工具
  3. Grunt是 JavaScript 世界的构建工具
  4. Babel是应用最新的标准来编写js
  5. vue是构建数据驱动的 web 界面的渐进式框架
  6. 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-cli

vue init webpack-simple demo

vue init webpack demo2
a vue.js project

npm install

npm run dev

npm 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 组件

  1. 全局组件和部分组件
  2. 父子组件通信 - 数据传递
  3. 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@3
vue@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-focus
Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时
 inserted: function(el){
  // 聚焦元素
  el.focus()}
})

钩子函数

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

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

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

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

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

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

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

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

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

  1. name，指令名，不蕴含 v- 前缀
  2. value，指令的绑定值，例如，v-my-directive="1+1"中，绑定值为 2
  3. oldValue，指令绑定的前一个值，仅在 update 和componentUpdated钩子中可用，无论值是否扭转都可用。
  4. expression，字符串模式的指令表达式，例如 v-my-directive="1+" 中，表达式为"1+1"
  5. arg，传给指令的参数，可选。例如 v-my-directive:foo 中，参数为"foo"
  6. modifiers，一个蕴含修饰符的对象，例如：v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}
  7. vnode，vue编译生成的虚构节点。
  8. 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，插槽在组件形象设计中的利用；自定义事件，父子组件的通信形式。

生命周期钩子

  1. beforeCreate组件创立前
  2. created组件创立前
  3. beforeMount组件挂载前
  4. mounted组件挂载结束
  5. beforeUpdate组件更新之前
  6. updated组件更新结束
  7. beforeDestory组件销毁前
  8. 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: undefined

data: undefined

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

el: undefined

data: {info: 'dadaqianduan.cn’}

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

el 有值，data 有值，info 没值

组件挂载结束 -mounted：data 中的数据有值。el,data,info都有值。

组件更新前 -beforeUpdate：data 数据曾经更新，dom 元素的内容也同步更新。

组件更新结束 -updated：data 数据曾经更新，dom 元素的内容也同步更新。

组件销毁之前 -beforeDestroy：销毁前，不再受 vue 治理，然而能够持续更新数据，但模板曾经不再更新了。

组件销毁之前 -destroyed：组件销毁结束，不再受 vue 治理。

生命周期阶段

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

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 来进行查看确认。

String
Number
Boolean
Array
Object
Date
Function
Symbol

$emit

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

vm.$emit(eventName,[...args])

参数：1. {string} eventName
2. [...args]

触发以后实例上的事件，附加参数都会传给监听器回调。

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

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

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

Vuex 我的项目实战

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

Vuex 概述

组件之间共享数据的形式

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

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

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

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

Vuex 是什么

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

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

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

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

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

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

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

vue 的根本应用

  1. 装置 vuex 依赖包
npm install vuex --save
  1. 导入 vuex 包
import Vuex from 'vuex'
Vue.use(Vuex)
  1. 创立 store 对象
const store = new Vuex.Store({
 // state 中寄存的是全局共享的数据
 state: {count:0}
})
  1. 将 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 的数据

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

const store = new Vue.store({
 state: {count: 0},
 mutations: {add(state) {
   // 变更状态
   state.count++
  }
 }
})
// 触发 mutation

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

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

// 定义 Mutation
const store = new Vuex.Store({
 state: {count: 0},
 mutations: {addN(state,step){
   // 变更状态
   state.count += step
  }
 }
})
// 触发 mutation
methods: {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 的形式间接变更数据。

// 定义 Action
const store = new Vuex.store({
 mutations: {add(state){state.count();
  }
 },
 actions: {addAsync(context){setTimeout(()=>{context.commit('add')
   },1000)
  }
 }
// 触发 Action
mothods: {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 'vuex
computed: {...mapState(['count'])
},
methods: {...mapMutations(['sub','subN']),
 ...mapActions(['subAsync']),
 btnHandler1(){this.sub()
 },
 btnHandle2(){this.subN()
 }
}

getter

vuex 中的 getter

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

  1. Getter 能够对 Store 中已有的数据加工解决后造成新的数据。
  2. 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

正文完
javascript
发表至： javascript
2021-01-31
 0
js隐式转换
ReactVueNerv-任你选多端框架-Taro-发布-30-RC-版本
validform表单验证
关于javascript:作用域