html引用单文件组件,vue之单文件组件纯网页方式引入

上一节的vue组件开发是把组件内容统一放到了一个js文件里面

里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋

vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串

下面看下写法

由于我们目前没有使用webpack和vue-cli等构建工具(为了快速学习vue的语法) 要在浏览器里直接使用单文件组件需要依赖一个插件http-vue-loader(因为单文件组件需要依赖这个loader进行编译)(用webpack打包编译也是需要相应的loader进行转化的(vue-loader))

我们下载好直接放在本地在html页面里面通过script的方式引入

首先看下单文件组件写法

vue里面的单文件组件是以.vue文件结尾的

里面包含template script style等节点

具体如下

首先在books文件夹下面创建一个booklist.vue文件

目录如下

image.png

内容如下

image.png

可以看见我们没有在template里面写上丑陋的转译换行符等模板就像写普通的html代码一样

接下来修改下booklist_component.html文件

首先加上插件(http-vue-loader)这个是在浏览器中直接使用单文件组件的插件

image.png

接着用httpVueLoader引用组件

image.png

运行效果

image.png

以上就是单文件组件的加载方式

vue里面组件注册可以分为全局和局部注册

有些时候我们不需要全局使用所以有必要学习下组件的局部注册

上节课的Vue.component()这种方式即为全局注册

下面看下局部注册

其实component属性几点可以放在vue实例里也可以放在单文件的组件里

向下面一样

image.png

放在vue实例里了把全局注册的组件注释掉了

运行效果是一样的

我们为了看起来清爽还可以修改成下面

image.png

由于二者名字是相同的在es6里面还可以简写成下面

image.png

运行效果

image.png

同理在单文件组件里也可以写上components引用其他的组件

image.png

booklist.vue里面写入components可以引用别的组件

由于我们的分页代码是写在图书列表组件里了分页代码有可能是通用的在别的地方有可能也能用到所以应该抽离出来做成公用组件在图书列表里面引用分页组件(子组件)

html引用单文件组件,vue之单文件组件纯网页方式引入相关推荐

vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
vue从服务器获取csv文件,前端 VUE 解析 CSV 文件
测试文件及依赖下载静态依赖 yarn包 yarn add jschardet -s yarn add papaparse -s 业务代码 template ref="upload" ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
Vue组件+Vue动画
目录 Vue选项自定义指令过滤,管道filters 全局组件局部组件 props传递参数 props细节组件传参父传子组件传值总结组件的插槽(嵌套) 具名插槽弹框组件的使用htt ...
angularjs1访问子组件_Vue学习笔记之组件的应用
Vue组件的应用: 1.基础使用:第一步创建组件,第二步注册组件,第三步使用组件.在注册组件是需要用到template的属性. 全局组件和局部组件组件的嵌套(父子组件):注意先后顺序,先声明,后面才 ...
Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...
vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊: ...
Vue之单文件组件和脚手架
简介主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍. 单文件组件的定义是一个文件只有一个组件,使用xxx.vue文件,这个文件是vue团队定义的一种文件类型. xxx.vue文件里面可以使用 ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

html引用单文件组件,vue之单文件组件纯网页方式引入

html引用单文件组件,vue之单文件组件纯网页方式引入相关推荐

最新文章

热门文章

html引用单文件组件,vue之单文件组件 纯网页方式引入

html引用单文件组件,vue之单文件组件 纯网页方式引入相关推荐

最新文章

热门文章

html引用单文件组件,vue之单文件组件纯网页方式引入

html引用单文件组件,vue之单文件组件纯网页方式引入相关推荐