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

2. 组合的视图组件
   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 是数组元素迭代的别名

  

    

      {{ 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中的数据
  事件函数不能重复定义，会报错