VUE 渐进式JavaScript 框架

1.概念

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

2.起步

2.1创建vue-demo项目

使用hbuilderX对vue组件强大的支持
图片1.png

2.2引入vue.js

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.3每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

图片2.png
我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。
图片3.png

3基础

3.1模板语法 {{ 数据属性}}、 v-html、v-bind

图片 5.png图片 6.png图片 7.png图片 8.png

3.2条件渲染 v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy(真值)值的时候被渲染。

使用v-if控制切换一个元素是否显示也相当简单:图片 9.png
图片 10.png

继续在控制台输入 app.awesome = false,你会发现之前显示的消息消失了。
图片4.png

3.3v-else、v-else-if

  • v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
  • 可以使用v-else-if指令来充当 v-if 的“else-if 块”,可以连续使用。
  • 可以使用 v-else 指令来表示 v-if 的“else块”。
  • v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
  • v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-else、v-else-if示例:

图片5.png

图片 13.png

图片 14.png

3.4循环渲染 v-for

在 v-for 里使用数组

1. 我们可以用 v-for 指令基于一个数组来渲染一个列表。
2. v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
3. 在控制台里,输入 app2.todos.push({ message: '新项目' }),你会发现列表最后添加了一个新项目。
4. 在v-for 还支持一个可选的第二个参数,即当前项的索引。
5. 在 v-for 块中,我们可以访问所有父作用域的 property

图片6.png图片7.png图片8.png

在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的 property。

你也可以提供第二个的参数为 property 名称 (也就是键名):

还可以用第三个参数作为索引:

图片9.png图片10.png图片11.png

在v-for里使用对象集合

图片12.png图片13.png图片14.png

3.5事件监听 v-on

为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,
用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
通过它调用在 Vue 实例中methods中定义的方法:

图片15.png图片16.png图片17.png

3.6 指令、参数、修饰符、缩写

指令:

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:

<p v-if="seen">现在你看到我了</p>

这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 

 元素。

参数:

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute:

<a v-bind:href="url">...</a>

在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent="onSubmit">...</form>
缩写

v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的 attribute。

当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。

同时,在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:

图片18.png图片19.png

3.7表单输入绑定v-model实现双向数据绑定

图片20.png图片21.png

3.8表单输入绑定-修饰符

图片22.png图片23.png

src=http___image.biaobaiju.com_uploads_20190624_12_1561348967hjozintrMs.jpgrefer=http___image.biaobaiju.jpg

Q.E.D.