前端开发Vue教程笔记（一）

港控/mmm° 2022-08-31 04:40 222阅读 0赞

![cf89be751f0408d26fb530c5cfc1f4a8.png][]

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油。

这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲，其作者是我国尤雨溪，为了给个人开发提供更多的机遇打造出门槛低、成本低、跨设备和多平台的Vue.js。

### Vue.js有什么优点呢？ ###

1、**Vue 更容易上手**。目前Vue是排名第三的前端框架。正式因为他简单易学，很多前端开发工程师可以很快掌握并且应用到实际开发中。

2、**Vue 的语法很自由**。前期不需要认识复杂的生命周期函数，可能只关心 mounted 和 Vue.nextTick；熟悉的前端模板；父子组件间通信更灵活。slot，可以大尺度地扩展组件（但也不要过度使用哦）；v-model，mvvm 的方式处理表单更方便；官网中文文档。

作为一名Vue开发使用者，必须了解其使用规则。本文为连载文章，持续更新中~

### 1.Vue.js的发展 ###

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

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

### 2.hello world ###

引入`vue.js`

通过`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

### 3.Vue实例 ###

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

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

![1e4b2686edd44b069b6ecc33507514e6.png][]

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

### 4.模板 ###

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

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

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

### 5.数据 ###

`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>'
    })

### 6.方法 ###

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

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

### 7.生命周期 ###

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

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

`beforeMount`，在`mounted`之前运行。

`mounted`，在编译结束时调用，此时所有指令已生效，数据变化已能触发`DOM`更新，但不保证`$el`已插入文档。

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

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

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

`activated`，需要配合动态组件`keep-live`属性使用，在动态组件初始化渲染的过程中调用该方法。

### 8.文本插值 ###

数据绑定基础形式是文本插值，使用`{ {}}`，为`Mustache`语法：

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

单次插值：

### 9.HTML属性 ###

示例：

### 10.绑定表达式 ###

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

### 11.过滤器 ###

`vue`允许在表达式后添加可选的过滤器，以管道符 `"|"`指示，可以有多个过滤器链式使用：

{
       {time | paramsTime}}

### 12.计算属性 ###

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>

### 13.Setter ###

示例：

### 14.表单控件 ###

输入框示例：

<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>

### 15.绑定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

### 16.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’>

### 17.内联样式绑定 ###

1.  对象语法：直接绑定符合样式格式的对象

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

1.  数组语法：`v-bind:style`允许将多个样式对象绑定到统一元素上。

### 18.模板渲染 ###

前端渲染的优点：

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

第二，计算量得转移，原本需要后端渲染得任务交给了前端，减轻了服务器得压力。

后端渲染的优点：

第一，对搜索引擎比较友好。

第二，首页加载时间端，后端渲染加载完成后就直接显示`html`，但前端渲染在加载完成后还需要有段`js`渲染的时间。

### 19.条件渲染 ###

`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` 有更高的初始渲染消耗

### 20.列表渲染 ###

示例：

<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'})

为了帮助大家对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，整理了85道 Vue 面试题，整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！

### Vue 面试题总结 ###

#### **vue-cli工程** ####

*  构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
 *  vue-cli 工程常用的 npm 命令有哪些？
 *  请说出vue-cli工程中文件夹和文件的用处
 *  config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
 *  请你详细介绍一些 package.json 里面的配置

#### **vue核心知识点** ####

*  对于Vue是一套渐进式框架的理解
 *  vue.js的两个核心是什么？
 *  请问 v-if 和 v-show 有什么区别
 *  vue常用的修饰符
 *  v-on可以监听多个方法吗？
 *  vue中 key 值的作用
 *  vue-cli工程升级vue版本
 *  vue事件中如何使用event对象？
 *  $nextTick的使用
 *  Vue 组件中 data 为什么必须是函数
 *  v-for 与 v-if 的优先级
 *  vue中子组件调用父组件的方法
 *  vue中 keep-alive 组件的作用
 *  vue中如何编写可复用的组件？
 *  什么是vue生命周期？
 *  vue生命周期钩子函数有哪些？
 *  vue如何监听键盘事件中的按键？
 *  vue更新数组时触发视图更新的方法
 *  vue中对象更改检测的注意事项
 *  解决非工程化项目初始化页面闪动问题
 *  v-for产生的列表，实现active的切换
 *  v-model语法糖的组件中的使用
 *  vue中自定义过滤器
 *  vue等单页面应用及其优缺点
 *  什么是vue的计算属性？
 *  vue-cli提供的几种脚手架模板
 *  vue父组件如何向子组件中传递数据？
 *  vue弹窗后如何禁止滚动条滚动？
 *  计算属性的缓存和方法调用的区别
 *  vue-cli中自定义指令的使用

