VUE-简介

框架和库的区别

库：自己来组装台式
框架：直接买品牌机

库：功能单一，比如jquery就是来操作节点，比如lodash就是用来操作基础类型，比如数组、对象、字符串、函数，因此一个项目是可以引入多个库的

框架：功能齐全，提供了一整套完整的解决方案，具有排他性，一个项目中一般只能引入一个框架,但是还可以搭配某些库

流行的三大框架

09年 google  ---》 Angular
13年 facebook ---》react(难度比vue难一丢丢，适合中大型项目) 4
14年 尤雨溪负责人---》vue2 (门槛比较低，易学，用起来比较方便,适合中小型项目)  6

vue官网

百度  “vue.js”

vue特点

特点：渐进式：按需引入，vue框架只需要引入核心功能即可运行
核心思想
1 组件化 :vue是一个单页面应用，页面就是由一个一个的组件构成的
2 数据驱动 : 程序员只需要关注数据即可，数据一旦发生改变，则页面会自动渲染（一开始需要把数据和页面绑定好）

vscode推荐关于vue插件

1 vetur  能够使vscode、识别vue文件,会有语法的提示
2 AutoFileName  以后在vue中通过import 引入某个文件时会有地址的提示
3 Vue 3 Snippets  v3、v2的语法提示

安装完毕后要重启软件

关于vue脚手架以及版本

脚手架：

前端开发中提bai到的“脚手架”是一个形象的比喻，比喻各类语言的前期工作环境。

在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。

比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作者帮你把开发环境大部分东西都配置好了，你把脚手架下载下来就可以直接开发了，不用再考虑搭建这些工具环境。


express-generator插件  就是 express 服务端框架的脚手架
vue-cli插件就会 vue前端框架的脚手架

如果没有脚手架：意味着从新建一个空空文件夹开始

安装vue脚手架：

vue-cli 脚手架依赖于node环境，保证电脑有node环境，可以通过 node -v 来查看版本
安装命令: npm i @vue/cli -g   ---一般脚手架都需要全局安装，因为以后你每次新建项目都得用到脚手架
或者 npm i '@vue/cli' -g

查看脚手架版本：

vue -V

版本的区别：

如果脚手架的版本是4.5或以上，则该脚手架技能创建v2项目，又能创建v3项目
如果脚手架的版本是4.5以下，则该脚手架技只能创建v2项目

基于脚手架创建vue项目

1 vue  create  项目名    --在当前位置下生产项目
2  选择类型
  Default ([Vue 3] babel, eslint)  -- 快速创建v3项目，拥有babel, eslint
  Default ([Vue 2] babel, eslint)  -- 快速创建v2项目，拥有babel, eslint
> Manually select features   --自己去选择到底新建v2/v3,需要哪些插件自己来勾选

babel----》高级语法(es6)转成低级语法(es5)  --->兼容浏览器
eslint----》规范代码  



3  选择插件 
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
 
 
 4  选择vue版本，目前选择2.x
  Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x


5  问你  Babel, ESLint, etc. 配置代码是合并到package.json还是独立出来  （无所谓）
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files---独立
  In package.json--合并
  
6 问你是否保存这次操作用于下一次新建
Save this as a preset for future projects? (y/N) n
如果选择y会提示你输入自定义名字

开服（包含了打包） --开发阶段

在项目根目录下： npm run serve   ---访问地址
打包项目到内存中

打包–准备上线

在项目根目录下： npm run build
注意：打包后需要以dist目录充当项目的根目录（重新打开vscode才行）,然后通过live server 开服即可

package.json：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  
  npm run serve
  npm run build 是根据以上两个自定义属性来的
  

vue项目结构

node_modules --下载好的插件
public
	index.html --单页面,用来承载所有组件
src  源码
	assets:存放图片的
	components:存放组件（vue项目就是由一个一个组件组成的）
	App.vue(入口组件-最大的组件，今后我们新建的其他组件都应该放在App.vue中)
	main.js(入口js,首次访问时，程序会自动执行该文件)  
.browserslistrc  ：处理兼容的配置文件，根据浏览器来处理代码
babel.config.js  :关于babel配置
jsconfig.json : 编译的配置文件

	"@/*": [
        "src/*"
      ]
      
      作用：以后可以在代码中通过书写@ 能够代表 进入src目录
package.json: 项目依赖了哪些插件
vue.config.js ： 类似于 webpack.config.js，配置打包相关代码（比如今后的跨域等）    

组件

一个完整的页面是由多个组件组合而成

组件： *.vue文件

组件内部组成：

1 <template>标签</template>
2 <style>样式</style>
3 <script>业务</script>

组件化：----》无非就是封装---->复用性

以前是封装方法（属于js），现在是封装组件(包含了html、js、css)

注意：

<template 中必须并且只能包含一个根节点(推荐写div)

App.vue是所有组件的父组件（入口组件）,该组件一般不会真正的放布局，而是引入子组件，或者·写全局样式

组件的引入 components

1 自定义组件可以在src下任意位置新建 (默认推荐放在components下),文件名习惯大驼峰

2

<template>
    <div id="app">
      <!-- 使用组件 -->
      <Demo1/>


    </div>
</template>

<script>
//引入子组件
import Demo1 from './components/Demo1.vue'
export default {
  //注册
  components:{
      Demo1
  }

}
</script>

程序执行流程

首次访问---》程序自动执行main.js---->


//引入核心插件Vue(构造方法)
import Vue from 'vue'
//引入App.vue组件
import App from './App.vue'

//在控制台中关闭生产模式相关的警告
Vue.config.productionTip = false


//实例化一个Vue对象，执行了$mount()方法----渲染页面
//注意：#app就是index.html中的<div id="app"></div>
new Vue({
  render: h => h(App),
}).$mount('#app')

数据绑定 data

vue的特色之一：数据驱动

指的是利用vue底层的响应式系统实现功能：只要数据发生了改变，则页面会自动重新渲染

只要我们把数据和视图提前绑定好后，程序员只需要关注数据的变化即可

区分bootstrap的响应式： 根据屏幕分辨率大小来动态展示数据

语法：

<template>
	{{k}}
</template>

export default{
	data(){
		return {
			k:数据,
			....
		}
	}
}

注意：
1 {{}}是模板，只能放在标签体中，不能放在标签内部(属性)
2 {{}}类似于${},因此支持运算符、对象.属性/方法等、三元等

         {{age>=18?'成年':'未成年'}}
         {{age+1}}
         {{arr.filter(item=>item>=2)}}