愚人钊呀

vue下载与部分指令详解

vue

下载地址

前端框架

MVC与MVVM框架

Vue使用

Vue.js指令

编辑

v-if

v-else

v-show

v-on

v-model（表单绑定）

v-bind

v-for

v-text

v-model 指令扩展

vue

下载地址

官方入门：https://cn.vuejs.org/

API 文档：https://cn.vuejs.org/v2/guide/

GitHub 库：https://github.com/vuejs/vue

----------------------------------------------------------------------------------------

前端框架

封装与业务无关的重复代码，形成框架

框架的优势：提升开发效率、提高代码重用性、使前端开发变得简单

MVC与MVVM框架

MVC框架：链接

MVVM拆分解释为：

Model:负责数据存储
View:负责页面展示
View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

使用MVVM框架的优势：

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

Vue使用

1.将下载号的vue.js引入项目.

2.创建 view 视图

{{ msg }}

3.通过vue实例化一个vue对象

var vm = new Vue({

el: '#box', // el：‘选择器’

data: {

msg: 'hello, world!'

},

// 实例中，可以设置很多配置项

});

4.使用数据

将 data 中的变量 msg 放在双花括号内
修改 data 中的 msg ，会同 #box 内的步显示在页面中

实现原理分析：

DOM监听：

视图层发生变化，DOM监听到之后，会传到逻辑层进行处理。

数据绑定：

逻辑层把数据处理完成之后，通过数据绑定，把处理后的结构返回给视图层。

插值表达式

使用双大括号 { } 来包裹 js 代码构成插值表达式。

插值表达式作用

将双大括号中的数据替换成对应属性值进行显示。

Vue.js指令

指令（Directive）是特殊的带有 v- 前缀的特性

v-if

根据表达式的真假来插入和删除元素。

v-if="isShow">表达式的值为真，我就能显示

v-else

为v-if添加一个“else块”，v-else元素必须立即跟在v-if元素的后面，否则不能被识别

v-if="isShow">表达式的值为真，我就能显示

v-if不成立的时候，我就显示出来了

v-show

控制切换一个元素的显示和隐藏

v-show='isShow'>

v-on

HTML 元素绑定事件监听

事件名称 =‘函数名称()’

@事件名称 =‘函数名称()’

v-on:click='fn()'>toggle

//v-on: 可以简写成 @

v-model（表单绑定）

能轻松实现表单输入和应用状态之间的双向绑定

双向绑定

指的是我们在vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。

v-model = 变量

v-model 指令只能用在,