![e46f43d80c40395e4d8b178319177da4.png][]

#### **vue-router** ####

*  vue-router如何响应 路由参数 的变化？
 *  完整的 vue-router 导航解析流程
 *  vue-router有哪几种导航钩子（ 导航守卫 ）？
 *  vue-router传递参数的几种方式
 *  vue-router的动态路由匹配
 *  vue-router如何定义嵌套路由？
 *  组件及其属性
 *  vue-router实现路由懒加载（ 动态加载路由 ）
 *  vue-router路由的两种模式
 *  history路由模式配置及后台配置

#### **vuex** ####

*  什么是vuex？
 *  使用vuex的核心概念
 *  vuex在vue-cli中的应用
 *  在vue中使用vuex，修改state的值
 *  vuex actions异步修改状态

#### **http请求** ####

*  Promise对象是什么？
 *  axios、fetch与ajax有什么区别？
 *  什么是JS的同源策略和跨域问题？
 *  如何解决跨域问题？
 *  axios有什么特点？

#### **UI样式** ####

*  .vue组件的scoped属性的作用
 *  如何让CSS只在当前组件中起作用？
 *  vue-cli中常用的UI组件库
 *  如何适配移动端？【 经典 】
 *  移动端媒体查询
 *  vue内容垂直和水平居中
 *  vue-cli引入图片的方法
 *  移动端常见样式问题
 *  文本超出隐藏

![8e8c1a4e6e27ce1efd12972b58f97817.png][]

#### **常用功能** ####

*  vue中如何实现tab切换功能？
 *  vue中keep-alive 实现标签页组件缓存
 *  vue中实现页面从右往左侧滑入效果
 *  vue中父子组件如何相互调用方法？
 *  vue中央事件总线的使用

#### **MVVM设计模式** ####

*  MVC、MVP与MVVM模式
 *  MVC、MVP与MVVM的区别
 *  MVVM的实现原理
 *  Object.defineProperty()方法
 *  ES6中定义的类和对象
 *  JS中的文档碎片
 *  解构赋值
 *  Array.from
 *  Array.reduce
 *  递归的使用
 *  Obj.keys()与Obj.defineProperty
 *  发布-订阅模式
 *  vue项目优化，缩短首屏加载时间

#### **深入拓展** ####

*  vue开发命令 npm run dev 输入后的执行过程
 *  vue的服务器端渲染
 *  从零写一个npm安装包
 *  vue-cli中常用到的加载器
 *  webpack的特点

![a6618f74c484f78262ba40404bff24c8.png][]

#### 由于篇幅限制，仅截图展示部分内容，完整版PDF资料免费分享，只需你点赞支持，[点击此处就可免费领取][Link 1] ####

[cf89be751f0408d26fb530c5cfc1f4a8.png]: /images/20220829/753129a30df6431a8783e4cb890d28ce.png
[1e4b2686edd44b069b6ecc33507514e6.png]: /images/20220829/0edd8f67edec43858b3be8ba9bd58470.png
[e46f43d80c40395e4d8b178319177da4.png]: /images/20220829/534acff1bea04703bc482219480ff46f.png
[8e8c1a4e6e27ce1efd12972b58f97817.png]: /images/20220829/1b581b522e8b451b8d489a996ddf93ba.png
[a6618f74c484f78262ba40404bff24c8.png]: /images/20220829/15207b5e968449b38f374124aa25323c.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NgZqxZAa