Vue.js 是什么？
Vue (读音 /vjuː/),是一套用于构建用户界面（前端）的渐进式框架
Vue 直接作用在 html 文件上，通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者： <!-- 生产环境版本，优化了尺寸和速度 --> <script src="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 的双向绑定
- 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时
-
<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 指令