当前位置：首页 > news >正文

Vue2框架基础配置逻辑和表单双向绑定

news 2026/4/9 16:28:53

为什么启动vue框架会默认显示某个组件页面

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 引入样式 Vue.use(ElementUI) // 这会全局注册所有 Element UI 组件 Vue.config.productionTip = false new Vue({ router, //router的作用是把Vue Router实例注入到Vue根实例中，可以启动路由组件（这使得 <router-view> 和 <router-link> 等内置路由组件能够正常工作） render: h => h(App) //请把 App 组件渲染出来。 }).$mount('#app') //将渲染结果挂载到 id 为 app 的 DOM 元素上

App.vue

<template> <div> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <router-view/> </div> </template>

index.html

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>

main.js是vue框架的入口文件，import App from './App.vue'这部分代表引入App组件，然后

new Vue({ router, //router的作用是把Vue Router实例注入到Vue根实例中，可以启动路由组件 （这使得 <router-view> 和 <router-link> 等内置路由组件能够正常工作） render: h => h(App) //请把 App 组件渲染出来。 }).$mount('#app') //将渲染结果挂载到 id 为 app 的 DOM 元素上

创建vue实例，这个实例会将App组件进行渲染，并将渲染结果挂载到index.html中id为app的DOM中。

这样，vue框架启动后默认的界面就是App组件

DOM概念

假设你有这样的 HTML：

html

<div id="app"> <p class="text">Hello World</p> </div>

浏览器构建的 DOM 树中：

<div id="app">是一个元素节点（div 元素）
<p class="text">是它的子元素节点（p 元素）
Hello World是文本节点（不是元素，只是文本）

你可以通过 JavaScript 获取和操作这些元素：

javascript

// 获取 p 元素 const pElement = document.querySelector('p'); // 修改它的内容 pElement.textContent = '你好，世界'; // 修改它的样式 pElement.style.color = 'red';

Vue登录注册

1. 外层`<el-form>`标签

html

<el-form :model="user" style="width: 80%" :rules="rules" ref="loginRef">

:model="user"
这是表单的数据绑定对象。user是在 Vue 组件的data中定义的一个对象，通常包含username和password属性。表单中的输入值会通过v-model自动同步到这个对象的对应属性上。
style="width: 80%"
简单的内联样式，设置表单宽度为父容器的 80%。
:rules="rules"
表单验证规则。rules是在data中定义的验证规则对象，它定义了每个字段（如username、password）的验证条件（如是否必填、长度、格式等）。当用户提交或触发验证时，Element UI 会根据这些规则自动检查输入的有效性。
ref="loginRef"
给表单注册一个引用名称。这样在 Vue 组件中可以通过this.$refs.loginRef获取到这个表单实例，从而调用它的内置方法，例如validate（用于整体验证表单）或resetFields（重置表单）。

3. 表单项：账号输入框

html

<el-form-item prop="username"> <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.username"></el-input> </el-form-item>

<el-form-item>
表单项的容器，它会根据prop属性自动关联验证规则，并显示验证错误信息。
- prop="username"
  指定该表单项对应:model="user"中的username字段。同时告诉验证规则系统：这个输入框的验证规则来自rules对象中username对应的规则。
<el-input>
输入框组件。
- prefix-icon="el-icon-user"
  在输入框左侧显示一个 Element UI 内置的用户图标。
- size="medium"
  设置输入框的尺寸为中等。
- placeholder="请输入账号"
  占位提示文本。
- v-model="user.username"
  双向数据绑定，将输入框的值与user.username同步。当用户输入时，user.username自动更新；反之，如果程序修改user.username，输入框也会同步显示。

`:model="user"`和`v-model="user.username"`在 Element UI 表单中协同工作，但分工不同：

1.`:model="user"`（el-form 的绑定）

作用：将整个表单的数据对象绑定到user变量上，这个变量通常是一个对象（例如{ username: '', password: '' }）。
用途：Element UI 的<el-form>通过:model知道表单的整体数据结构，从而在验证、重置等操作时能够正确访问每个字段的值。
特性：它是单向数据流（父组件传值给表单组件），但表单内部会通过v-model修改这个对象的属性，从而实现数据的双向更新。

2.`v-model="user.username"`（el-input 的绑定）

作用：在<el-input>上使用，将输入框的值与user对象的username属性进行双向绑定。
用途：当用户输入时，user.username自动更新；当程序修改user.username时，输入框显示同步变化。
特性：这是 Vue 原生的双向绑定指令，直接操作对象属性。

3.它们的关系

整体与局部：:model="user"定义了整个表单的数据容器，而v-model="user.username"负责容器中某个具体属性的输入绑定。
验证依赖：表单验证（:rules）依赖于:model提供的对象结构。每个<el-form-item>通过prop指定要验证的属性名（如prop="username"），验证规则会基于user.username的值进行检查。
数据同步：v-model对user.username的修改会实时反映在user对象上，因此:model总能获取到最新的表单数据。

示例

html

<el-form :model="user" :rules="rules" ref="form"> <el-form-item prop="username"> <el-input v-model="user.username"></el-input> </el-form-item> </el-form>

javascript

data() { return { user: { username: '' }, // 表单数据对象 rules: { // 验证规则 username: [ { required: true, message: '请输入用户名' } ] } }; }

:model="user"告诉表单：数据存在user对象里。
v-model="user.username"让输入框和user.username双向绑定。
prop="username"告诉表单项：验证时检查user.username。

注意

如果表单只有一个字段，直接使用v-model绑定一个简单变量（如v-model="username"）而不使用:model也可以，但就无法使用 Element UI 的表单验证和重置功能了。因此:model和v-model通常成对出现，以发挥 Element UI 表单的完整能力。

改变vue启动端口和浏览器的标签页标题

vue.config.js

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { port:7000 }, chainWebpack: config => { config.plugin('html').tap(args => { args[0].title = "我要成为java高手"; return args; }); } })

查看全文

http://www.jsqmd.com/news/496779/