vue day01

一.框架和库的区别。
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。 例如：node 的 express框架

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求.例如：jQuery、 Zepot—移动端（0.4s延迟）等。

二.前端3大框架。

三.Vue简介
Vue (读音 /vjuː/，读音类似于 view) 是一套用于构建用户界面的渐进式框架。
通俗理解：
使用Vue可以让web开发变得更加简单，同时颠覆了传统前端开发模式，提供了现代web开发里常见的高级功能。
四.架构模式

五.Vue对比Jquery
①jQuery操作DOM举例，实现代码很简单，但是这样会使视图代码和业务 逻辑耦合在一起，随着功能增加，直接操作DOM也会使得代码越来越难以维护（02.html）。
②通过vue的MVVM模式，可以将其拆分为视图和数据两部分，并且将其分离。此时只需要关注数据即可，特别简单，DOM的相关操作Vue会搞定。

六.vue应用的创建
①创建根实例
将Vue实例绑定到变量app，事实上所有代码都是一个对象，写入Vue实例的选项的。Vue()构造函数的参数是一个键值对，内部包含app实例的各个选项。

②挂载根实例到元素上
首先第一个选项是el（element），用于指定页面中的DOM来挂载Vue实例，可以是HTMLElement或者CSS选择器。 挂载成功后可以通过app.el来访问该元素，此外还提供了其他常用属性和方法，都以 el来访问该元素，此外还提供了其他常用属性和方法，都以el来访问该元素，此外还提供了其他常用属性和方法，都以开头，后续一一讲解。

③绑定数据
声明数据分两种：2.指向已有变量
此时两者会默认建立双向绑定，当修改其中一个时，另一个也会一起变化。

七.文本插值
（1）语法格式：{{Vue实例数据变量}}
（2）特性：文本插值是双向绑定的，改变Vue实例数据变量的值，页面中文本插值的部分会重新渲染。
文本插值也可以进行基本运算和对象方法的执行

八.基本指令
指令是Vue.js模板里最常用的一项功能，带有v-前缀。
职责：当其表达式的值发生改变时，相应的将某些行为作用到DOM上。
常用基本指令：
（1）v-html原始HTML：取值为一个带有HTML标记代码的变量，该指令会将变量中的HTML代码翻译为最终的显示效果。

②v-once一次性绑定修饰符：该指令无需取值，让双向绑定变为单向绑定，直接添加到开始标签即可。
③v-pre跳跃编译修饰符：该指令无需取值，跳过文本插值的编译过程，显示文本原样。即跳过这个元素和它的子元素的编译过程，用来显示原始 Mustache 标签。

④v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。

⑤v-on事件绑定—>监听DOM事件
语法格式：v-on:eventTypeName=“functionName”
上面是事件函数调用，接下来定义函数，注意：事件处理函数必须书写在Vue实例的methods选项下
案例1：点击弹框

v-on事件绑定—>监听DOM事件
案例2：每次单击按钮显示按钮的单击次数

九.语法糖
简介：
语法糖是指在不影响功能的情况下，添加某种方法，实现相同的效果，进而方便开发。

Vue.js语法糖：
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了语法糖，也可以说是特定简写。
①v-bind:可以省略v-bind，直接写一个冒号。
②v-on:可以省略v-on，直接写一个@。