Vue基本概念、vue-cli和插值表达式的快速使用

一、vue基本概念

（一）vue介绍

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式javascript框架。

1. 渐进式的概念

• 渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。

2. 框架的概念

• 我们所说的前端框架与库的区别？

①、Library

• 代表：moment axios

• 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能 工具箱

• 使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。

②、Framework

• 代表：vue、angular、react、bootstrap

• 框架，是一套完整的解决方案

• 使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码

③、库和框架的区别

• 使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
• 使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。

3. vue是 MVVM 的框架

• MVVM思想：一种软件架构模式，决定了写代码的方式。

  • M：model数据模型(ajax获取到的数据)
  • V：view视图（页面）
  • VM：ViewModel 视图模型

• MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM

  • V（修改视图） -> M（数据自动同步）
  • M（修改数据） -> V（视图自动同步）

• 之前的思想，原生dom驱动。无论修改什么页面内容，先找对象，操作dom。

• 现在的思想，vue 数据驱动 。直接操作数据即可。数据变化，试图自动更新。

• 1. 在vue中，不推荐直接手动操作DOM！！！

• 2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

（二）开发vue的方式

• 开发vue有两种方式
  ①、传统开发模式：基于html/css/js文件开发vue
  ②、工程化开发方式：在webpack环境中开发vue，这是最推荐的方式。
• 现代化的项目也都是在webpack环境下进行开发的。

二、vue-cli的使用

vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

• 开箱即用
• 零配置
• webpack、babel

（一）基本使用

//查看镜像源使用状态：
npm get registry
//全局切换镜像源：
npm config set registry http://registry.npm.taobao.org
//全局切换官方镜像源
npm config set registry https://registry.npmjs.org/

• 全局安装命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

• 查看版本vue

vue --version

• 初始化一个vue项目

vue create 项目名(不能用中文)

• 启动项目，打包项目

npm run serve
npm run build

yarn serve
yarn build

（二）如何覆盖webpack配置

注意：我们在项目无法找到webpack.config.js文件，因为vue把它隐藏。

• 如果需要覆盖webpack的配置，可以修改vue.config.js文件，覆盖webpack配置文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置端口号
  devServer: {
    port: 81
  }
})

（三）目录分析与清理

• public/index.html：不用动，提供一个最基础的页面，运行的浏览器网页。
• src/main.js：不用动， 渲染了App.vue组件，webpack打包的入口。
• src/App.vue：默认有很多的内容，可以全部删除，vue页面入口。
• assets文件夹与components直接删除
• package.json：依赖包列表文件。

（四）单文件组件：一个.vue文件就是一个组件

• vue单文件组件的说明：一个.vue文件就是一个组件，后续开发vue，所有的功能都是基于组件实现。

1.安装插件

2.一个单文件组件由三部分构成

• template(必须) 影响组件渲染的结构，html只能有一个根元素
• script 逻辑 js
• style 样式 css less scss
  • style用于提供组件的样式，默认只能用css
  • 可以通过lang="less"开启less的功能，需要安装依赖包

3.让组件支持less

• （1） style标签， lang=“less”，开启less功能
• （2） 装包：

yarn add less-loader@7.2.1 less -D

• 然后重新运行一下App.vue页面的代码。

<template>
  <div id="app">
   <h1>App.vue 最根组件，里面有HTML JS代码  CSS样式h1>
  div>
template>

<style lang="less">
/* 常规：写CSS样式！ */
#app {
  background-color: pink;
  h1 {
    color:green;
  }
}
style>

• 假如我们添加下面的代码，那么就会报错。

<script>
	let a =10
</script>

• 于是我们就需要在vue.config.js里面进行设置，消除lint，方便我们之后的开发

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 81,//发开服务端口号
  },
  lintOnSave:false,//在此处添加
})

三、vue的插值表达式

（一）vue是数据驱动的，应该如何提供数据，将来控制视图呢？

1. vue如何提供数据

1. 通过 data 属性可以提供数据， data属性必须是一个函数
2. 这个函数需要返回一个对象，这个对象就代表vue提供的数据

2. vue通过data提供数据

vue中通过template可以提供模板，但是这样的数据是写死的。

• vue可以通过data提供数据，注意：data必须是一个函数，并且返回一个对象

<script>
export default {
  data () {
    return {
      money: 100,
      msg: 'hello'
    }
  }    
}
</script>

3. 通过插值表达式显示数据

• 插值表达式, 小胡子语法 mustach语法 {{ }}

1. 作用: 使用 data 中的数据渲染视图（模板）
2. 基本语法, 支持三元运算符

{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }}
{{ obj.age > 18 ? '成年' : '未成年' }}

3. vue中插值表达式的注意点

• (1) 使用的数据在 data 中要存在

<h1>{{ gaga }}</h1>

• (2) 能使用表达式, 但是不能使用 if for

<h1>{{ if (obj.age > 18 ) { }   }}</h1>

• (3) 不能在标签属性中使用

<h1 id="box" class="box" title="{{ msg }}"></h1>

<template>
  
  <div id="app">
    <h1>App.vue 最根组件，里面有HTML JS代码  CSS样式h1>
    <img alt="Vue logo" src="./assets/logo.png">
    <p>  {{info}}  p>

    <p>{{list[1]}}p>

    <p>姓名：{{obj.name}}   年龄：{{obj.age}}p>
    <p>是否成年：{{obj.age>=18?'成年':"未成年"}}p>
  div>
template>

<script>
// 组件内部：script标签默认要求这样写
export default {
  // data固定：内部return
  data(){
    return {  
      // vue语法插值表达式 {{}}    直接把数据渲染到页面内！
      //   1、初始化数据，写在return{内部}
      //   2、放入到展示某个标签内：思想不再操作dom，
      //    注意：模板字符串语法非常像 ES6 `${变量}   ${变量}`
      //         内部可以写简单表达式（三元），不能写语句 if for
      //         {{}} 不能写在标签行内！
      info:"我是字符串，展示数据！",
      list:["张三","李四","王五"],
      obj:{
        name:"炸花生",
        age:19
      }
    }
  }
}
script>

<style lang="less">
/* 常规：写CSS样式！ */
#app {
  background-color: pink;
  h1 {
    color:green;
  }
}
style>

（二）安装vue开发者工具，方便我们调试

• 直接通过谷歌应用商店安装 需要梯子
• 通过极简插件下载插件，本地安装。 https://chrome.zzzmh.cn/index