【vue2】基础概念 01 (vue框架介绍、el、data、插值表达式)

简介: vue框架介绍、结构元素详解(el、data、插值表达式)

一、vue概念

    vue官方描述为是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

1.对比组件库

       对比我们之间学的组件库来说(拿moment、axios举例),库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能工具箱。需要自己控制代码的执行逻辑

       而我们框架相当于是直接用别人写好的骨架来进行开发的,这样限制多但是框架的功能也很强大,可以极大地提高开发的效率(常见框架:vue、react、angular、bootstrap)

2.vue框架特性

vue是 MVVM 的框架,各代表着:

  • M:model数据模型(ajax获取到的数据)
  • V:view视图(页面)
  • VM:ViewModel 视图模型

实现的机制如下:

89533e10c2204b60b34804fb6fe49455.png

一句话来总结就是说:

vue使用的这个框架是同通过数据来驱动视图的,我们修改了数据会通过MVVM的特殊机制来达到实时修改,实时渲染到页面上的效果

3.开发vue的方式

  • 传统开发模式:基于html/css/js文件开发vue
  • 工程化开发方式:在webpack环境中开发vue,这是最推荐的方式。
  • 现代化的项目也都是在webpack环境下进行开发的。

    (本文是初体验vue框架的开发模式,因此还是先遵守传统开发模式的方式进行演示讲解,等基础扎实了我们就开始转换现代化的方式进行开发喽)

二、传统开发vue初体验

1.永远不变的三大步(先体验结构,下文会解释代码细节)

①在html中导入我们准备好的vue.js文件

<!-- 1.导入vue -->
<script src="./vue.js"></script>

②写入HTML模板

<!-- 2.写HTML模板 -->
  <div id="app">
    {{message}}
  </div>
    <div id="app">
      {{message}}
  </div>

③创建实例对象

<script>
    // 3.创建实例对象
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello vue'
      }
    })
  </script>

上述是不变的结构,下面的话我们来学习为什么需要这样写

2.上述知识详解

1.挂载点el

挂载点通俗的来说就是确定vue它渲染的范围是哪一块区域。

我们通过挂载点el:"标签"来确定它渲染的范围。比如下面这个例子,我们就是通过 el="#app"从而找到了渲染的地方是在那个div盒子里面。

49f0237dc8f941d59b4565f40c860c9f.png

注意点:当有多个平级的el挂载点的时候仅仅只是会渲染第一个遇见的挂载点找到的标签。

例如:下面这个虽然有两个"#app"但是仅仅只是找到了第一个挂载点渲染,第二个未渲染。

7beaf5db498b4f40983d78c49fbf0784.png

2.插值表达式

写法:{{写data中的数据 }}

作用: 使用 data 中的数据渲染视图(模板)

注意事项:①可解析对象、数组、变量, 同时支持三元运算符

                 ②不能使用if或者for,也不能在标签属性中使用

比如可支持:

{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }}
{{ obj.age > 18 ? '成年' : '未成年' }}

3.存数据data

作用:里面存放我们vue框架所需要用到的数据。(切记:vue框架是以数据作为驱动的)

语法:data:{},data是对象。

注意点:vue框架处理数据会进行平铺的,即我们处理data中数据的时候可以省略用data.xxx的形式来读入data中我们存在的数据。

举个例子

3c09c052ba674deb8cea87cac87891da.png

看到这里了,我再来解释下上述vue框架传值并渲染的一个流程:

我们先通过我们引入的vue.js文件new实例化一个vue的对象出来,之后我们通过挂载点找到我们需要渲染的位置在哪里,之后找到里面的插值{{}}解析里面存放在data中的数据,解析完毕后vue框架会实时的将我们的内容自动的渲染出来,不再需要dom的操作。

本文的总览:

7f5f541362c649f39a9b4cdaf4b27e7b.png


相关文章
|
3月前
|
JavaScript
vue 组件中的 data 为什么是一个函数 ?
【10月更文挑战第8天】 在 Vue 组件中,`data` 被定义为一个函数而非普通对象,以确保每个组件实例拥有独立的数据空间,避免数据混乱。这种方式还支持数据的响应式更新、组件的继承与扩展,并有助于避免潜在问题,提升应用的可靠性和性能。
34 2
|
5月前
|
JavaScript 前端开发
Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)
这篇文章详细介绍了Vue中`el`和`data`的两种写法,解释了MVVM(Model-View-ViewModel)模型的基础知识,并探讨了数据代理的概念。文章通过代码实例和页面效果展示了这些概念的应用,还回顾了`Object.defineProperty`方法,并解释了Vue中如何实现数据代理。
Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)
|
5月前
|
JavaScript
VUE——三元表达式动态渲染样式
VUE——三元表达式动态渲染样式
83 0
|
6月前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
|
14天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
82 1
|
25天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
54 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
49 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
43 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
35 1
vue学习第7章(循环)