Vue.js知识点总结 (单文件组件)

最新推荐文章于 2023-02-04 11:24:10 发布
最新推荐文章于 2023-02-04 11:24:10 发布
阅读量2k 收藏
点赞数
分类专栏： 前端_Vue.js 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41136216/article/details/105741664
版权

文章目录

render 渲染

模板 ——> 编译 ——> ast》数据 ——> render函数 ——> 虚拟dom ——> 真实html

第一种用法

第二种用法

在这里插入图片描述

单文件组件运用

运用单文件组件有注意事项，就是要提前搭建好脚手架，不然很容易踩坑的，我是踩了一晚上
搭建脚手架的博客在往期 >>>
Vue知识点总结(脚手架Vue CLI3)

开始写单文件组件，如下图所示：
在这里插入图片描述

上面这张图就是大概的引入形式解释

接下来，我们来改一下代码，看下代码改变后重新渲染的结果。
在这里插入图片描述

关于单文件导入的渲染，是层层导入后渲染到页面上，如下图蓝框红线之间的顺序所示
在这里插入图片描述

效果如图所示，我们渲染了中间那几个字
在这里插入图片描述

再加个img标签，添加图片
在这里插入图片描述

无需刷新页面，一旦数据改变并保存，页面就会实时渲染，
这种层层包装，将组建分离的方式就是单文件组件，做到了一件一件的拼装，使项目不臃肿在一个页面，而是分步渲染

