运行vue单文件
新建一个test.vue
.vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js
.vue文件由三部分组成:<template>、<style>、<script>
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
</script>
<style lang="scss" scoped>
</style>
运行test.veu
在test.vue当前路径运行:
vue serve test.vue
打开浏览器查看效果:
编译vue文件
在test.vue当前路径运行:
vue build test.vue
编译完成文件:
单
文件
组件
是在
开发
中用的比较多的,它的后缀都是.
vue
结尾的既然是.
vue
结尾,那么直接给浏览器是不能
运行
的,.
vue
文件
是
vue
团队打造的特殊
文件
,想让.
vue
文件
让浏览器识别并且
运行
,需要对它进行处理加工成纯粹的js
文件
,那么浏览器就认识了常用的处理加工.
vue
文件
有两种方式1 借助webpack:自己找一些插件完成整个编译流程2 借助脚手架:这是
vue
官方提供的,它其实就是
vue
的团队拿着webpack打造完的流程和编译整个
环境
,我们直接拿来用即可。
1. 全局定义的
组件
必须保证
组件
的名称不重复;
2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \;
3. 不支持 CSS 意味着当 HTML 和 JavaScript
组件
化时,CSS 明显被遗漏;
4. 没有构建步骤限制,只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器(如:Babel);
.
vue
文件
,称为
单
文件
组件
,是
Vue
.js自定义的一种
文件
格式,一个.
vue
文件
就是一个
单
独的
组件
,在
文件
内封装了
组件
相关的代码:html、css、js
vue
-loader
浏览器本身并不认为.
vue
文件
,所以必须对.
vue
文件
进行加载解析,此时需要
vue
-loader
类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等
需要注意的是
vue
-loader是基于webpack的webpack是一个前端资源模板化加载器和打包工具
webpack处理
vue
vue
单
文件
组件
的介绍
single-file components(
单
文件
组件
) ,
文件
扩展名为 .
vue
的
文件
,需要安装vetur插件
以前定义
组件
非常麻烦, 需要写 template模板, 在里面需要写模板字符串, 但有了
单
文件
组件
就不用了
单
文件
组件
文档
完整语法高亮
CommonJS 模块
组件
作用域的 CSS
单
文件
组件
的结构说明
<template>
<h1>这是
单
文件
组件
的模板内容</
grammar_cjkRuby: true
SCF指定位置挂载(延迟挂载)
当使用
Vue
的自定义
组件
,做类似于JQuery那种现在js新建节点,然后加到页面指定位置,发现无法像JQuery那样,直接使用下面这种就能加载到指定位置
$("<div><...
文章目录1.
组件
与模块1.1 模块1.2
组件
1.3 模块化与
组件
化2. 非
单
文件
组件
的使用2.1 data与el的两种写法2.2 使用
组件
的步骤2.3 使用
组件
的注意项2.4
组件
嵌套2.5
Vue
component2.6
Vue
实例与
组件
的关系3.
单
文件
组件
的使用3.1 认识3.2
文件
结构4.
组件
间操作4.1 ref属性4.2 props
配置
4.3 mixin混入4.4 插件4.5 scoped样式4.6 自定义事件4.7 全局事件总线4.8 消息订阅与发布4.9 `nextTick`