来自 软件资讯 2019-10-01 08:18 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

新人成长之入门Vue,快速上手

写在前面

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js

作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的非常简单,用起来也是非常的方便,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合,足以应付任何规模的应用。

MVVM模式

ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。

当创建了ViewModel后,双向绑定是如何达成的呢?

首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。

从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;

从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

如果你之前已经习惯了用jQuery、JS操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

Hello World示例

了解一门语言,或者学习一门新技术,编写Hello World示例是我们的必经之路。

这段代码在画面上输出"Hello World!"。

{{ message }}// 这是我们的Modelvar exampleData = { message:'Hello World!' }// 创建一个 Vue 实例或 "ViewModel"// 它连接 View 与 Modelnew Vue({ el:'#app', data: exampleData })

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View

定义Model

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

在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中,选项对象el属性指向View,el: '#app'表示该Vue实例将挂载到

...

这个元素;data属性指向Model,data: exampleData表示我们的Model是exampleData对象。

Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用一对大括号语法,在运行时{{ message }}会被数据对象的message属性替换,所以页面上会输出"Hello World!"。

Vue.js已经更新到2.0版本了,但由于还不是正式版,本文的代码都是1.0.25版本的。

双向绑定示例

MVVM模式本身是实现了双向绑定的,在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

{{ message }}

将message绑定到文本框,当更改文本框的值时,

{{ message }}

中的内容也会被更新。

Vue.js的常用指令

上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢?

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。

Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:

v-if指令    v-show指令    v-else指令    v-for指令    v-bind指令    v-on指令

Vue.js具有良好的扩展性,我们也可以开发一些自定义的指令,后面的文章会介绍自定义指令。

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery、JS等等。

v-if指令    

v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if="expression"

expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。

这是我第一次在博客上对于自己的学习成长经历进行记录,先从最简单的一些基本指令记起,下面开始

奥门威尼斯网址 ,v-show指令

v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。

Vue.js介绍

v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-else元素是否渲染在HTML中,取决于前面使用的是v-if还是v-show指令。这段代码中v-if为true,后面的v-else不会渲染到HTML;v-show为tue,但是后面的v-else仍然渲染到HTML了。

奥门威尼斯网址 1

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

v-for指令

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是一个数组,item是当前被遍历的数组元素。

我们在选项对象的data属性中定义了一个people数组,然后在#app元素内使用v-for遍历people数组,输出每个person对象的姓名、年龄和性别。

奥门威尼斯网址 2

Vue.js安装

v-bind指令

v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class    v-bind:argument="expression"

这个指令包含一个表达式,表达式的含义是:高亮当前页。

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入,官网链接:,

v-on指令

v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听元素的点击事件:

有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。

Greet按钮将它的单击事件直接绑定到greet()方法,而Hi按钮则是调用say()方法。

Vue.js环境详细安装教程可参考

v-bind和v-on的缩写

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。

声明式渲染第一个实例“helloword”

无论学习哪一种语言,第一步都会是用“helloword”打开这门语言的大门,Vue.js也是一样,看看是如何在Vue.js中输出“helloword”的。

奥门威尼斯网址 3奥门威尼斯网址 4

<div id="app">
  {{ message }}
</div>

helloword声明式渲染html部分

奥门威尼斯网址 5奥门威尼斯网址 6

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello word!'
  }
})

helloword声明式渲染JS部分

作用:简化字符串的拼接。

注意: 变化的部分使用{{}} 和Vue.js的v-text效果一样定义

 

常用指令总结

1.将上面helloword中的div中的内容换做input框的话,可实现双向绑定,input框中的你输入的内容与JS部分中的data中的message绑定

eg:

奥门威尼斯网址 7双向绑定v-model指令HTML部分

奥门威尼斯网址 8双向绑定v-model指令JS部分

2.v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;

eg:

奥门威尼斯网址 9奥门威尼斯网址 10

<div id="example01">
    <p v-if="male">Male</p>
    <p v-if="female">Female</p>
    <p v-if="age>25">Age:{{age}}</p>
    <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>

v-if指令html部分

奥门威尼斯网址 11奥门威尼斯网址 12

var vm= new Vue({
        el:"#example01",
        data:{
            male:true,
            female: false,
            age:29,
            name:'colin'
        }
    })

v-if指令JS部分

v-if指令只渲染他身后表达式为true的元素;在这里引入v-show指令,因为二者的区别是v-show指令会渲染他身后表达式为false的元素,这样的元素上会添加css代码:style="display:none"; 将上面v-if的实例代码改为v-show

3.v-show 与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none";

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:新人成长之入门Vue,快速上手

关键词: