位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 1.3.1 Vue 单文件组件 (SFC) 规范
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 1.3 开发规范 下一篇: 1.4 目录结构

1.3.1 Vue 单文件组件 (SFC) 规范

简介

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template><script> <style>,还允许添加可选的自定义块:

<template>

  <div>{{ msg }}</div>

</template>

 

<script>

export default {

  data () {

    return {

      msg: 'Hello world!'

    }

  }

}

</script>

 

<style>

.example {

  color: red;

}

</style>

 

<custom1>

  This could be e.g. documentation for the component.

</custom1>

vue-loader 会解析文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 ES Module,它的默认导出是一个 Vue.js 组件选项的对象。

vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译的 HTML 模版语言,通过设置语言块的 lang 属性。例如,你可以像下面这样使用 Sass 语法编写样式:

<style>

  /* write Sass! */

</style>

语言块

模板

n  每个 .vue 文件最多包含一个 <template> 块。

n  内容将被提取并传递给 vue-template-compiler 为字符串,预处理为 JavaScript 渲染函数,并最终注入到从 <script> 导出的组件中。

脚本

n  每个 .vue 文件最多包含一个 <script> 块。

n  这个脚本会作为一个 ES Module 来执行。

n  它的默认导出应该是一个 Vue.js 的组件选项对象。也可以导出由 Vue.extend() 创建的扩展对象,但是普通对象是更好的选择。

n  任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) webpack 规则都将会运用到这个 <script> 块的内容中。

样式

n  默认匹配:/.css$/

n  一个 .vue 文件可以包含多个 <style> 标签。

n  <style> 标签可以有 scoped 或者 module 属性以帮助你将样式封装到当前组件。具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用。

n  任何匹配 .css 文件 (或通过它的 lang 特性指定的扩展名) webpack 规则都将会运用到这个 <style> 块的内容中。

自定义块

可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求,例如 <docs> 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应的块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。

Src 导入

如果喜欢把 .vue 文件分隔到多个文件中,你可以通过 src 属性导入外部文件:

<template src="./template.html"></template>

<style src="./style.css"></style>

<script src="./script.js"></script>

需要注意的是 src 导入遵循和 webpack 模块请求相同的路径解析规则,这意味着:

n  相对路径需要以 ./ 开始

n  你可以从 NPM 依赖中导入资源:

<!-- import a file from the installed "todomvc-app-css" npm package -->

<style src="todomvc-app-css/index.css">

在自定义块上同样支持 src 导入,例如:

<unit-test src="./unit-test.js">

</unit-test>

语法高亮 / IDE 支持

目前有下列 IDE/编辑器 支持语法高亮:

n  Sublime Text

n  VS Code

n  Atom

n  Vim

n  Emacs

n  Brackets

n  JetBrains IDEs (WebStormPhpStorm )

非常感谢其他编辑器/IDE 所做的贡献!如果在 Vue 组件中没有使用任何预处理器,你可以把 .vue 文件当作 HTML 对待。

注释

在语言块中使用该语言块对应的注释语法 (HTMLCSSJavaScriptJade )。顶层注释使用 HTML 注释语法:<!-- comment contents here -->

【uniapp参考资料】

(1)uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512


(2)uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059


(3)基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977


(4)毕业设计网

http://www.pc-365.net


(5)小程序编程网

http://www.4317.org


(6)计算机编程网

http://www.05423.com


上一篇: 1.3 开发规范 下一篇: 1.4 目录结构
毕业设计网             广告联系QQ:45157718(微信同号)