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如何调用qq互联api实现第三方登录
Mar 28 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
javascript帧动画(实例讲解)
Sep 02 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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 array_merge函数使用需要注意的一个问题
2015/03/30 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
python笔记(2)
2012/10/24 Python
python概率计算器实例分析
2015/03/25 Python
python多线程分块读取文件
2019/08/29 Python
python多进程并行代码实例
2019/09/30 Python
python编写猜数字小游戏
2019/10/06 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
详解python 中in 的 用法
2019/12/12 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
农场厂长岗位职责
2013/12/28 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书