Vue学习（一）

Vue学习（一）

介绍

• 尤雨溪 设计出身 中国江苏无锡人
• 在2013年12月8日在gitHub发布了0.6版本
• 2015年10月份正式发布了1.0版本
• 2016年10月正式发布了2.0版本
• Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

为什么要学习流行框架

• 企业中，使用框架，能够提高开发的效率；

• 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）

• 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

• node 中的 express；

• 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

• 从Jquery 切换到 Zepto

vue核心特点

• MVVM
  • M model 数据模型
  • V view 视图
  • VM viewmodel 视图模型
  • 双向数据绑定的功能 其原理-> Object.defineProperty(obj,‘name’,{set(){//获知设置了对象属性值，从而改变页面中跟name绑定的元素的值} ,get(){} })
    • 1向: js内存中的属性改变，影响页面的改变
    • 2向: 页面元素值的改变，影响js内存中属性的改变
    • 以上也叫做双向数据流

vue起步

• vue2.x
• 构建vue实例
  • 1:引包 npm install vue —>可以通过npm下载
  • 2:创建vue视图层
  • 3:启动vm的实例 [new Vue(options)]
    • options是一个对象
• options
  • data 是一个对象、也可以用函数,返回一个对象
  • el 用来与页面关联的

vue中常用的v-指令演示

• 常用指令
• v-text 设置双标签元素的innerText
• v-html 设置双标签元素的innerHTML
• v-if 插入或者移除元素(true,插入,false移除)
• v-else 保证上方兄弟节点存在v-if || v-else-if
  • v-if v-else 只会有其一存在
• v-show 隐藏或者显示元素
• v-model 双向数据绑定
  • 元素必须有value值, DOM元素的value 与js内存变量的属性进行绑定

class结合v-bind使用

• 变化的属性可以以v-bind的赋变化的值
• v-bind:属性名=“表达式||对象”
• 简写方式 :属性名=“表达式||对象”
  • 设置一个样式 三元表达式
  • 设置多个样式 对象的形式
    • 对象 {样式名:是否使用bool,样式名:是否使用}

methods和v-on的使用

• options:
  • methods 是一个对象,key是函数名，value是函数体
• v-on:DOM原生事件=“表达式||函数”
  • 如果调用函数没有参数，()可以省略
• 简写方式: @事件名=“表达式||函数”

v-for的使用

• v-for=“xxxx in items” :key=“index”
• 总结
  • 数组v-for="(ele,index) in dataArr " :key="index"
  • 对象v-for="(value,key,index) in dataObj" :key="index"