Vue框架具体详解

title: Vue框架介绍与ES6ES7语法

分类

categories: Vue

时间

date: 2018-05-22 12:10:18

前端框架Vue

框架与库的区别

小而巧为库，大而全为框架

库
- 提供小功能, 项目入侵小(上了之后可以改)，上了船可以再下船
框架
- 提供比较全的功能, 项目入侵大(上了之后不可改)，上了贼船了很难再下船了

介绍MVVM与MVC

MVC 是后端开发思想，分为三个部分
- Model：（数据层）负责数据库操作
- View：（视图层）所有前端页面
- Controller：（业务逻辑层）处理对应业务逻辑
MVVM 前端页面的分层开发思想，把一个完整的页面分成了三部分
- Model（页面中需要的数据），这里所指的是：data部分
  - 通过ajax取数据，将来渲染到View中
- View（页面中的HTML结果），这里所指的是：容器
- ViewModel（中间的调度者）。这里所指的是：vm

基本代码详情

/**
*    容器就是 MVVM 中的 View
*
*    实例对象就是 MVVM 中的 VM, 被称为调度者
*
*    data就是 MVVM 中的 Model
*/

1. 导入Vue包


2. 添加一个容器, 将来被Vue控制
{{msg}}

3. 创建Vue的实例对象
const vm = new Vue({
    // 3.1 el传入的是选择器, 页面要控制的元素
    el: "#box",
    data: {
    // 3.2 用data渲染数据
        msg: "Hello Vue",
        flag: true
    },
    // 可以绑定事件处理函数
    methods: {
        
    },
})

/**
*    VM的实例对象, 会监听data中每一项的数据变化, 只要一变化, VM就会重新把el指定区域所有的指
*    令重新解析一遍
*    data中的数据, 在每个methods方法中都共享
*
*/

Vue指令

表达式就是指令，如果想让指令生效必须放到el的容器里，他有控制HTML的能力，v-系列插入属性节点，插值表达式插入内容区域

插值表达式

插入表达式
可以写字符串属性，也可以进行字符串拼接，可以写简单的代码三元表达式，不要过分就行
只能写在内容区域
{{msg}}

v-cloak

解决插件表达式闪烁
在网络慢的情况下会使用
在外层的元素添加 v-cloak ，而且需要在style样式表中添加一个属性

Vue框架具体详解

分类

标签

时间