vue2基础概念 01 (vue框架、el、data、插值表达式)
🥳博 主:初映CY的前说(前端领域)
🌞个人信条:想要变成得到,中间还有做到!
🤘本文核心:vue框架介绍、结构元素详解(el、data、插值表达式)
目录(文末有博主给大家准备好的XMIND思维导图,可快速预览本文核心知识要点呦)
一、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 视图模型
实现的机制如下:
一句话来总结就是说:
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盒子里面。
注意点:当有多个平级的el挂载点的时候仅仅只是会渲染第一个遇见的挂载点找到的标签。
例如:下面这个虽然有两个"#app"但是仅仅只是找到了第一个挂载点渲染,第二个未渲染。
2.插值表达式
写法:{{写data中的数据 }}
作用: 使用 data 中的数据渲染视图(模板)
注意事项:①可解析对象、数组、变量, 同时支持三元运算符
②不能使用if或者for,也不能在标签属性中使用
比如可支持:
{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }}
{{ obj.age > 18 ? '成年' : '未成年' }}
3.存数据data
作用:里面存放我们vue框架所需要用到的数据。(切记:vue框架是以数据作为驱动的)
语法:data:{},data是对象。
注意点:vue框架处理数据会进行平铺的,即我们处理data中数据的时候可以省略用data.xxx的形式来读入data中我们存在的数据。
举个栗子
看到这里了,我再来解释下上述vue框架传值并渲染的一个流程:
我们先通过我们引入的vue.js文件new实例化一个vue的对象出来,之后我们通过挂载点找到我们需要渲染的位置在哪里,之后找到里面的插值{{}}解析里面存放在data中的数据,解析完毕后vue框架会实时的将我们的内容自动的渲染出来,不再需要dom的操作。
本文的总览:
各位,兄弟姐妹们,感谢你看到了这里!
下篇文章将讲解【vue】指令的用法,本专栏将持续更新~~~~~~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiecfge
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22