标签：

Vue.js 是什么？

Vue (读音 /vju?/),是一套用于构建用户界面（前端）的渐进式框架

Vue 直接感化在 html 文件上，通过如下方法引入 Vue：

<!-- 开发环境版本，包罗了有辅佐的命令行警告 --> <script src="http://www.mamicode.com/https:/cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者： <!-- 出产环境版本，优化了尺寸和速度 --> <script src="http://www.mamicode.com/https:/cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一个允许给与简洁的模板语法来声明式地 将数据衬着进 DOM 的系统：

<div id="app"> {{ message }} </div> <script> var app = new Vue({ //绑定 DOM 标签，el 东西绑定 html 标签 el: ‘#app‘, // 数据声明，data 东西中声明数据变量，格局为 key:value()，在html 中使用 {{引用数据的 key}} data: { message: ‘Hello Vue!‘ } }) </script>

在 Vue 中 一切都是是以 键值对的方法来浮现： key:value 在 HTML 中如何获取 Vue 界说的数据声明？

使用数据绑定

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

使用双大括号：{{ 引用数据的 key }}　　

{{ }}的方法是文本插入值，会将括号内引用的数据作为字符串的形式展现

无论何时，绑定的数据东西上  message 属性产生了转变，插值处的内容城市更新，同理，当插值处（例如文本框type="text"）产生转变时，数据东西 message 也会产生转变

这就是 Vue 的双向绑定

通过使用  ，你也能执行一次性地插值，当数据转变时

<span v-once>这个将不会转变: {{ message }}</span>

　　

Vue 指令

指令 (Directives) 是带有 v- 前缀的特殊特性

指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)

例如：

<p v-if="seen">此刻你看到我了</p>

这里，v-if 指令将按照表达式 seen 的值的真假来 插入或者 移除  <p> 元素。( 若 seen 有值，且值不是null和 空字符串，就会 显示 <p> 标签 )

　　# 参数

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

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

在这里 href 是参数，奉告 v-bind  指令将该元素的  href 特性与表达式  url 的值绑定

另一个例子是 v-on 指令，它用于监听 DOM 事件

<a v-on:click="toMethod">一段文字。。。</a>

　　将 a 表绑定一个 click事件，当点击 a 标签时触发事件，将挪用 methods 中一个 名为 toMethod 的要领

methods:{ toMethod:function(){ alert("点击了 toMethod") } }

　　# 缩写

　　v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。然而，对付一些频繁用到的指令来说，就会感想使用繁琐。因此，，Vue 为 v-bind 和 v-on 这两个最常用的指令，供给了特定简写：

v-bind 缩写

<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>

v-on 缩写

<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>

Vue常用7个属性

el 属性

绑定 DOM 标签，el东西绑定 html 标签，指示 vue 编译器从什么处所开始解析 vue的语法

data 属性

数据声明，data 东西中声明数据变量，格局为 key:value()，在html 中使用 {{引用数据的 key}}

methods 属性

要领界说，在vue 中，要领必需界说在 methods 东西中

template

render

computed

watch

Vue 常用指令

v-bind 指令

    绑定 一个 HTML 标签的属性，该绑定是双向的

v-if 指令

v-else 指令

    条件判断

v-for 指令

    循环遍历: v-for="(i,index) in args"、v-for="i in args"

    此中 index 是循环的角标，通过声明 index 来获取角标

v-on 指令

　　用于给监听DOM事件，它的用语法和v-bind是类似的

v-show 指令

Vue.js 的根基语法