Vue 基础

vue基本概念

什么是vue?

百度百科：

Vue.js 是一套用于构建用户界面的 JavaScript 。

那渐进式怎么理解呢？

的核心就是可以

举个栗子：

Vue整个全家桶包括 响应式核心 -> 组件

一些配套工具 -> vue-router

维护组件通信的 -> vuex

脚手架 -> vue-cli 等等。

但是我们在使用Vue的时候不是需要把全家桶所有东西都一起用上的，它不是捆绑式的，我们可以选择使用其中的某几项，很轻量。

库与框架

JQuery: 拥有很多方法，组成了一个完整的功能，通过调用这些功能能实现我们自己的功能

框架： 只需要蒋特定代码放到特定位置上，框架会自动帮我们调用

比如Vue我们只需要把数据绑定在Vue上，它内部调用了哪些方法，怎么去修改的dom我们都不需要关心，它自己帮我们处理好了。

MVC 与 MVVM 的区别

MVC模式相信大家都已经特别熟悉了

传统的mvc不是在前端用的，主要是用于后端的架构

• model(数据库中的数据)

• view（前端页面）

• controller (后端的控制器) 主动调用数据

MVVM：
最大的特点就是： 双向绑定

• model： js中的数据

• ViewModel： 视图模型（js的部分的功能，比如Vue核心就主要是实现这一部分功能）

• view： 前端页面

可以把数据直接挂载在视图模型上，然后就会自动的将数据显示到页面上，同时也会自动的监控页面上数据的变化然后将页面的变化回显给数据

MVVM模式不需要用户手动操作dom，
所以vue的核心就是 数据驱动，数据控制视图的显示

创建Vue实例

实际操作：安装Vue, 创建第一个Vue项目

npm init
npm install vue
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                message: 'hello world'
            }
        }
    })
    // vm => ViewModel
</script>

Vue渲染方式

render

const vm = new Vue({
   el: '#app',
   render(h) {
     return h('p', {},[this.message])  
   },
   data() {
       return {
           message: 'hello world'
       }
   }
})

createElement

template

Vue在渲染过程中 会先找render方法，如果没有就用template。
最终结果也是将template编译成render方法

const vm = new Vue({
   el: '#app',
   template: '<div>{{this.message}}</div>',
   data() {
       return {
           message: 'hello world'
       }
   }
})

外部模板

如果我们在初始化Vue实例的时候 render 和 template都没写，
Vue会采用外部模板来渲染，就是el绑定的标签内部的内容

<div id="app">{{message}}</div>
const vm = new Vue({
  el: '#app',
  data() {
      return {
          message: 'hello world'
      }
  }
})

Vue的版本

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

Vue实例的一些属性和方法

vm.$mount()     //挂载，如果不传递参数，表示要手动挂载, 可以挂载在页面的任何地方
vm.$el    //真实dom元素 

<div id="appTwo"></div>
const vm2 = new Vue({
 template: '<span>hello world 2</span>'
})
vm2.$mount()
console.log(vm2.$el)
document.getElementById('appTwo').appendChild(vm2.$el)
// vm2.$mount('#appTwo')

注意：
在申明一个Vue实例的时候，el使用 class 也是可以挂载的。
官方文档：

el

<div class="appClass"></div>
const vm = new Vue({
    el: '.appClass',
    render(h) {
      return h('div',{},['测试用class来挂载'])  
    },
    data() {
        return {
        }
    },
    methods: {
    
    }
 })