Vue概念和常用命令介绍(1)

Vue.js简介

Vue.js是一个JavaScript MVVM(Model-View-View Model)库，非常简洁。Vue的核心只关注视图层，提供了比AngularJS更简单易懂的API。Vue尽量通过简单的API实现响应和组合视图组件的数据绑定。

Vue和MVVM模式

MVVM模式是模型-视图-视图模式。

Vue是数据驱动的。Vue绑定DOM和数据。一旦创建了绑定，DOM和数据将保持同步。每当数据发生变化，DOM就会发生变化。

ViewModel是Vue的核心，是Vue的一个例子。Vue实例的范围是一个HTML元素，它可以是一个主体，也可以是一个由id引用的元素。

DOM侦听器和数据绑定是实现双向绑定的关键。DOM侦听器监视页面所有View层中DOM元素的变化，当发生变化时，Model层中的数据也会相应变化；数据绑定会监听模型层中的数据，当数据发生变化时，视图层中的DOM元素也会随之变化。

Vue.js的特点

简洁：页面由HTML模板和Json数据Vue实例组成。数据驱动：属性的自动计算和依赖模板表达式的跟踪。基于组件：可重用且解耦的组件用于构建页面。轻量级：少量代码，独立于其他库。快速：准确有效。批量DOM更新模板友好：可以用npm、bower等方式安装，易于集成。

开始使用Vue.js的一个小例子

声明性呈现

该示例由HTML模板(视图)Json数据(模型)Vue实例(视图模型)组成。

要创建Vue的实例，需要传入一个选项对象，比如数据、挂载元素、方法、模块生命周期钩子等。在本例中，选项对象的el属性是#app，这意味着Vue实例装载在div id='app '上./div元素，并且数据属性是exampleData，这意味着模型是exampleData。View中的{{message}}是Vue的数据绑定语法，运行时{{message}}将被数据对象的message属性替换。

！Doctype HTML Headtitle声明性呈现/title metachartset=' UTF-8 '脚本src=' http:https://unpkg.com/vue/dist/vue.js'/script/headbody!-View-div id=' app ' { message } }/div脚本//Model var exampleData={ message : ' Hello Vue！}//viewmodelvar app=new vue({ El : ' # app '，data : example data })/script/body/html双向绑定

在Vue中使用v-model实现表单元素的双向绑定。当输入框中输入的信息发生变化时，p./p相应更改；当通过控制台中的控制台修改exampleData.message的值时，输入框中的信息会相应地更改。

！Doctype html lang=' en' headtitle双向绑定/title metacarset=' utf-8 '脚本src=' http:https://unpkg.com/vue/dist/vue.js'/script/headbody!-View-div id=' app ' p { { message } }/p输入类型='text' v-model='message' /div脚本//Model var exampleData={ message : ' Hello Vue！}//viewmodelvar app=new vue({ El : ' # app '，data : example data })/script/body/html running截图：

Vue.js的常用说明

Vue指令以v-开头，作用于HTML元素。将指令绑定到元素时，会在绑定的元素中加入一些特殊的行为，指令可以看作是特殊的HTML属性。

下面将介绍Vue中常用的几种内置说明。当然，除了内置指令，Vue还可以根据需求定制指令。

垂直中频指令

条件判断指令根据表达式的真值或假值插入或删除元素，表达式返回布尔值。语法如下：

v-if=“表达式”

示例：

在本例中，表达式为是、否和年龄25。yes的值为true，所以元素以HTML的形式显示，其他的都是一样的。