梦境工程师-335
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
组件 单文件组件 回顾 笔记
weixin_44195250的博客
07-28 202
options配置项 组件的创建方式： 全局组件 任何vm都可以使用 Vue.component() 局部组件 只能局部使用 components 参数1:是组件名称 参数2：组件的配置项 这个配置项中Vue的配置项中有什么这里面的配置项就有什么...
vue小项目总结与笔记【二】——vue的单文件组件模板和路由
denniszy1988的博客
03-18 133
vue的单文件组件的基本构成是这样的： <template> <div> 结构： （注意：template里只能有一层div，不能出现两个并列的div ） </div> </template> // 逻辑 <script> export default { ...
Vue单文件组件中的小技巧
技术无止境
05-09 2814
如何设置路径的别名 可以在build目录下的webpack-base-config.js 在resolve进行配置如下 { resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), ...
单文件组件基础模板
weixin_41766191的博客
06-05 250
{{title}} //Js部分尽量采用ES6语法，webpack babel插件会转义兼容 export default { //组件私有数据（必须是function，而且要return对象类型） data () { return { title: ‘组件标题’, firstName: ‘’, lastName: ‘’, } }, //父组件...
Vue.js学习笔记——16.单文件组件
土拨鼠的忧伤的博客
05-16 403
在之前Vue-CLI创建的项目中，看到了新的文件扩展名.vue，称为单文件组件，是Vue.js自定义的一种文件格式。 在之前的代码中，编写组件的形式都是全局组件，全部逻辑写在一个HTML文件内，这种方式虽然在初步学习的时候方便，但当我们的代码逻辑慢慢复杂，或想要编写更大的项目的时候，就会暴露出很多缺点。
vue组件的基本知识点
weixin_30871701的博客
08-12 109
1. 组件中 is 的特性： 有些 HTML 元素，诸如<ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如<li>、<tr>和<option>，只能出现在其它某些特定的元素内部。 这会导致一些bug： <table&g...
关于引入vue.js 文件的知识点总结
11-21
在本文中，我们将深入探讨如何在项目中引入Vue.js文件，并了解相关的关键知识点。Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。它的轻量级和可扩展性使其成为许多开发者的首选。以下是对引入Vue.js文件...
关于vue.js弹窗组件的知识点总结
12-28
vue 对于动画的处理相对简单，给组件加入css transition 动画即可 <!--省略其它内容--> [removed] // ... [removed] <style> .modal-scale-transition{ transition: transform,opa
Vue.js知识点总结 (element框架混用 制作一个左树右表布局)
01-08
首先要提的就是，你在做这个混用操作前，得会vue框架的单文件组件的模式操作，类似的操作也行，只要是单文件组件的思想。 开始上手 一，安装 切换到你vue的项目文件夹后，打开终端输入改安装命令（必须是你vue文件
Vue.js进阶知识点总结
10-18
通过学习和熟练运用这些进阶知识点，开发者可以更好地驾驭Vue.js，提高开发效率，编写出更加健壮和易于维护的前端应用。同时，对Vue生态中的其他工具如Webpack、Vue Router和Vuex的深入了解也是成为Vue.js大师的重要...
Vue组件 —— 单文件组件
最新发布
灵魂学者的博客
02-04 3510
本篇讲vue单文件组件内容，解决先前vue组件编写方式存在的问题等一系列问题，那么现在在项目当中，也是本篇目中最重要的内容就是Vue的单文件组件，接下来就是开始对Vue单文件组件内容的学习！
vuejs 单文件组件.vue 文件
weixin_30399797的博客
02-12 468
　　vuejs 自定义了一种.vue文件，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack构建中，需要安装vue-loader 对.vue文件进行解析。在 sumlime 编辑器中，我们 书写.vue 文件，可以安装vue syntax hig...
Vue.js学习—单文件组件
u011229269的博客
02-21 1097
1.1 关注点分离 关注点分离（Separation of concerns，SOC）是对只与“特定概念、目标”(关注点)相关联的软件组成部分进行“标识、封装和操纵”的能力，即标识、封装和操纵关注点的能力。是处理复杂性的一个原则。由于关注点混杂在一起会导致复杂性大大增加，所以能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。 关注点分离是面向对象的程序设计的核心概念。分离...
Vue单文件组件的理解
墨抒颖
06-09 1334
打开freemind,Ctrl+c文章内容,Ctrl+v粘到freemind界面中即可vue 单文件就是把一个页面拆分为多个,多层次的组件,通过多层引用,大大缩小vue文件的长度和页面复杂度 调用 父组件 引入组件 import [name] from [src]; 配置组件 export default { components:{ name,name,name}} 使用组件 子组件 制作子...
关于单文件组件
阿蔡的博客
01-26 1311
文件扩展名为 .vue 的 single-file components(单文件组件) 使用 webpack 或 Browserify 等构建工具 标签保存实例： 模板文件： 输入框组件 BaseInputText.vue： &amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;input type=&amp;a
vue单文件组件导入导出
woshichengce的博客
08-01 7171
目录分析 打开项目，依次分析下目录结构，项目目录结构如下 项目目录结构如下 单文件组件.vue 目完成后，我们看到src 目录下有一个componets 目录，里面有一个 HelloWorld.vue 文件（单文件组件），内容如下 （1）template模板—作用：定义展示模板信息 （2）script 标签—作用：导出组件模块 script中都是js 代码，它定义这个组件中所需要的数据...
css初学（1）
qq_40770473的博客
09-22 125
css基础 1.css的引用 ①内联样式：也称行内或行间样式，是在html标签上添加style属性来实现的 ②内部样式：在标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理 ③外部样式： rel：指定资源跟页面的关系 href：资源的地址，用于在当前du文档和引用资源之间确立联系 src：src是source的缩写用于替换当前元bai素。 2.颜色表达法 ①单词表示法 例：red；变红色 ②十六进制表示法：例：#cccccc，灰色 长度为6的名字当1/2，3/4，5/6一致
脑图神器 -- freemind
time block
07-29 7611
freemind+百度云 =>增量同步, 备注可加图片
vue学习笔记——组件(单文件组件)
Coolinx的博客
12-07 1290
vue学习笔记——组件(单文件组件) 一、创建组件(脚手架中)           在脚手架中，创建一个组件即在components中创建一个文件类型为vue的文件，如 HellloWorld.vue                       组件中包含 template模板（在此为html代码），script（各种数据和方法），以及style样式（scoped为只在此组件生效）   ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值