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 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
详谈js模块化规范
Jul 07 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
原生JS实现分页
Apr 19 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
第八节 访问方式 [8]
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
解决laravel session失效的问题
2019/10/14 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
node.js实现快速截图
2016/08/27 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
JavaScript中Object值合并方法详解
2017/12/22 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
使用Python绘制图表大全总结
2017/02/11 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python3 实现口罩抽签的功能
2020/03/11 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
工厂门卫岗位职责范本
2014/04/04 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