vue 笔记

vue

• 简介

  • vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架
  • vue.js 是一套构建用户界面的框架，只关注视图层，
    它不仅易于上手，还便于与第三方库或既有项目整合。（vue有配套的第三方类库，可以整合起来做大型项目的开发)
  • 是一套用于构建用户界面的渐进式框架。
    与其它大型框架不同的是，vue 被设计为可以自底向上逐层应用。
    vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
    另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue 也完全能够为复杂的单页应用提供驱动
  • vue周边生态(基于vue语法)：
    • weex: 跨平台解决方案(安卓和ios)，阿里出品
    • chameleon: 跨平台解决方案(多端)，滴滴出品
    • uni-app: 跨平台解决方案(多端)，dcloud出品
    • mpvue: 小程序解决方案，美团出品
    • megalo: 小程序解决方案，网易出品
    • nuxt: vue服务端渲染框架

• 框架与库的区别

  • 库: 解决单一问题，如果想更换库，可以随时换
  • 框架: 一整套解决方案，项目如果需要更换框架，则需要重新架构整个项目
    vue框架:vue.js + vuex + vue-router + axios + webpack + babel + ui框架

• MVC与MVVM

  • vue是一款MVVM框架
  • MVC
    • 后端分层开发概念
      • M:model 数据层 处理数据
      • V:view 视图层 显示页面
      • C:controler 控制器 业务逻辑
  • MVVM
    • 前端分层开发概念
      • M:model 数据层 处理数据
      • V:view 视图层 显示页面
      • VM: viewmodel 视图数据层
      • 中心思想: 数据驱动视图

• vue实例

  • 创建一个vue实例

    • 先安装vue
    • 引入vue.js文件
    • vue.js最后会返回一个Vue的构造函数，所以通过new的方式创建一个vue的实例
    { {name}}
    let vm = new Vue({ el: '#app', // 将我们的vue实例挂载在页面上的哪个节点 data () { // 所有需要的数据 return { name: 'jack', age: 18, student: { name: 'tom', age: 18 } } }, methods: {} // 实例中所有的方法 如果想在方法中调用data中的数据，直接用this.数据属性名即可 如果想在方法中调用methods中的其他方法，直接用this.方法名即可 this代表我们当前的vue实例 }) - data可以是一个对象，也可以是一个带返回值的函数，我们必须写成函数形式 Object是引用数据类型，如果不是function返回， 每个数组的data都是内存的同一个地址，一个组件中的数据改变了，其他组件中的数据也会发生改变 data是一个函数的时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响 - 数据用两个大括号包起来，写在渲染的区域内 - 数据渲染又称插值表达式

  • 插值表达式

    • 可以做运算
      • { {name + 1}}
      • { {name + ‘你好’}}
      • { {name.substr(0, 2)}}
      • { {age > 18 ? ‘成年’ : ‘未成年’}}

  • 指令

    • 指令 (Directives) 是带有 v- 前缀的特殊特性

    • v-cloak
      解决网速慢时，数据显示闪烁问题

      { {msg}}

      [v-cloak] { display: none; }

    • v-text
      显示数据，类似插值表达式

      • 没有闪烁问题
      • 标签里的内容不会显示

    • v-html
      渲染html代码

      • 标签里的内容不会显示

    • v-bind
      绑定属性，可以简写成:
      一旦使用了v-bind指令，后面就不是一个普通的字符串，而是会变成一个变量
      其中也可以做一些运算，可以写js合法的表达式

    • v-on
      给元素绑定事件，可以简写为@
      绑定的事件写在实例的methods中，名字一一对应即可
      用法: @‘绑定的事件’ = ‘方法名’
      可以传参数
      如果不传参数，可以不写(),传入参数,参数写在小括号内 @click=‘clickItem(item)’
      js常用的事件都可以绑定

  • v-once
    让数据只渲染一次，以后改变，对该数据无效

  • 事件修饰符

    • .stop 阻止冒泡事件
    • .prevent 阻止默认事件
    • .capture 添加事件侦听器时使用事件捕获模式(从外层向里层触发事件)
    • .self 只当事件在该元素(比如不是子元素)触发时触发回调
    • .once 事件只触发一次
      事件修饰符可以一起使用,顺序不影响
      @click.stop.prevent

  • v-model

    • 实现双向数据绑定，一般用于表单元素
    • 普通文本
    • 文本输入框
    • 多选框(data中数据为数组) 绑定的是value值(数组)
    • 单选框 绑定的是value值
    • 下拉框(data中数据为数组) 绑定的是文本内容(数组)
    • v-model修饰符
      • .number 将输入框中的字符转换为数字
      • .trim 如果要自动过滤用户输入的首尾空白字符
      • .lazy 鼠标失去焦点后，绑定的数据再改吧,绑定的是change事件

  • 动态绑定样式

    • 动态绑定class

      • 直接用v-bind绑定 :class = ‘’
      • 数组形式(类名必须用’'包起来)
        这是一段文字
      • 数组中使用三元表达式
        这是一段文字
      • 数组中嵌套对象
        这是一段文字
      • 直接使用对象
        这是一段文字
        后面跟上判断条件，为true时添加类名，为false则不添加

    • 动态绑定style

      • 直接用v-bind绑定 :style = ‘’
        这是一个文本
      • 将样式对象，定义到 data 中，并直接引用到 :style 中
        data: {
        styleObj: { color: ‘red’, ‘font-size’: ‘40px’, ‘font-weight’: ‘200’ }
        }
        如果绑定多个，则写在一个数组中
        这是一个文本
        绑定样式名时，如果写成驼峰命名，则不需要引号，如果是复杂命令，则需要加引号