Vue 是一套用于构建用户界面的渐进式框架。

一、安装

1.直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
2.CDN <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3.NPM npm install vue。

二、模板

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
2.模板语法
v-bind缩写

<a v-bind:href="url">...</a>

v-on缩写

<a v-on:click="doSomething">...</a>

三、组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

组件复用

可以将组件进行任意次数的复用：

四、vue的生命周期

先上Vue官网的生命周期图片：

vue生命周期.png

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
beforeCreate
eg:
const vm = new Vue({
el:"#app",
data: {
name:"张三"
},

  created() { // 在created中发送网络请求
    console.log("初始化完成就会执行")
  },
  mounted() {
    console.log("挂载")
  },
  destroyed() { // 移除一些监听，例如定时器
    console.log("销毁")
  }
})

五、node

js运行在浏览器中， 不能拥有操作文件， 二进制等这些功能
运行环境，es规范，提供依赖包（http,io,buffer...）
可以利用node这个环境开发后台服务器。

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

六、 npm

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从npm服务器下载别人编写的第三方包到本地使用。
允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
npm 切换到 cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
使用cnpm 安装依赖包 -g是全局安装
cnpm install 包名 -g
cnpm install 包名 --save
· 如果不添加 --save 只会下载这个包,在package.json文件不会记载下载的记录
· --dev 开发的时候使用，上线之后就不在使用的一些包
cnpm uninstall 包名下载包
dependencies 上线之后还在用（如：bootstrap,jquery...）
devDependencies 开发打包的时候使用，上线之后就不使用了（如：webpack...）
如果没有添加 --save, 在package.json中不会有记录
如果下载的项目有package.json，只需要执行 cnpm install , 他就会把依赖包都下载下来
webpack (gulp)

自动化的打包工具

浏览器只能认识 html, css, js, 图片

为了快速开发(es6,sass,typeScript...,aa.Vue ) -> 工具 -> html,css,js,图片

安装
cnpm install webpack webpack-cli --save --dev
编写webpack的文件 webpack.config.js

const path = require('path'); // 导入包
// 这个webpack的配置文件
module.exports = {
entry: './index.js' ,//打包的入口
output: { // 打包完成的出口
path: path.resolve(__dirname, 'dist'),
filename: 'index.bundle.js'
}
};

webpack 打包指令进行打包就可以了

七、 vue-cli

脚手架，创建半成品，在半成品基础上开发

npm install -g @vue/cli 安装脚手架

1.png

2.png
创建项目 vue create 项目名（先通过cd进入到创建项目的目录）

3.png
babel 用来把es6 -> es5, 把typeScripte -> js
eslink 代码格式的检测工具

08-04(vue学习)

08-04(vue学习)

自动化的打包工具

浏览器只能认识 html, css, js, 图片

为了快速开发(es6,sass,typeScript...,aa.Vue ) -> 工具 -> html,css,js,图片