VUE基本使用

vue简介

• vue.js的数据驱动视图是基于MVVM模型实现的
• model 代表数据
• view 代表视图模板
• viewmodel 代表业务逻辑处理

数据驱动视图

• 基于MVVM模型实现的数据驱动视图解放了DOM操作
• view与model处理分离，降低代码耦合度
• 双向绑定时的bug调试难度增大
• 大型项目的view与model过多，维护成本高

组件化开发

• 组件化开发，允许我们将网页功能封装为自定义HTML标签，复用书写自定义标签名即可
• 组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性

vue实例

• vue实例是通过vue函数创建的对象，是使用vue功能的基础

el选项

• 用于选取一个DOM元素作为vue实例的挂载目标
• 只有挂载元素内部才会被vue进行处理，外部为普通HTML元素
• 代表MVVM中的view层

插值表达式

• 挂载元素可以使用vue.js的模板语法，模块中通过插值表达式为元素进行动态内容设置，写法为{{}}
• 插值表达式只能书写在标签内容区域，可以与其他内容混合
• 内部只能书写js表达式，不能书写语句

data选项

• data中的数据可以通过vm.$data.数据或vm.数据访问
• data中的数据为响应式数据，在发生改变时，视图会自动更新
• data中存在数组时，索引操作与length操作无法自动更新视图，这时可以借助vue.set()方法替代操作

methods选项

• 用于存储需要在vue实例中使用的函数

  
  
  
  


  

    

      
      
内容展示: {{10 + 2 + 3}}
      
{{title}}
      
{{fn(list)}}
    
  
  

指令

• 指令本质就是html自定义属性

v-once

• 使元素内部的插值表达式只生效一次

  {{title}}
  

v-text

• 元素内容整体替换为指定纯文本数据

v-html

• 元素内容整体替换为指定的html文本

  
  data: {
    content: '
  aaa
  '
  },
  

v-bind 简写用 ：

• v-bind用于动态绑定HTML属性
• 需要一次绑定多个属性，还可以绑定对象

class绑定

• class是html属性，可以通过v-bind进行绑定，并且可以与class属性 共存

  
  
  data: {
    isB : true,
    isC : true,
  },
  

style绑定

• style是html属性，可以通过v-bind进行绑定，并且可以和style属性共存
• 绑定样式的优先级大于固定样式
• 可以通过数组给标签设置多个样式

  这是样式
   
  data: {
    styleObj: {
      width: '100px',
      height: '100px',
      backgroundColor: 'red',
    }
  }
  

v-for

• 用于遍历数据渲染结构，常用的数组与对象均可遍历
• 通过