Vue.js用法详解

Vue.js教程

Vue.js(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。

Vue只关注视图层，采用自下而上的增量开发设计。

Vue的目标是通过尽可能简单的API实现响应和组合视图组件的数据绑定。

Vue很容易学。本教程基于VUE 2 . 1 . 8版测试。

序

前段时间，我自学了一个数据查询项目的Vue。感觉这个框架还是很不错的。今天我就整理一下如何使用这个框架，希望对正在学习这个框架的朋友有所帮助~

首先，我们来看看Vue:

Vue.js是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue从根本上采用了最低成本和可增量采用的设计。Vue的核心库只关注视图层，很容易与其他第三方库或现有项目集成。另一方面，当与Vue生态系统支持的单文件组件和库相结合时，Vue还可以为复杂的单页应用程序提供强大的驱动程序。所以，Vue其实很厉害。

1.Vue.js安装和模板语法

Vue的使用非常简单，可以通过直接下载Vue.js或者导入Vue.min.js来使用

1-1模板语法

Vue.js使用基于HTML的模板语法，允许开发人员声明性地将DOM绑定到底层Vue实例的数据。

Vue.js的核心是一个允许您使用简洁的模板语法以声明方式将数据呈现到DOM中的系统。

结合响应系统，当应用状态发生变化时，Vue可以智能计算重新渲染组件的最小成本，并将其应用到DOM操作中。

1.html模板

html模板：基于DOM的模板，都是可以解析的有效HTML

插值：

文本：使用“小胡子”语法(大括号){ { value } }函数：替换实例上的属性值。当值改变时，插值内容将自动更新。您也可以使用v-text='value '来代替。

P{{ value }}p相当于p v-text='value'/p原生html:双大括号输出的文本不会解析html标记。也就是说，当一个实例的数据是html标记时，它不能被解析，而是直接输出。此时，如果要解析，可以使用v-html='value '来代替。

new vue({ data : { value : ` span我是span标签/span `} })；P{{ value }}p页面显示=span我是span标记/span p v-html='value'p页面显示=我是span标记。需要注意的是，有时候因为一些网络延迟等原因，用户会先看到购买年份的{{ xxx }}，然后才有数据。如果我们想避免这种效果，我们可以使用v-text='xxxx '来代替。

属性：用v-bind绑定可以响应变化。

h 23360 CLaSS=' { red 3360 show } ' title/H2=请注意，此处显示的是数据中的布尔数据。如果是真的，加红色类；如果为假，则删除红色类。

使用javascript表达式：您可以编写简单的表达式。(可以做简单的三项式运算，但不能写if语句。)未来会有计算属性。

{ 1 2 }{真的吗？是' : '否' }2。字符串模板

模板字符串

Tempalte=选项对象的属性

模板将替换已安装的元素。装载元素的内容被忽略，并且只有一个根节点。将html结构写在一对脚本标记中，并设置类型='x-template '。

body div id=' box '/div/body script src=' http : vue . js '/script script type=' text/JavaScript ' document . addeventlistener(' DOMContentLoaded '，function () { var str='h2hello pink！/h2' var vm=new Vue({ el: '#box '，template : str })；}，false)；/script

说明权重比较高，直接“替换”挂载点，替换原html后显示。

//代码片段这是使用脚本标签在内部定义模板。限制：它不能跨文件使用。您可以使用body div id=' box '/div/body script src=' http : Vue . js '/script script type=' x-template ' id=' str ' pI am a p tag/p/script script type=' text/JavaScript ' document . addeventlistener(' DOMContentLoaded '，function(){ var VM=new Vue({ El : ' # box '，template : ' # str ' })；}，false)；/scriptVue实例，每个应用程序通过Vue构造函数创建的根实例启动newVue(选项对象)。您需要传入一个选项对象，它包含悬挂元素、数据、模板、方法等。

El:挂载元素选择器- String|HtmlElementdata:代理数据-对象|函数方法：定义方法-对象

Vue代表数据，每个vue实例代表其数据对象中的所有属性，这些属性是响应性的。新增加的属性没有响应功能，更改后视图不会更新。

Vue实例自己的属性和方法，公开自己的属性和方法，以“$”开头，例如：$el，$data。

var vm=new Vue({ el: '#app '，data: { message: '您好，Datura！'}，methods : { test(){ alert(1)；} }，components : {//在此存储组件} })；/* vm是new */console.log(vm)的实例。$ data)；//即数据数据，后跟装载在vm(新)实例上的许多属性。//代码片段放在模板标签中。并给出一个id名称body template id=' tem ' p I am template/p/template div id=' box '/div/body script src=' http : Vue . js '/script script type=' text/JavaScript ' document . addeventlistener(' DOMContentLoaded '，function(){ var VM=new Vue({ El : ' # box '，template : ' # tem ' })；}，false)；/script3。模板--渲染功能

渲染函数非常接近编辑器渲染=选项对象属性

数据对象属性

Class: {}，=绑定类，apistyle:与on:类相同，=绑定样式，apiattrs:与v-bind:style相同，=添加行间属性domProps: {}，=DOM元素属性： {}，=绑定事件nativeOn: { }，=侦听本机事件方向： { }，=自定义指令scopedSlots: { }，=插槽范围slot:Insert key: 'key '，=向元素添加唯一标识符ref3360' ref '，=引用信息的条件2Vue.js，loop语句2-1条件语句v-if:根据真值或假值，将破坏并重建开关元件；=v-show在dom中已经消失：根据真值或假值，切换元素的显示属性；V-else:不满足条件时渲染；V-else-if:多条件判断，渲染if为真；一、如果

v-if命令用于条件判断：

div id=' app ' p v-if=' seed '现在你看到我了/p模板v-if='ok' p哈哈哈，打字真难！/p/template/div script new vue({ El : ' # app '，data: { seen 3360 true，ok : true}})/script在这里，v-if指令将根据所见表达式的值(true或false)决定是否插入p元素。

其次，v-else

您可以使用v-else指令向v-if添加一个“else”块：

随机生成一个数字，判断是否大于0.5，然后输出相应的信息：

div id=' app ' div v-if=' math . random()0.5 '抱歉/div v-否则不抱歉/div/div脚本new vue({ El : ' # app ' })/脚本iii，v-show

我们还可以使用v-show指令根据条件显示元素：

div id='app' h1 v-show='ok'Hello！/h1/scriptnewvue ({el:' # app '，data : { ok : true } })/script iv，v-else-if

2.1.0中增加了V-else-if。顾名思义，它用作v-if的else-if块。它可以在链中多次使用：

确定类型变量的值：

div id=' app ' div v-if=' type==' A ' ' A/div div v-else-if=' type==' B ' ' B/div v-else-if=' type==' C ' ' C/div div v v-else Not A/B/C/div/div script new vue({ El : ' # app，data : { type : ' C ' })/script[v-show和v-if的使用和比较]

v-show:根据真值或假值，切换元素的显示属性；

v-show的元素总是在DOM中呈现和维护。

v-show不支持模板语法。

v-if为true条件呈现，因为它将确保条件块中的事件侦听器和子组件在切换过程中被正确销毁和重建。

v-if具有更高的切换消耗，v-show具有更高的初始渲染消耗。

如果需要频繁切换，最好使用v-show，如果运行时条件不太可能改变，最好使用v-if

2-2循环语句v-for

语法：v-for=' items中的x '

x是指数；Items是一个数组，所以遍历

(2) V-for循环是不断创建新标签。我们决定标签中的内容通常放在一个数组中，然后遍历并显示。您也可以放置对象并遍历它们。

当v-if与v-for一起使用时，v-for的优先级高于v-if。

水果arr中的body div id='app' ul li v-for='(val，Key)' { val } }={ { Key } }/Li//列出流通的物品/ul/div/body script src=' http :/vue . js '/script script type=' text/Javascript ' document . addeventlistener(' DOM content loaded '，function(){ var VM=new vue({ El : ' # app '，data: {水果arr3360 ['apple '，' banana '，' orange '，' pear ']//数据源}，false)；/脚本

摘要

以上是边肖介绍的Vue.js用法的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！