Vue的定义和_指令修饰符

Vue的定义

1. vue是一个渐进式的框架，轻量，易于上手
2. vue是一个MVVM的一个框架

Vue的原理

• 最主要的就是双向绑定和组件化，
• 双向绑定则是基于object.defineproperty，里面有两个方法，set和get。
• 组件化他最大的优点就是重用性

请谈谈 Vue 中的 MVVM 模式

• MVVM 全称是 Model-View-ViewModel
• Vue 是以数据为驱动的(为什么vue数据更改视图也会更改(数据驱动视图))，Vue 自身将 DOM 和数据进行绑定，一旦创建绑定，DOM 和数据将保持同步，每当数据发生变化，DOM 会跟着变化。 ViewModel 是 Vue 的核心，它是Vue 的一个实例。Vue 实例时作用域某个 HTML 元素上的这个 HTML 元素可以是 body，也可以是某个 id 所指代的元素。
• DOMListeners 和 DataBindings是实现双向绑定的关键,DOMListeners 监听页面所有
• View 层 DOM 元素的变化，当发生变化，Model 层的数据随之变化；DataBindings 监听Model 层的数据，当数据发生变化，View 层的 DOM 元素随之变化
• vue 适用的场景：复杂的单应用页面；复杂数据操作的后台页面，表单填写页面，侧重数据绑定。
• Vue,js是一套构建用户界面的渐进式框架。采用自底向上增量开发的设计。核心库只关注视图层，容易与其他库或已有项目整合。有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
  目标是：通过尽可能简单的API实现响应的数据绑定和组合的试图组件

计算属性以及和watch，methods的区别

第一个解析：
监听属性和计算属性相比 更适合异步操作，
当一个属性依赖另外两个属性的时候适合用 计算属性
计算属性 相比较  methods 性能好点有缓存，有依赖 只有data数据发生变化时才执行函数
反之执行一次 而 methods 没有依赖 不管数据是否发生变化 每次都会执行

第二个解析:
computed是根据页面发生变化而变化,他是用来计算的
watch属性是监听页面特定某个状态的变

第三种解析：
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。 
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

第四种解析
计算属性适用的情形 ：我们可能会有这样的需求，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。 
watch函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况

语法

<div id="app"></div>
new Vue({
   el:"#ppp   //把vue实例挂载到那个元素上边,一般情况下的一个页面只有一个实例，所以用的是id选择器
   data:{ //存放数据,是一个对象
   }，
   mehtods:{
     方法1(){
      }
     方法2(){
   }
})

mvvm的定义

mvvm	定义
V(View)	视图层
VM(ViewModel)	数据双向绑定
M(Model)	数据层

vue的指令

• v- 开头就是指令

指令	定义
v-show	控制元素的显示隐藏,通过display:none/block来控制
v-on:事件名 简写@事件名	添加事件：事件类型：click keyup keydown chenge input
v-text	解析文本
v-html	解析html
v-model	数据的双向绑定,一般用在表单元素上 input select textarea
v-bind :属性名 简写是 ：	绑定一个动态属性
v- cloak	这个指令保持在元素上直到关联实力结束编译
v-model	数据双向绑定
v-pre	跳过当前元素以及其他的子元素不编译

• 属性名=“变量名” //解析出来是字符串
• : 属性名=“变量名” //按变量解析
• v- cloak:是根据display:none/block来控制的。
• v-model 表单数据绑定 原理如下

 @input="text"=$event.target.value" ，一般用在表单元素上面：input textarea select
 例子
 <input v-model="message" placeholder="edit me">
 <p>Message is: {{ message }}</p>

• 可以给v-bind:class一个对象,这样能动态的切换class
• 例子如下

  <div v-bind:class= "{active: isActive} "></div>

• 添加类名可以用对象,多个可以用数组

: class="{类名:变量或者表达式}"
: class="['cur',{}]"

事件修饰符 事件名.修饰符

事件修饰符	定义
.prevent	阻止默认行为
.once	只触发一次回调
.stop	阻止冒泡
.captrue	捕获阶段触发的
.self	针对自身的
.lazy	事件触发后将输入框的值与数据进行同步
.Number	如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
.trim	如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

鼠标按键修饰符

• .left :鼠标左键
• .right ：鼠标右键
• .middle: 鼠标中间
• @keyup.按键吗=""

循环遍历方法

• v-for 可以循环 Array Object Number String
• : key =“index” : 唯一的标识

Array 
v-for="(item,index,key) in list"  //第一个参数是每一项,第二个是下标 ，第三个没用

objcet
v-for="(item,index,key) in obj  //第一个参数是键值,第二个是键名 ，第三个是下标、

Number
v-for="(item,index,key) in list //第一个参数是从1开始的整数,第二个是下标，第三个没用

String
v-for="(item,index,key) in list //第一个参数是字符串里面的每一值,第二个是下标 ，第三个没用

• 添加样式

1.以object的方法写在实例里面
  styleObj:{
      color: "red",
      fontSize:"18px",
 }