Web开发-Vue3.x

Web开发-Vue3.x

回炉再造！2021 Vue3.0 前端全家桶学习笔记

Vue全家桶

• Vue3.x
  • 认识Vue3
  • Vue开发初体验
  • Vue CLI脚手架
  • VUE 基础语法
  • 网络封装
  • 组件化开发
  • VUE 路由应用
  • Vuex详解
  • Vue3的新特性

Vue3.x

认识Vue

构建用户界面的渐进式开发框架，2.x，新版3.x：

• vue核心库只关注视图层，易于上手，便于与第三方库整合；
• 和库不一样的是Vue是一套架构，会基于自身特点想用户提供一套完整的解决方案，控制权在框架本身，如果要换框架，那就要重新架构整个项目；

渐进式：

• 声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具；

Vue的两大核心：

• 响应式的数据绑定：数组变化会自动更新视图，不用关心dom操作，专心数据本身；
• 可组合的视图组件：把视图按照功能分成多个基本单元(可复用的)，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试；

Vue开发初体验

通过CDN的方式引入Vue最新版本，进行测试：

• 数据绑定，数据响应式
• 属性动态绑定的提示信息
• 样式的动态绑定
• 基本的事件操作
• 循环遍历输出数组

注：实际开发还是要用脚手架

<style>
  .box {
    
    display:none;
  }
  div.show {
    
    display:block;
  }
</style>

<div id="app">
  {
  {message}}
  <ul>
    <li v-for="item in articles">{
  {item.title}}</li>
    <li v-for="(item,index) in articles.slice(0, 5)">{
  {item.title}}</li>
  </ul>

  <div style="background:red;" :style="{
      width:p_width}">
    hello world
  </div>

  <div class="box" :class="{show:is_show}">
    hello world
  </div>
  <p @click="show=!show">click me</p>
  <p @click="action_myshow()">click me</p>
</div>

<script scr="https://unpkg.com/vue@next"></script>

<script>
  // vue2
  const app = new vue({
    
    el:'app',
    data:{
    
      message:''
    }
  })

  // vue3
  const app = Vue.createApp({
    
    data(){
    
      return {
    
        message:'',
        p_width:"300px",
        is_show:true,
        articles:[
          {
    title:'1'},
          {
    title:'2'},
        ]
      }
    },
    methods:{
    
      action_myshow:{
    
        this.show = !this.show;
      }
    }
  }).mount("#app");

  app.message = "hello world"

</script>

注：Vue3 相比Vue2的语法使用变化还是挺大的，多对比下文档；

vue-cli脚手架的安装和使用

默认会创建好一套利用Webpack管理vue的项目结构

• 全局安装：npm install -g @vue/cli
• 检查版本：vue --version，如@vue/cli 4.5.11
• 创建项目：vue create <project-name>
  • 创建Vue3的项目，可以使用默认配置，也可以手动配置，也可以在创建项目之后安装具体的包的方式进行配置；
• 配置文件详解
• 应用代码演示

src目录：源码目录
  assets：静态资源
  componets：可复用小组件
  main.js：入口js文件
publick目录：原封不动的被打包的静态资源；

手动初始化配置项目：（实际开发用这个）

• vue、babel、router、vuex、css pre-processors、linter
• 3.x
• history router
• less
• eslint + airbnb
• lint on save、lint and fix on commit
• in package.json （也可以单独配置，看自身需求）

通过vue-cli体验vue开发并扩展配置

默认脚手架工具构建的项目基本是零配置的，如果想在这基础上修改配置，可以使用vue的配置文件；

新建配置文件vue.config.js：

• 全部具体配置可参考VueCli官方文档；
• 配置项十分丰富；如configureWebpack，webpack的具体配置可参考其官方文档；

// 以前webpack配置文件的配置方式
const path = require('path')
module.exports = {
   
  // 打包输出路径
  output:{
   
    path:path.resolve(__dirname, 'build')
  }
}

// 现在vue配置文件 对单独的配置文件进行了简单封装 配置语法更加简洁
const webpack = require('webpack');

