vue3学习04，05组件化开发

v-model的双向绑定

v-model指令可以在表单input、text及select元素上创建双向数据绑定，实际上它是将v-bind绑定value值及v-on绑定input事件合二为一的语法糖；

<input type="text" :value="message" @input="message = $enent.target.value">

v-model修饰符

lazy：只当敲下回车的时候触发

<input type="text" v-model.lazy="message">

number：将输入框中value转成数据类型

<input type="text" v-model.number="message">

trim:去除value前后的空格

<input type="text" v-model.trim="message">

注册全局组件

使用app注册一个全局组件

  <template id="component-a">
    <h2>我是组件哈哈哈哈哈哈哈</h2>
  </template>
  
  
    const app = Vue.createApp(App);
    // 第一个参数名，第二个对象
    app.component("component-a", {
      template: "#component-a"
    })
    app.mount('#app');

组件命名

方式一:使用kebab-case(短横线分割符) 当使用短横线分隔符时，引用组件也必须使用短横线,例如

<my-component></my-component>

方式二：使用驼峰标识符

app.component('ComponentC', {...})

<component-c></component-c>     //直接这样使用

局部注册组件

    const ComponentA = {
      template: '#component-a'
    }
    
    //在某个组件中
    components: {
      ComponentA: ComponentA
    },

构建SFC

在.vue文件中编写template、css等，可以采用VUE CLI创建项目，项目会帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件；或者自己使用webpack或vite这类打包工具，对其进行打包处理。

webpack基础打包

首先进入一个文件夹中，创建package.json包，用于管理各种包。

PS D:\+4前端之路\vue3 + ts 学习\learn-webpack\basic_webpack> npm init

完成之后下载局部webpack和webpack-cli（如果是全局的话打包各个项目由于依赖的webpack版本不同，可能会出现兼容性问题）

PS D:\+4前端之路\vue3 + ts 学习\learn-webpack\basic_webpack> npm install webpack webpack-cli -D

-D 是局部安装的缩写 在package.json的script中填入

  "scripts": {
    "build": "webpack"
  },

执行npm run build进行打包，默认就是局部打包

webpack打包会默认打包src/index.js文件可以使用命令指定入口和出口

PS D:\+4前端之路\vue3 + ts 学习\learn-webpack\basic_webpack> npx webpack --entry ./src/main.js --output-path ./build

一般来说，会创建一个webpack.config.js文件，来保存webpack打包运行的相关配置

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  }
}

webpack导如css文件,但是需要一个loader.loader可以对模块源代码进行转换。使其变成webpack可以进行加载的模块。

import 'css-loader!../css/style.css'

通过内联使用css-loader

  module: {
    rules: [
      {
        test:/\.css$/,
        use: [
            {loader:"css-loader"}
        ]
      }
    ]
  }

在webpack.config.js中配置