Vue.js高效前端开发 • 【初识Vue.js】

一、Vue概述

1、Web前端框架介绍

近几年 互联网前端行业发展得依旧迅猛 涌现出了很多优秀的JavaScript框架 同时这些JavaScript框架也正在逐渐改变统的前端开发方式。

在这些新出现的JavaScript框架中 最具代表性的框架有Angular.js、React.js和Vue.js。

2、MVC和MVVM

MVC是著名的设计模式 基本思想是将软件结构分解为Model 模型 、View 视图 和Controller 控制器 三部分组成。

Model 主要负责数据处理和运算。

Controller 主要负责接收输入的数据并控制选择使用哪个View显示。

View 主要负责显示数据和用户交互。

MVVM设计模式是由Model 模型 、View 视图 和ViewModel 视图模型 三部分组成 是MVC设计模式的进化版 即Controller转变为ViewModel。

这种模式可以使View的变化自动化更新到ViewModel 而ViewModel的变化也会自动同步到View上显示。

3、Vue介绍

Vue是构建Web界面的JavaScript库 原称为Vue.js 它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统。它提供了现代Web开发中常用的高级功能

比如

解耦视图和数据。可复用的组件。数据绑定。功能插件化。虚拟DOM Virtual DOM 。

4、安装Vue

使用Vue之前先安装vue.js 有两种方式安装Vue.js。

安装独立版本

 script src “js/vue.min.js /script 

使用CDN引入

 script src https://cdn.bootcss.com/vue/2.6.10/vue.min.js /script 

二、Vue使用

1、第一个Vue应用

使用Vue的过程就是定义MVVM各个组成部分的过程 其过程步骤如下

定义View :

 !--这是View-- 

 div id app 

 {{ message }}

 /div 

定义Model

// 这是Model

var exampleData {

 message: Hello World! 

};

创建一个Vue实例或ViewModel 它用于连接View和Model。

// 创建一个Vue实例或ViewModel 它连接View与 Model

var vm new Vue({

 el: #app ,

 data: exampleData

});

2、Vue的双向绑定

在Vue.js中 ViewModel、View以及Model进行交互的方式 如下图所示

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定

示例:

html代码

 !--这是View-- 

 div id app 

 p {{ message }} /p 

 input type text v-model message / 

 /div 

JavaScript代码

// 这是Model