modeule.exports = {
   
  outputDir : 'build',
  // 特别的如果 vue.config提供的直观配置不够用 可以嵌入webpack进行详细配置
  configureWebpack:{
   
    plugins:[
      // 配置一个webpack自带插件（打包好的chunkjs顶部会有一行注释banner）
      new webpack.BannerPlugin(options:{
   
        banner:"前端学习-加油"
      })
    ]
  }
}

注：之前有过Vue2.0的开发经验，后续关于Vue介绍和语法的相关内容，只做重点记录；

eslint的自动修复：

• WebStorm：为项目目录的node_modules/eslint包 配置Manual ESLint configuration；
• VSCode参考笔记《USE：200103-用vscode开发vue应用》

options基础定义 和 MVVM代码演示

createApp接收options参数，options选项API可参考文档；

import {
   createApp} from 'vue';
import App from './App.vue';

// 这里的options是一个导出的Vue组件对象，即options的选项配置对应的就是vue组件的选项配置
createApp(App).mount('rootContainer':'#app')

// App.vue
export default {
   
  name:'App',
  data(){
   
    return {
   
      msg:'hello world',
    }
  },
  methods:{
   
    changeMsg(){
   
      this.msg = 'Oy my god!'
    }
  }
}

Vue实例主要是封装视图操作，包括：

• 数据读写、事件绑定、DOM更新；

options是vue实例参数，意思是构造选项：

• 数据：data/props/porpsData/computed/methods/watch
• DOM：el/template/render/renderError
• 生命周期钩子：beforeCreate/created/beforeMount/mounted/beforeDestroy/destroyed/errorCaptured
• 资源：directives/filters/components
• 组合：parent/mixins/extends/provide/inject
• 其他

MVVM：

• DOM监听
• 数据绑定

模板基础语法、插值和指令

基础语法：

• 插值操作
• 绑定属性
• 计算属性
• 事件监听
• 条件判断
• 循环遍历
• 其他语法

插值：{ {}}；指令：v-；

• <p v-once>...：数据只显示一次，不响应式
• <p v-pre>...：内容原封不动展示
• <p v-text='msg'>。。。：相当于插值的表达式功能
• <p v-html='title'>...：可以解析标签，如title:<h1>Title</h1>

Vue模板基础语法——指令：v-bind

插值{ {}}只能用于模板内容中，动态内容绑定；

如果是元素的属性的动态绑定，需要通过v-bind指令；可简写为:表示的语法糖；

• 绑定元素中有意义的属性；
• 绑定class属性，四种用法（字符串，数组，对象，方法）；
  • 简单的样式组合可以用对象的方式；
  • 众多样式组合时，可以放到方法中返回对象；
• 绑定style属性；

<div :style="['background:red','width:100px']"></div>
<div :style="{
      'background':'red','width':'100px'}"></div>

<!-- one是class样式  is_show_one是布尔值vue对象属性 -->
<div :class="{one:is_show_one, two}"></div>

Vue模板基础语法——计算属性：computed

计算属性在处理一些复杂逻辑时是很有用的；

• 计算属性有缓存作用；不像方法每次都会被调用；

computed:{
   
  site:{
   
    get:function(){
   
      return '->' + this.msg;
    },
    set:function(newValue){
   
      this.msg = newValue
    }
  },
}

Vue模板基础语法——事件监听：v-on

绑定事件监听器指令：v-on，缩写：@（语法糖），监听方法默认参数：$event；

v-on事件修饰符：(可串行使用)

• .stop：阻止事件冒泡
• .self：当事件在该元素本身触发时才触发事件，并不会阻止事件冒泡
• .capture：添加事件监听时，使用事件捕获模式，具有重叠事件时，使用capture修饰的事件将会被优先捕获，可以改变事件冒泡次序；
• .prevetn：阻止默认事件
• .once：事件只会有效触发一次

<button @click="action_changeNum1">click me</button>
<button @click="action_changeNum2()">click me</button