Vue入门指南-01建立vue实例 (快速上手vue)

该篇文章的讲解能可以带你快速入门vue,尽量多的讲解vue中的各个知识点,让你可以快速上手使用vue发开你的第
一个项目, 固然已经学习使用了vue的同窗能够查漏补缺,看看那些是本身学习但长时间不用已经忘记的
复制代码

为何要学习vue

经过学习Vue提供的指令, 很方便的就能把数据渲染到页面上, 不在须要手动操做DOM元素, 前端的Vue之类的框架, 不提倡手动操做DOM元素。

什么是MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变能够自动传递给 View，即所谓的数据双向绑定。

其中 M 层 是vue中的data, V层是el绑定的HTML元素, VM是new实例的vue
复制代码

第一章 - 导入 vue 建立一个VM 实例, 传入配置对象, 了解配置对象中的各个属性

咱们在页面中经过script标签引入咱们须要的vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}  // 经过差值表达式的方式将数据渲染到页面
</div>
var VM = new Vue({
  el: '#app', // 表示当咱们new的这个Vue实例, 要控制页面上的那个区域
  data: { // data属性中，存放的是el中要用到的数据,这里的data就是MVVM中的M专门用来保存每一个页面的数据
    message: 'Hello Vue!'
  },
  methods : {}, // 这个methods属性中定义了当前Vue实例全部可用的方法,主要写业务逻辑
  computed: {}, // 在computed中,能够定一些属性, 这些属性叫作计算属性,计算属性的本质就是一个方法,只不过咱们在使用这些计算属性的时候是吧它们的名称直接当作属性来使用的,并不会把计算属性当作方法去调用
  filters : {}, // 这个filters属性中定义了当前Vue实例中全部可用的过滤的方法 
  watch: {}, // 使用这个属性,能够监听data中数据的变化,而后触发这个watch中对应的function处理函数
  router, // 挂载路由对象
  directives：{}, // 这个directives属性定义了当前Vue实例中全部可用的自定义指令
  beforeCreate () {}, // 生命周期函数: 表示实例彻底被建立以前,会执行这个函数
  created () {}, // 生命周期函数: 表示实例被建立以后
  beforeMounted () {}, // 生命周期函数: 表示模板已经编译完成,可是尚未把模板渲染到页面中
  mounted () {}, // 生命周期函数:表示模板已经编译完成,内存中的模板已经真实的渲染到了页面中去,已经能够看到渲染好的页面了
  beforeUpdate () {}, // 生命周期函数: 表示当前界面尚未被更新,数据确定被更新了
  update () {}, // 生命周期函数: 表示当前页面和数据保持同步了,都是最新的
  beforeDestroy () {}, // 生命周期函数: 表示Vue实例已经从运行阶段进入到销毁阶段
  destroyed () {} // 生命周期函数: 表示组件已经彻底被销毁了
})
复制代码

Vue入门指南(快速上手vue)