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

最新推荐文章于 2023-12-12 08:38:07 发布
最新推荐文章于 2023-12-12 08:38:07 发布
阅读量9.8k 收藏 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选择器字符串。
最低0.47元/天 解锁文章
YK菌
关注
  • 41
    点赞
  • 踩
  • 123
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue基础
weixin_43342445的博客
01-04 738
Vue基础一、创建vue对象二、数据的双向绑定三 、计算属性-监视属性-双向绑定四、列表显示五、事件的绑定六、vue对象的生命周期七、vue动画八、Vue自定义指令 一、创建vue对象 new Vue({ el:'#root', //指定根element data:{ // 初始化数据(页面可以访问) name:'wangchao', address:'合肥' } }) // el和dat
【JAVA】Vue
haoyu__的博客
08-18 600
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
Vue2基础-Vue对象介绍
ning_xiao_xuan的博客
11-08 436
Vue2基础-Vue对象介绍
vue中的对象、数组和对象数组
最新发布
chen的博客
12-12 3447
在JavaScript中，对象、数组和对象数组是不同的数据结构，它们各自具有特定的特征和用途。
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(一)1.基础
qq_42809433的博客
07-31 863
Vue.js 文章目录Vue.jsvue.js渐进式Vue 核心引入组件组件基本分类根组件的创建可复用的功能组件组件内容渲染templateelrender使用 $mount 方法延迟 `Vue` 实例的挂载组件中的数据（状态）datadata 的访问模板语法Mustache（双大括号，大胡子） 语法插值表达式数据到视图的更新检测变化的注意事项扩展使用 Vue.set 方法添加新数据 vue.js [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXDNylyT-1596187
Vue成神之路（一）：Vue对象创建，属性，钩子函数,Vue特殊方法
小毛驴
06-18 1603
一：Vue对象创建和销毁钩子函数： beforeCreate：对象初始化之前，data钩子函数初始化之前，dom对象没创建。 create：对象已经创建，data钩子函数已经初始化，dom对象没创建。 beforeMount：对象已经创建，data钩子函数已经初始化，dom对象已创建，data数据没有挂载到dom的指令中。 mounted：对象已经创建，data钩子函数已经初始化，dom对象已创建，data数据已经挂载到dom的指令中。 beforeDestroy：对象存在，data数据存在，dom对象销毁
vue 数组，对象，对象数组
weixin_57467236的博客
10-11 4725
Vue 数组，对象数组，对象
vue对象、数组操作
amazingLiQin的博客
07-14 3412
vue中数组、对象基础操作 相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了. 如果对象已经有某个响应式属性了，没必要再$set，直接赋值。 判断对象本身有无某个属性：Object的hasOwnProperty()方法，返回一个布尔值，判断对象是否包含特定的自身（非继承...
在vue的data里面能不能new对象
wwwer52022222的博客
08-02 3779
答案是肯定的,可以new 在script标签里面创建一个class class H{ constructor(type,percent,showInfo,successPercent,strokeColor,successPercentstrokeColor){ this.type=type||"line"; this.percent=percent||100; ...
vue--创建对象属性
Efficiency9的博客
06-04 6849
如果我们遇到以下情况 当我们在页面中想完成一个动态效果，例如通过鼠标点击控制class的隐藏或者显示，然而我们的代码或者引用的数据中没有这个属性，这个时候我们可以通过vue中的set方法创建属性，并且为其赋值。 2.例如以下代码 以下并不是完整代码，由于完整代码有点多，所以仅截取相关代码 HTML+Vue<div class="cart-item-check"> <!--我们没有在标签中创建名
第一个vue案例 创建vue实例化对象
u014248032的博客
03-14 2850
Vue的使用 1、先导入vue.js &lt;script src="vue.js"&gt;&lt;/script&gt; 2、创建vue实例化对象 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;
vue如何实例化多个对象
丰柏林的博客
05-08 3893
vue可以在js里面实例化多个对象 代码如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <link rel="stylesheet" href="style.css"&gt...
解决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、付费专栏及课程。

余额充值