【Vue】基础系列（一）初识 - 简单使用 - 创建Vue对象 - 双向数据绑定 - 显示数据 - MVVM模式

最新推荐文章于 2024-04-27 20:35:11 发布
最新推荐文章于 2024-04-27 20:35:11 发布
阅读量9.9k 收藏 123
点赞数 41
分类专栏： 前端框架Vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44972008/article/details/112779284
版权

在这里插入图片描述

文章目录

0. 基本认识

渐进式 JavaScript 框架，用来动态构建用户界面

https://cn.vuejs.org/
在这里插入图片描述

0.1 特点

  1. 遵循 MVVM 模式
  2. 编码简洁，体积小，运行效率高，适合 移动/PC 端开发
  3. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目
  4. 采用组件化模式，提高代码复用率、且让代码更好维护
  5. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
  6. 使用虚拟DOM和Diff算法，尽量复用DOM节点

0.2 与其他前端 JS 框架的关联

借鉴 angular 的 模板 和 数据绑定 技术
借鉴 react 的 组件化 和 虚拟DOM 技术

0.3 Vue 扩展插件

vue-cli：vue 脚手架
vue-resource(axios)：ajax 请求
vue-router：路由
vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于 vue 的 UI 组件库（移动端）
element-ui：基于 vue 的 UI 组件库（PC 端）

1. 引入Vue.js

本地引入
CDN引入

2. 创建Vue对象

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. { {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
//创建Vue实例
new Vue({
   
	el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
	data:{
    //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
		name:<
最低0.47元/天 解锁文章
YK菌
关注
  • 41
    点赞
  • 踩
  • 123
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue基础
weixin_43342445的博客
01-04 753
Vue基础一、创建vue对象二、数据的双向绑定三 、计算属性-监视属性-双向绑定四、列表显示五、事件的绑定六、vue对象的生命周期七、vue动画八、Vue自定义指令 一、创建vue对象 new Vue({ el:'#root', //指定根element data:{ // 初始化数据(页面可以访问) name:'wangchao', address:'合肥' } }) // el和dat
二、Vue实例对象及其属性
Lvruoyu的博客
04-21 6504
01. Vue实例 Vue实例 通过new关键字实例化Vue({})构造函数 <script> new Vue({ el: "#app", data: { msg: "Hello World" } }) </script> Vue实例配置对象 选项 说明 data Vue实例数据对象 methods 定义Vue实例中的
Vue基础-创建vue的对象
weixin_72492001的博客
08-11 3788
Vue基础-创建vue的对象
Vue之数据对象
玉案轩窗的博客
07-20 3531
前言 本篇文章旨在学习Vue对于相关属性或特性的处理，同时学习HTML特性和DOM属性的区别和联系，实际上涉及到以下内容： HTML特性和DOM属性之间的联系与区别 Vue的数据对象中涉及的HTML特性、DOM属性、组件prop、特殊特性 Vue中对于4种属性或特性处理所涉及的相关逻辑 HTML特性和DOM属性 实际上对于HTML特性和DOM属性，之前对于其的理解是相同的东西，实际上它们是不同...
vue实例对象及其元素释意以及vue3指令
qq_63524487的博客
05-04 924
类似于创建一个对象,里面包含钩子函数,data,methods.components等vue实例的对象data 主要是用来存放数据的 Vue框架会检测data的数据变化,自动更新到html上。
vue自定v-model实现表单数据双向绑定问题
10-18
Vue.js 是一个流行的前端JavaScript框架，其核心特性之一就是数据双向绑定。在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新...
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下
vue.js使用v-model指令实现的数据双向绑定功能示例
10-18
在Vue中，`v-model`指令是实现数据双向绑定的关键特性之一，这使得UI（用户界面）与应用程序的状态能够实时同步，极大地简化了表单处理和动态数据更新。 双向绑定意味着当你在视图层（例如输入框、选择框或复选框）...
vue.js自定义组件实现v-model双向数据绑定的示例代码
10-15
主要介绍了vue.js自定义组件实现v-model双向数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE v-model表单数据双向绑定完整示例
10-17
主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下
Vue实例对象
bigdatafj的博客
09-12 8907
Vue实例对象 Vue()是一个构造函数，用new Vue(构造参数)得到的就是一个实例对象，Vue实例对象是Vue.js中最基本的单元。构造参数是一个对象，构造参数的属性即为参数选项，常见的参数选项有el、data、template、components等。 在项目中， 在main.js中通过创建最外层的Vue实例对象来实现根结点、根组件的功能。 参数选项： el：即element，表示当前Vue实例对象的装载位置，装载在哪个元素上，也称为挂载点。装载的含义是将template中的内容替换挂载点元素所.
【JAVA】Vue
haoyu__的博客
08-18 610
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
Vue2基础-Vue对象介绍
ning_xiao_xuan的博客
11-08 485
Vue2基础-Vue对象介绍
vue中的对象、数组和对象数组
chen的博客
12-12 3768
在JavaScript中，对象、数组和对象数组是不同的数据结构，它们各自具有特定的特征和用途。
vue创建对象的方式
最新发布
B__B_B的博客
04-27 292
【代码】vue创建对象的方式。
vue.js前端构造技术
m0_74333815的博客
12-28 1704
随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
热门推荐
YK菌的博客
03-11 1万+
文章目录0. 项目介绍电商管理系统（Element-UI）前端技术栈后端技术栈1. 配置前端项目① 安装 Vue 脚手架② 通过 Vue 脚手架创建项目③ 配置 Vue 路由④ 配置 Element-UI 组件库⑤ 配置 axios 库⑥ 初始化 git 远程仓库⑦ 将本地项目托管到 Github 或 码云 中2. 配置后端接口① 安装 MySQL 数据库② 安装 Node.js 环境③ 配置项目相关信息④ 启动项目⑤ 使用 Postman 测试后台项目接口是否正常3. 登录/退出功能3.1 登录业务流程3
解决Vue中表单输入框v-model双向绑定后数据不显示
06-12
如果在Vue中使用v-model双向绑定表单输入框，但是在页面中输入数据后却无法显示出来，可能是以下几个原因导致的： 1. 没有正确绑定数据 在使用v-model指令时，需要将其绑定到一个Vue实例中的数据属性上，确保数据能够正确地双向绑定。例如： ``` <template> <div> <input type="text" v-model="inputValue"> <p>{{ inputValue }}</p> </div> </template> <script> export default { data() { return { inputValue: '' } } } </script> ``` 2. 绑定的属性名与实际数据属性不一致 有时候我们会将v-model绑定到一个对象的属性上，但是属性名与实际数据属性不一致，导致无法正确显示数据。解决方法是确保绑定的属性名与实际数据属性一致。例如： ``` <template> <div> <input type="text" v-model="user.name"> <p>{{ user.name }}</p> </div> </template> <script> export default { data() { return { user: { name: '' } } } } </script> ``` 3. 样式问题 有时候输入框的样式会导致输入的内容无法显示，解决方法是检查输入框的样式是否正确。例如： ``` <template> <div> <input type="text" v-model="inputValue" style="color: black;"> <p>{{ inputValue }}</p> </div> </template> <script> export default { data() { return { inputValue: '' } } } </script> ``` 以上是三种可能导致Vue中表单输入框v-model双向绑定后数据不显示的原因及解决方法，您可以结合具体情况进行调试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值