vue学习笔记

一、认识vue

VUE 是一个MVVM视图层框架

Vue与原生js的不同点在于：它不再对dom元素进行直接操作，而是通过对数据的操作来改变视图

二、安装VUE

1）、独立版本：直接在vue.js官网上下载vue.min.js,用<script>标签引入

2）、使用CDN方法：

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

例子eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue test</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

3）(推荐)NPM 模块化安装：前提是安装了node环境下进行开发的npm install vue,

采用淘宝镜像进行安装比较快安装命令：
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm install vue

查看版本号：
npm -v

升级版本
cnpm install npm -g

安装cnpm 或升级
npm install cnpm -g

Vue-cli 脚手架快速搭建大型单页面应用，用于企业级开发

#全局安装vue-cli
cnpm install -global vue-cli

创建一个基于webpack模板的项目
vue init webpack my-project
进行一些配置，默认回车即可

打开刚创建的项目,并运行
cd my-project
cnpm install
cnpm run dev

三、vue的介绍

生命周期：从vue的实例创建到虚拟dom产生再到数据绑定数据监听数据渲染以及销毁的整个过程为vue的生命周期。

·beforecreate ->created ->beforeMount ->mounted ->beforeUpdate ->updated ->beforeDestory ->destoryed

Vue实例初始化阶段

创建Vue实例，初始化

·beforecreate 进行初始化时调用beforecreate，完成vue实例的生命周期相关属性、事件的初始化。这时还不能直接访问data中的属性和mounted中的方法

·created 在初始化完成后，完成vue的注入及数据的监听，vue实例创建完成，可以进行数据的访问操作

挂载并渲染阶段

·beforeMount 在created之后，vue会判断实例中是否有el属性，没有的话会调用 vm.$mount(el)再判断是否含有template属性有的话进行解析成一个render function，没有的话将el放到外部的html解析。完成模板的解析，没有绑定到模板中

·mounted 创建 vm $el替换el ,完成数据的绑定操作，执行render函数操作将模板进行解析，进行数据的动态绑定。

更新阶段

用户操作会引起数据改变导致页面的刷新

·beforeUpdate 更新虚拟的dom节点

·updated 完成页面的重新渲染操作

销毁阶段

·beforeDestory 销毁之前调用，此时还可以访问vue实例

·destoryed 完成了监听，子组件，事件监听移除，销毁vue实例对象。

posted @ 2020-12-24 16:15 The_Blue_Sky 阅读(83) 评论(0) 收藏举报

刷新页面返回顶部

The_Blue_Sky

vue学习笔记

公告