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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

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

Vue.js有什么优点呢？

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

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

<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

3.Vue实例

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

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

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

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>

单次插值：

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

9.HTML属性

示例：

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

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

示例：

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

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

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

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

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

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中自定义指令的使用

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引入图片的方法

  • 移动端常见样式问题

  • 文本超出隐藏

常用功能

  • 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的特点

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

以上是 前端开发Vue教程笔记（一） 的全部内容， 来源链接： utcz.com/z/376729.html

回到顶部