前端小萝莉
前端小萝莉

【基础】如何向新人介绍下Vue是什么，vue框架讲解及快速入门

vue框架讲解

1、前端三大框架

  • Vue
  • React
  • Angular

MVC和MVVM

MVC：
    Model：服务器数据
    V：View（视图、页面）
    C: Controller逻辑层
    
# 一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View

MVVM的定义:
    M：Model（服务器上的业务逻辑操作）
    V：View（页面）
    VM：ViewModel（Model与View之间核心枢纽，比如Vue.js）

SPA (Single Page Web Application)

  • SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。
  • 它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。
  • 能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
  • 服务器只用出数据就可以，不用管展示逻辑和页面合成，提高性能；

2、双向数据绑定

  • Vue 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty去劫持数据,并去更新数据
  • React 是单向数据流，并没有双向数据绑定，需要手动去get和set到数据层和视图层
  • Angular 通过脏数据检查的机制，有变动时，会去检查视图层和数据层，并更新对应的数据和视图

3、Vue简介

  • 作者：尤雨溪
  • Vue 被设计为可以自底向上逐层应是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，易于上手
  • Vue专注于数据层,通过数据的双向绑定,最终表现在DOM层面, 减少了DOM操作。
  • Vue使用了组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发。
  • 虚拟DOM： dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；

4、Vue项目的创建

1）CDN引入
// 开发环境版本，包含了有帮助的命令行警告


// 生产环境版本，优化了体积和速度
2）脚手架工具搭建项目
// 1. cmd 命令安装脚手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli

// 2. 指令创建项目,可以选择自己需要的模板进行创建
// 例如： vue create hello-world
vue create [项目名]

// 3.也可以使用UI视图界面创建项目
vue ui

5、Vue的生命周期

beforeCreate

组件创建阶段

created

在实例创建完成后被立即调用。组件创建完成的阶段，可以进行数据请求等初始化操作

beforeMount

在挂载开始之前被调用,还未渲染到dom结构上

mounted

实例被挂载后调用，只代表当前组件已挂载到dom结构上，mounted不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted内部使用 vm.$nextTick

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用 计算属性 或 watcher 取而代之。

activated

被 keep-alive 缓存的组件激活时调用。

deactivated

被 keep-alive 缓存的组件停用时调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

一般来说会在此处清除本组件创建的 定时器 或者关闭一些 socket长连接 等

6、Vue项目的使用

1) 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：


  {{ message }}



var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
2) html的元素绑定

  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  



var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
  • 绑定的省略写法,可以直接使用:来代替v-bind 
    
  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
3) JavaScript 表达式
{{ ok ? 'YES' : 'NO' }}



{{ message.split('').reverse().join('') }}





{{ var a = 1 }}


{{ if (ok) { return message } }}
4) 指令操作

  • 你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。

  • v-for 循环指令, 可以绑定数组的数据来渲染一个项目列表：

    

    
  
      
    
    • 
      {{ item.text }}
    
      • 
  

    

    var app4 = new Vue({
  el: '#app3',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

  • v-if 判断指令,来移除或者插入dom. 此外可以在 Vue 插入/更新/移除元素时自动应用过渡效果

    
  
    现在你看到1了
    
  
    现在你看到2了
    
  
    现在你看到其它了
    

    

    var app3 = new Vue({
  el: '#app4',
  data: {
    seen: 1
  }
})

  • v-show 和v-if效果一样，都是用来控制界面元素的显示和隐藏的,区别在于v-if是直接移除和插入dom元素，移除后dom内不存在该dom元素。而v-show是显示和隐藏dom，隐藏后dom元素还是一直存在的

    Hello!
    

    new Vue({
  data: {
    ok: true
  }
})

  • 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

    
  
  

    



    
  
  

    

    new Vue({
  el: '#example',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

  • v-model双向数据绑定指令

    • 可以用 v-model 指令在表单 、