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 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 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调用mysql数据 dbclass类
2011/05/07 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
用javascript实现画板的代码
2007/09/05 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
社会保险接收函
2014/01/12 职场文书
2014信息公开实施方案
2014/02/22 职场文书
平面设计求职信
2014/03/10 职场文书
节能宣传周活动总结
2014/05/08 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
vue backtop组件的实现完整代码
2021/04/07 Vue.js
MongoDB 常用的crud操作语句
2021/06/20 MongoDB