！doctype html lang=' en ' head title v-if指令/title meta charset=' utf-8 '脚本src=' http :3359 unpkg.com/vue/dist/vue.js'/script/head body div id=' app ' h1 v-if=' yes ' yes/h1 h1 v-if=' no ' no/h1 v-if=' age 25 ' age : { { age } }/h1/div脚本var app=new Vue({ el: '#app '，Data:

V-show指令

条件渲染指令，与垂直中频不同的是，无论电视节目的值为真实的或假的，元素都会存在于超文本标记语言代码中；而只有当垂直中频的值为没错，元素才会存在于超文本标记语言代码中电视节目指令只是设置了元素半铸钢钢性铸铁(铸造半钢)的风格值。语法如下：

v-show='expression '

例子：

！DOCTYPE html html lang=' en ' head title v-show指令/title meta charset=' utf-8 '脚本src=' http :3359 unpkg。com/Vue/dist/Vue。js '/script/head body div id=' app ' h1 v-show=' yes ' yes/h1 h1 v-show=' no ' no/h1 h1 v-show=' age 25 ' age : { { age } }/h1/div script var app=new Vue({ El : ' # app '，data:值为真no: false，//值为假年龄： 28 } })脚本/正文/html运行截图：

否则指令

可配合垂直中频或电视节目使用否则指令必须紧邻垂直中频或电视节目，否则该命令无法正常工作否则绑定的元素能否渲染在超文本标记语言中，取决于前面使用的是垂直中频还是电视节目。若前面使用的是如果，且垂直中频值为没错，则否则元素不会渲染；若前面使用的是电视节目，且电视节目值为没错，则否则元素仍会渲染到超文本标记语言。

v-for指令

循环指令，基于一个数组渲染一个列表，与Java脚本语言遍历类似，语法如下：

v-for="项目中的项目"

例子：

在本例中，数组是托多斯，依次遍历数组todos中的每个元素，将文本部分显示。

！DOCTYPE html html lang=' en ' head title v-for指令/title meta charset=' utf-8 '脚本src=' http :3359 unpkg。com/Vue/dist/Vue。js '/script/head body div id=' app ' ol Li v-for=' todo in todos ' { todo。text } }/Li/ol/div脚本var app=new Vue({ El : ' # app '，data : { todos :[{ text : '学习Javascript}]} })/脚本/正文/html运行截图：

在浏览器控制台里控制台，输入app。托多斯。push({ text : ' new item ' })，则会插入新的一条信息。

运行截图：

垂直装订指令

给数字正射影像图绑定元素属性，语法如下：

v-bind :参数="表达式"

其中，论点通常是超文本标记语言元素的特性，如：v-bind:class='expression '。

注：v形装订指令可以缩写为：冒号。如：class='expression '。

例子：

在本例子中，当鼠标悬停在跨度标签的文字上时，会显示加载网页的时间。

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' script src=' http :3359 UNP kg。com/Vue/dist/Vue。js '/脚本/头体div id=' app ' span v-bind : title=' message '将鼠标悬停在我身上/span/div脚本var app=new Vue({ El : ' # app '，data: { message: '您已加载此页面指令

用于监听数字正射影像图事件，语法与垂直装订类似，如监听点击事件on:click=' doSth '。

注：v-on指令可以缩写为@符号。如：@ click=' doSth '。

例子：

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' script src=' http :3359 unpkg。com/Vue/dist/Vue。js '/脚本/头体div id=' app ' pinput type=' text ' v-model=' message '/p p按钮v-:点击='问候'问候/按钮/p按钮v-3360点击='说(' Hello Vue ')' Hello/button/p/}，说：函数(msg){ alert(msg)；} } })/脚本/正文/html运行结果：

一个综合性例子

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' script src=' http :3359 UNP kg。com/Vue/dist/Vue。js '/脚本/头体div id=' app '字段集图例创建新/图例标签为=' name :/标签输入类型='text' v-model='newPerson.name '标签为=' age :/标签输入类型=' text ' v-model=' new person this . new person={ name : ' '，age: 0，sex: ' Male ' }，deletePerson:函数(索引){这个。人民。拼接(索引，1)；} } })/脚本/正文/html运行截图：

参考链接：

Vue.js 60分钟轻松入门

介绍vue.js

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。