vue基础知识

库和框架的区别

库:功能单一，侧重于某一部分功能
jquery：操作节点
lodash:操作数组、对象、字符串、函数等..
echarts:图表库,把数据以图形的形式的来表达
mescroll：用于h5的触底分页、刷新

框架：针对应用程序提供了一整套解决方案

框架：品牌机
库： 自己组装电脑

项目中采用了框架后，依然能够引入其他库
项目中一般采用了A框架后就不会在引入B框架

前端框架

09年   Google     Angular
13年   Facebook   React
14年   尤雨溪      Vue

官网

百度： vue.js

特色：渐进式框架

vue框架可以做到按需引入

Vue版本

2.x  -->流行
3.x  -->趋势

vscode插件

1 vetur    vscode识别vue语法，代码有颜色，有提示
2 AutoFileName   写了./或者../  后有路径提示
3 Vue 3 Snippets  有提示

脚手架

无论是后端express。还是前端的vue、react都有自己脚手架，我们都是利用脚手架生产项目（已经编辑好一部分代码、环境），使用好脚手架能够提高我们开发效率

vue cli (vue脚手架)全局下载安装

npm i -g  @vue/cli

查看脚手架版本

vue -V

如果版本>=4.5 则该脚手架能够创建vue2.x和vue3.x的项目
如果版本<4.5   则该脚手架能够创建vue2.x

创建vue2.x项目

1 vue  create  项目名      ：在当前所在路径下新建

  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features      --->自定义选择插件模块
  
  vue脚手架创建的项目已经集成了webpack
  babel:把高级语法转成低级语法（es6--》es5），有了该插件后，webpack才能够识别 
  eslint：用于规范代码的工具 
  
2 
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
 
 3 
   3.x
 > 2.x

4  随便选
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files   独立配置
  In package.json   合并到package.json 
 
5 
Save this as a preset for future projects? (y/N)
y：记录当前选择，就会提示写名字，然后保存 ,将来执行vue  create xx 的时候会都出一个选择
n：不记录

打包开服

npm run serve    类似于 npx webpack serve

打包（用于上线，生成dist目录）

npm run build

开服和打包命令·和package.json有关

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

项目结构

public 
	index.html --->核心页面（一个vue项目只有一个页面-->spa（单页面应用））
src (源码)
	assets：放图片的
	components:用来放组件(*.vue)
	App.vue 入口(起始)组件
	main.js 入口.js

组件

1 一般情况下，vue项目都是单页面(就只有一个index.html)
2 页面是由一个一个的组件组成
3 组件就是由html/css/js组成
4 vue 思想之一：组件化
	优势：复用性、可维护性和可测试性。
5 每一个*.vue文件都是一个组件	

组件的组成

<template>
     <div>
        <!-- 标签 -->
     </div>
</template>

<script>
// js业务
export default {

}
</script>

<style>
    /* 样式 */
</style>

注意：

1  template 下面必须有一个根节点

组件的引入

1 在components下新建子组件，名字规范：大驼峰MyName
2 编辑子组件内容
3 在父组件中通过 引入、注册、使用 来操作
    3.1引入: import xx  from './xx.vue' 
        注意：1 .vue可省
        注意：2 from后的地址可以通过'@/xx.vue'  ,@代表src
    3.2 注册：
         //注册
        components:{
            //自定义标签名 :  组件对象        
        }
     3.3 使用：在template中通过标签的形式来使用
     	<自定义标签名/>

demo：

<template>
     <div>
        <h1>App组件内容</h1>
        <hr>
        <Hello/>
     </div>
</template>

<script>
 //引入组件
import Hello  from './components/Hello.vue' //从当前位置查询   
// import Hello from '@/components/Hello.vue'//从src根目录查询
//后缀.vue是可省
export default {
    //注册
    components:{
        //自定义标签名 :  组件对象
        Hello
    }
    
}
</script>

单词：

render 渲染
mount 挂载
Property ：属性
method ：方法·

vue渲染过程

1 初次访问：执行：main.js
2 
//引入Vue构造器
import Vue from 'vue'
//引入入口组件
import App from './App.vue'

//不会在控制台中出现有关生产模式的提示
Vue.config.productionTip = false

//实例化一个vue对象（挂载入口vue）
new Vue({
  render: h => h(App),
})
//把入口vue挂载到index.html中id为app的div
.$mount('#app')

Vue的核心思想

1 组件化 
	vue项目都是由一个一个的组件组成
2 数据驱动 
	渲染是由数据来驱动，只要数据更改，则页面自动渲染 
	底层：响应式系统 

data数据绑定

在vue中，定义在data中的数据都叫做响应式数据

特点：如果把这些响应式数据渲染到页面之后，当数据改变，则页面自动渲染

定义数据的名字依然满足js中定义变量的规则:字母、数字、_、$组成，其中不能以数字开头

语法：

定义：

<script>
export default {
    components:{},
    data(){
        return {
            //定义数据
            //k :  v
        }
    }
}
</script>

使用：在template中

{{k}} 
同模板字符串，支持各种运算符

Demo:

<template>
    <div>
        {{name+1}}
        {{age>18?'男':'女'}}
    </div>
</template>

<script>
export default {
    components:{},
    data(){
        return {
            name:"张三",
            age:19
        }
    }
}
</script>

面试题：

vue中data为什么要设计成一个函数而不是一个对象

不同的组件中引入的data属性其实地址是同一个地址,如果设计成对象，那么造成取名冲突，只有设计成函数才能够避免（因为函数有自己的独立的的作用域）

vue提供的指令

指令是以 v- 开头的属性
位置：标签中
每一个指令都有自己的作用

注册事件-简单版

<标签  v-on:事件类型="简单的赋值业务"

注意1：template中可以使用data中定义的数据
注意2：指令引号中默认是支持变量

<template>
    <div>
        {{name}}{{age}}
        <button v-on:click="name='李四1'">点击1</button>
        <button v-on:click="age=20">点击2</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
            name:"张三",
            age:18
        }
    }
}
</script>

练习：n1+n2=n3

<template>
    <div>
        {{n1}}   +   {{n2}}  = {{n1+n2}}
        <button v-on:click="n1++">n1++</button>
        <button v-on:click="n2++">n2++</button>
        
    </div>
</template>
<script>

export default {
    data(){
        return {
           n1:1,
           n2:2
        }
    }
}
</script>

<style>

</style>

v-on的简写模式

v-on:   可以简写成  @

v-if、v-else、v-else-if

v-if

<标签  v-if="条件"  
如果为真，则该标签显示，否则隐藏

v-else

<标签  v-else
1 代表否则，必须和v-if搭配
2 和v-if同级别
3 v-else必须放在v-if的下面，并且中间不能有其他节点

v-else-if

<标签  v-else-if="条件"
1 代表否则，必须和v-if搭配
2 和v-if同级别
3 v-else-if必须放在v-if的下面，并且中间不能有其他节点

demo:

        <span v-if="isb1">蜗牛</span>
        <span v-else-if="isb2">蜗牛2</span>
        <span v-else>蜗牛3</span>