var exampleData {

 message: Hello World! 

// 创建一个Vue实例

var vm new Vue({

 el: #app ,

 data: exampleData

});

v-model双向绑定

当更改文本框的值时

{{ message }}

中的内容也会被更新

3、实践练习

三、Vue生命周期

1、Vue的实例和数据

Vue应用的创建很简单 语法如下面代码所示

语法:

var vm new Vue({

 // 选项参数

});

通过构造函数Vue就可以创建一个Vue的根实例 并启动Vue应用

常用的选项参数包含如下

示例 通过Vue实例的data选项 可以声明应用内需要双向绑定的数据。

也可以将所有会用到的数据都预先在data内声明 这样不至于将数据散落在业务逻辑中 难以维护

HTML代码:

 div id app /div 

当挂载成功后 就可以通过vm.$el来访问该元素

JavaScriput 代码:

var vm new Vue({

 el:document.getElementById( app ) // 或者是#app

});

示例 通过Vue实例的data选项 可以声明应用内需要双向绑定的数据。也可以将所有会用到的数据都预先在data内声明 这样不至于将数据散落在业务逻辑中

HTML代码:

 div id app /div 

• 1

所有会用到的数据预先在data内声明

JavaScript代码:

var vm new Vue({

 el: #app ,

 data:{

 title: ,

 user:{

 name: ,

 age:0

});

示例

在Vue实例内部访问data中的数据时一般使用“this.数据”的方式 如果在Vue实例外部访问data中的数据时 使用Vue实例对象来访问

JavaScript代码:

var vm new Vue({

//…data代码同上例

 methods:{

 doSave:function(){

 console.log( 姓名 ,this.user.name)

var vm new Vue({

//…data代码同上例

// 在Vue实例外部访问data中的数据

console.log(vm.user.name);

在实例外部 使用实例对象的方式访问

2、Vue生命周期钩子函数

Vue实例有一个完整的生命周期 也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程 称为Vue的生命周期。

通俗说Vue实例从创建到销毁的过程 就是它的生命周期。

每个Vue实例创建时 都会经历一些系列的初始化过程 同时也会调用相应的生命周期函数 这些生命周期函数称为“钩子函数”

开发者可以利用这些钩子函数 在合适的时机执行相关业务逻辑代码。在Vue实例的生命周期 钩子比较常用的函数有

created()函数 实例建立完成后调用

mounted()函数 el挂载到实例上后调用

beforeDestroy()函数 实例销毁之前调用

示例 下面示例中,在created()钩子函数中对模型加载数据 而在mounted()函数中读取el绑定的元素的信息。

HTML代码:

 div id app 

 h1 {{ title }} /h1 

 /div 

JavaScript代码:

...

created:function() {

 this.title 生命周期钩子函数 

 console.log( created()钩子函数执行... 

...

...

mounted:function() {

 console.log(this.$el);

 console.log( 模型title的值: ,this.title);

 console.log( mounted()钩子函数执行... 

...

3、实践练习

四、过滤器

1、过滤器使用

Vue.js支持在{{}}的插值的尾部添加一个管道符 “|” 对数据进行过滤

创建过滤器有两种方式

全局创建过滤器局部创建过滤器

语法:

//创建全局过滤器

Vue.filter( 过滤器名 ,function(val){

 过滤语句

});

//创建局部过滤器

var vm new Vue({

 el: #app ,

 filters:{

 过滤器名:function(val){

 过滤语句

});

 div id app 

 {{ 模型数据 | 过滤器 }}

 /div 

示例 使用过滤器实现将英文单词转换为首字母大写显示。

HTML代码

 div id app 

 div class banner 

 {{ text | tranformFilter }}

 /div 

 /div 

JavaScript代码

//…

filters: {

 tranformFilter: function (val) {

 var strs val.split( 

 var result 

 for (var i i strs.length; i ) {

 result strs[i].charAt(0).toUpperCase() strs[i].substring(1) 

 return result;

//…

2、实践练习

总结

Vue是构建Web界面的JavaScript库。 使用Vue的过程就是定义MVVM各个组成部分的过程 其过程步骤如下 定义View。

定义Model。 创建一个Vue实例或ViewModel 它用于连接View和Model。

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定

Vue实例有一个完整的生命周期 也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程 称为Vue的生命周期

Vue.js支持在{{}}的插值的尾部添加一个管道符 “|” 对数据进行过滤 经常用于格式化文本 比如字母全部大写、货币千位使用逗号分隔等。

前端开发面试题—Vue的生命周期 今天分享一下我遇到很多次的前端面试题，就是Vue的生命周期，比如说问生命周期的过程有多少种钩子函数，分析解释一下生命周期过程中每个钩子函数都做了什么。
前端开发：在vue中实现按钮倒计时功能 在vue中开发中，关于计时器的使用也是比较常见的知识点，如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求，很常见的需求也不复杂，主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法，方便查阅使用，如有问题请指正。
前端开发：VS Code编辑器新建Vue文件自定义模板的方法 在前端开发过程中，尤其是对于经验不足的初级开发者来说，需要掌握一些必备的提升开发速度的技巧，比如使用各种插件来提升开发速度，这样才能事半功倍。
1024特刊｜前端开发：Vue路由传递参数和重定向的使用总结 前端开发过程中，作为前端开发者来说关于vue的使用并不陌生，vue相关常用的知识点也是非常重要的，不管是在实际开发中还是在求职面试中都很重要。在vue使用中，路由相关的知识点是非常重要的，而且在实际开发中也是必用知识点，那么本篇博文就来聊聊vue的路由参数传递和路由重定向相关的知识点。