vue2.0实战之基础入门(1)


Posted in Javascript onMarch 27, 2017

最近公司的H5项目准备重构,部门老大说前端使用vue2.0来开发,所以就准备把整个项目的开发过程记录下来,一方面是为了记录开发过程中遇到的坑,另一方面也加强自己写作的能力。

什么是 Vue?

简要介绍一下vue,vue就是一个前端框架,特点是 数据双向绑定,比如说改变input输入框里的内容,就会自动同步更新到页面上绑定该输入框的组件的值。

看一下官方对vue的介绍:

 Vue.js,读音 /vjuː/,和view发音几乎一样,可见重心是在视图(view)层上的。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示,而Vue通过操作数据来实现页面的更新与展示。下面便是Vue数据驱动的概念模型:

vue2.0实战之基础入门(1)

Vue.js主要负责的是上图绿色正方体ViewModel的部分,其在View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。

当View层的视图发生改变时,Vue会通过DOM Listeners来监听并改变Model层的数据。相反,当Model层的数据发生改变时,其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能,也是Vue.js数据驱动的原理所在。

首先我们来写一个hello word!

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="vue.js"></script>
</head>
<body>
 <div id="app">
  {{message}}
 </div>
</body>
<script>
 var app = new Vue({
  el: '#app',
  data: {
   message:'Hello world!'
  }
 })
</script>
</html>

看似很简单的实现一个字符串的渲染,其实vue在背后做了很多的操作,通过vue,现在数据和DOM已经被绑定到了一块,我们可以通过app.message来修改内容,我们可以看到页面的内容也相应进行了更新。

构造器

我们会发现每个页面都会new一个Vue,因为每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例也就是这里所说的构造器。在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在API 文档中查看。

vue指令

在Vue项目的开发中,我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令,我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是常用指令的简单介绍:

(1)v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法
(2)v-html: 用于更新绑定元素中的html内容,类似于jQuery的html()方法
(3)v-if: 用于根据表达式的值的真假条件渲染元素,如果上图P3为false则不会渲染P标签
(4)v-show: 用于根据表达式的值的真假条件显示隐藏元素,切换元素的 display CSS 属性
(5)v-for: 用于遍历数据渲染元素或模板,如图中P6为[1,2,3]则会渲染3个P标签,内容依次为1,2,3
(6)v-on: 用于在元素上绑定事件,图中在P标签上绑定了showP3的点击事件

关于更多的Vue指令可以查看Vue2.0文档,地址:https://vuefe.cn/api/#指令

属性与方法

在每个 Vue 实例中都会代理其 data 对象里所有的属性。

var data = { a: 1 }
var vm = new Vue({
 data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 属性,Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。具体请查阅API文档中的实例属性一节。

MVC & MVVM

MVC是一种在后端开发中广泛采用的架构模式,几乎所有的知名后端框架都是传统 MVC 的实现,由于其中的 一些小差异,也可以被叫做 MV*

MVC模式的意思是,软件可以分成三个部分。

vue2.0实战之基础入门(1)

视图(View):用户界面。

控制器(Controller):业务逻辑

模型(Model):数据保存

各部分之间的通信方式如下:

vue2.0实战之基础入门(1)

  • View 传送指令到 Controller
  • Controller 完成业务逻辑后,要求 Model 改变状态
  • Model 将新的数据发送到 View,用户得到反馈所有通信都是单向的

MVVM,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。Angular 和 Ember 都采用这种模式。

vue2.0实战之基础入门(1)

我们可以直接在一个html页面里通过引入Vue.js来直接写Vue代码,但是这样的方式并不常用。因为如果我们的项目比较大,项目中会存在很多页面,一旦每个页面都引入一个Vue.js或者声明一个Vue实例,这样非常不利于后期的维护和代码的公用,也会存在实例名冲突的情况,所以我们需要用到Vue提供的技术栈来构建强大的前端项目。

1.vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
2.vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
3.vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。
4.ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
5.NPM:node.js的包管理工具,用于同一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
6.webpack:一款强大的文件打包工具,可以将我们的前端项目文件同一打包压缩至js中,并且可以通过vue-loader等加载器实现语法转化与加载。
7.Babel:一款将ES6代码转化为浏览器兼容的ES5代码的插件

利用以上等技术,我们便可以开始构建我们的Vue项目了。具体内容请关注下期!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
原生JS轮播图插件
Feb 09 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
AngularJs 常用的过滤器
May 15 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
jQuery中的deferred使用方法
Mar 27 #jQuery
Angular2利用组件与指令实现图片轮播组件
Mar 27 #Javascript
Vue 过渡实现轮播图效果
Mar 27 #Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 #Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 #Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 #Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 #Javascript
You might like
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
jquery插件之easing使用
2010/08/19 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python图像读写方法对比
2020/11/16 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
教师师德反思材料
2014/02/15 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
php 原生分页
2021/04/01 PHP
Vue.Draggable实现交换位置
2022/04/07 Vue.js
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android