Vue.js学习记录第一天

vue数据驱动

vue主要操作的是数据

数据类型

  • 基本 number string boolean null undefined
  • Object function
  • Symbol(es6)

对象{ } 数组[]

数组的变异(括号中能改变原数组)

  • 操作数组的方法
    es4:(pop push unshift前面增加 shift前面减少 splice reverse sort )indexOf lastIndexof concat(拼接数组)slice
    es5

forEach filter map some every reduce includes find

前面都有不赘述

框架和库

  • 框架 vue
  • 库 jquery underscore
    框架和库的区别,框架拥有完整的解决方案,我们写好框架调用我们的,库是我们调用他

vue.js是渐进式的

  • 通过组合完成一个完整的框架
  • vue全家桶 核心为vue.js+vue-router(单页应用)+vuex(状态管理)+axios(获取数据)

vue特点

  • 核心只关注图层
  • 轻量,灵活
  • 适用于移动端
  • 渐进式框架

渐进式

  • 声明式渲染(不关系怎么实现的)
  • 组件系统
  • 客户端路由(vue-route)
  • 大规模状态管理(vuex)
  • 构建工具(vue-cli)

核心店

  1. 响应的数据变化
    当数据发生变化,视图自动更新

MVC(backbone) 单向的

  • model 数据
  • view 视图
  • controller 控制器
    控制器获取数据->传递给业务模型->渲染视图->反馈给用户

MVVM(angular,vue) 双向的

  • model数据 plan JavaScript Object 计划好的JS对象
  • view视图 是DOM
  • viewModel 视图模型
    view-> view model DOM listensers实时映射->model
    model->view model 中data binding->view
  1. 组合的视图组件
    UI页面映射为组件树
    划分组件可维护,可复用,可测试

安装vue

通过cdn


第一个程序

按照之前的介绍,首先需要一个视图模型

let vm=new Vue()

然后需要将View控制的DOM告诉它

  let vm=new Vue({
    el:'#app'})

然后是VM代理的数据

  let vm=new Vue({
    el:'#app',
    data:{msg:'大白熊'}
  });

最后将数据在页面显示

    
{{msg}}

全部程序

  
    
{{msg}}

5. v-show
根据表达式的布尔值,决定是否显示页面元素
6. v-for
可以绑定一组数据来渲染一个列表
表达式有以下几种形式

  • site in sites sites 是源数据数组并且 site 是数组元素迭代的别名
  1. {{ site.name }}
  • value in object 对象的属性
  • {{ value }}
  • (value, key) in object
  • {{ key }} : {{ value }}
  • (value, key, index) in object
  • {{ index }}. {{ key }} : {{ value }}
  • n in 10 循环整数

数据响应的变化

对象

  1. 使用变量前先要初始化,否则新加的属性并不会导致页面刷新
    如果{{}}中是VM data中不存在的项,会报错
    如果是存在的项不存在的属性,不会报错
    但是这时给这个属性赋值并不会有效果
    vue会循环data中的数据(数据劫持),以此增加getter和setter
    
{{a.school}}

利用变异方法可以改变页面显示的数组

let vm=new Vue({
      el:"#app",
      data:{
        arr:[1,2,3,4,5]
      }}
      )
      vm.arr[0]=100
      console.log(vm.arr)
      //显示是[1,2,3,4,5],但是console.log()是[100,2,3,4,5]
      //变异方法:pop push shift unshift sort reverse splice 利用这些方法可以修改页面中显示的项
      //如果是利用不修改的方法,重新赋值即可
      vm.arr.reverse();
      //而且这时的数组是经过了改变项目的 输出为[5,4,3,2,100]

也可以重新赋值

  vm.arr=vm.arr.map(item=>item+3)

数组的循环

v-for会更高效解决循环问题,复用原有结构
v-for这里的值是 随便一个名称 in xxx,这里xxx是data中属性名称,比如例子中的animals
{{}}中是v-for第一个 名称.属性值 ,不能直接用数组中属性名称,例子中 animals.name会无显示
和forEach相似,例子中a就相当于item

    
  • {{a.name}}
  • vm事件
    v-on:事件名称=""
    事件名称可以使click,mouseon,mousedown等
    method和data全部数据都会放在VM中所以名字不能冲突,method中的this指向的都是实例,返回的数据会是data中的数据
    事件函数不能重复定义,会报错