Vue介绍 vue - 锐客网

一、vue介绍
1.Vue.js是用于构建交互式的 Web 界面的库。
2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。
3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架,Vue.js 更容易上手。
4.Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。

文章图片

5.内核生成：Es6和--->类和继承
6.Model：js对象。
View：html视图。
通过事件驱动去监听视图的变化，方法和指令，监听视图对象的方法。
双向绑定（v-model）；
DOM事件：JS;
7.Css\js\html\-->js类，模式：MVC模式（虚拟DOM），单向数据流，js的角度封装
8.vue是单独拿出来，MVVM模式（分开的，用事件去监听DOM），双向数据流，采用指令(标记中的一个属性)
二、 Vue的实例 1.构造器：
每个 Vue.js应用都是通过构造函数Vue创建一个 Vue的根实例启动的
var Vm = new vue({
//选项
})
2.在实例化Vue时,需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项.
3.属性和方法：
Var data=https://www.it610.com/article/{a:1}
Var vm=new vue({
data:data
})
Data是存在动态属性和对象的，相当于react里的state。
4.el:’#id’-----是将vue的动态信息绑定在dom结构上，相当于react-dom里的render方法.
注意：搭环境的时候添加：Mode:”develoads”
5.
(1)在模板中绑定表达式是非常便利的,但是它们实际上只用于见简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。
(2)为了不让模板过重我们都是使用计算属性:
1)Vue中data放定义的数据内容。
2)Computed放计算的属性内容。
6.计算缓存methods：（展示存在的东西）
1.我们可以将同一函数定义为一个 method而不是一个计算属性。对于最终的结果，两种方式确实是相同的.
2.不同的是计算属性是基于它们的依赖进行缓存的。
3.计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问reversedMessag计算属性会立即返回之前的计算结果,而不必再次执行函数
4.只要发生重新渲染，method调用总会执行该函数。
通过事件完成的功能，调用方法，用完重新计算
7.模板语法------缩写
V- 前缀在模板中是作为一个标示Vue特殊属性的明显标识。当你使用Vue.js为现有的标记添加动态行为时，它会很有用，但对于一些经常使用的指令来说有点繁琐。同时，当搭建Vue.js管理所有模板的SPA时,V-前缀也变得没那么重要了。因此, Vue.js为两个最为常用的
指令提供了特别的缩写:
v-bind缩写:

V-on缩写

8.计算侦听-watch
Vue提供了一种更通用的方式来观察和响应 Vue实例上的数据变动:侦听属性。
应用:通常用在数据变化时执行异步或开销较大的操作时,特殊的方式会用到，实时监听，占缓存比较大，开销比较大。
如果操作比较简单,一般用的computed。

三、 Vue的生命周期
文章图片

文章图片

文章图片

初始化的注入：里面是一个事件系统，created，架构
是否指定"el":没有的话要DOM结构上绑定对象
是否具有模板：是的话进行虚拟DOM，渲染模板。不是的话进行真实的DOM，输出在html中。
模板之后创建实例化对象，渲染实例，相当于willmount

函数封装：（内核原理）
在底层的实现上,Vue将模板编译成虚拟 DOM渲染函数。结合响应系统，在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM 操作上。
文本：
数据绑定最常见的形式就是使用"Mustache" 语法(双大括号)的文本插值:
Message: {{ msq }}
通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
四、条件渲染 1.v-if有两种用法，可以使用在文本里，也可以在模板里。
节点模板使用方式v-if.html
2.v-else给v-if添加一个else块。
v-else.html
3.v-else-if:vue2.0新增的模块。
v-else-if.html
4.v-show:根据条件展示元素
v-show 的元素始终会被渲染并保留在DOM中。v-show是简单地切换元素的CSS属性 display。
v-if:多根据里面的条件去判断里面的DOM结构是否加载。
v-show:少始终被渲染，只是改变里面的 display：none属性。
【Vue介绍】index.html:

文章图片

index.js:

文章图片

5.v-for指令需要以item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。(遍历对象的语法)--------例如:v-for.html
6.在模板中使用:v-for模板.html
7.迭代对象:v-for对象.html
8.迭代对象加属性:index:下标，key关键字，value:值,位置不能变化,名字可以随意起
9.v-for属性加参数.htm
index.html:

文章图片

index.js:

文章图片

10.循环整数:v-for整数.html
index.html:

文章图片

index.js:

文章图片

效果图：

文章图片

11.使用v-on监听dom事件
使用方式:v-on:事件名称例如v-on:click,监听单击事件
例如:监听dom事件:v-on-dom.html
方法事件:v-on-function.html
当逻辑处理较复杂的时候,可以定义一个方法处理,v-on可以接受一个方法。
内联处理器方法：v-on-内联.html
12.Vue.js为 v-on提供了事件修饰符来处理 DOM 事件细节:
.stop: 阻止单击事件冒泡
.prevent:阻止默认事件
.capture:事件捕获
.self :事件本身
.once :事件只触发一次(2.1.4版本新增)
13.阻止单击事件冒泡:
提交事件不再重载页面:

修饰符可以串联:
只有修饰符:
添加事件侦听器时使用事件捕获模式:...
只当事件在该元素本身(而不是子元素)触发时触发回调:...
14.基础用法:
vue.js的v-model在表单控件上实现双向绑定.
v-model会根据控件类型自动选取正确的方法来更新元素.
v-model并不关心表单控件初始化所生成的值。因为它会选择 Vue实例数据来作为具体的值，使用指令进行绑定，双向绑定.
index.html: