🌵vue基础—第一节

简介: 🌵vue基础—第一节

1.Vue简介


1.JavaScript框架


2.简化DOM操作


3.响应式数据驱动


通俗点来说就是页面是由数据生成的,数据改变以后,页面会同步更新。


2.第一个Vue程序


  1. 导入开发版本的Vue.js


  1. 创建Vue实例对象,设置el属性和data属性


  1. 使用简介的模板语法把数据渲染到页面上


ac7f307e7ee740ceb05bffb8d266eff7_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


3.el:挂载点

53d447296f184c3d950b9413559056ed_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png831db71e1e664283b10b8d4f710bb698_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


通过CSS选择器管理Vue选择的元素,el命中元素的内部使用两个大括号的部分被data中同名的数据替换,在上面的例子中message的数据就被Hello Vue!所替换。


几个问题?


Vue实例的作用范围是什么呢?


验证方法:在div内部和外部都设置{{message}}

Vue会管理el选项命中的元素及其内部的后代元素。

1a71d420857b452cbd21ab31b784225f_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


是否可以选择其他的选择器?


验证方法:给div也设置一个app类名 el挂载使用的是类选择器

可以选择其他选择器,但在实际开发中建议使用ID选择器,因为ID选择器在开发中约定是唯一的,使用其他选择器会使得语义不清晰。


61e072fb6e3f42efb5c3b06ea3f84c82_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


是否可以置其他的DOM元素?


验证方法:将div标签该为p标签

可以设置其他DOM元素,但是只限于双标签(body除外)

2d607306f4ba4b7ea742f6733c708a26_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


4.data:数据对象


  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时,遵守js的语法即可


19b86665523a44508db27c2df0408cfd_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png




相关文章
|
22小时前
|
JavaScript
【vue】 父组件调用子组件方法
【vue】 父组件调用子组件方法
6 0
|
22小时前
|
JavaScript
【vue】 如何给封装好的组件加click事件
【vue】 如何给封装好的组件加click事件
5 1
|
1天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...
|
1天前
|
JavaScript 索引
【vue】框架搭建
【vue】框架搭建
6 1
|
1天前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
1天前
|
JavaScript
【vue】setInterval的嵌套实例
【vue】setInterval的嵌套实例
5 1
|
2天前
|
JavaScript 前端开发 安全
【Vue】内置指令真的很常用!
【Vue】内置指令真的很常用!
|
2天前
|
JavaScript
【Vue】过滤器Filters
【Vue】过滤器Filters
|
2天前
|
存储 JavaScript
Vue的状态管理:Vuex的使用和最佳实践
【4月更文挑战第24天】Vue状态管理库Vuex用于集中管理组件状态,包括State(全局状态)、Getters(计算属性)、Mutations(同步状态变更)和Actions(异步操作)。Vuex还支持Modules,用于拆分大型状态树。使用Vuex时,需安装并创建Store,定义状态、getter、mutation和action,然后在Vue实例中注入Store。遵循最佳实践,如保持状态树简洁、使用常量定义Mutation类型、避免直接修改状态、在Actions中处理异步操作、合理划分Modules,以及利用Vuex提供的插件和工具,能提升Vue应用的稳定性和可维护性。
|
2天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`<router-link>`用于创建导航链接,`<router-view>`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。