摘要：是中的条件指令，根据返回的布尔值动态添加或移除元素。传值方式我是标题需要在中定义函数传的值为字符串，不需要前缀传的值为非字符串数字布尔值函数数组对象，为前缀，值为表达式计算结果在程序中，如引用的值。为该组件内，元素绑定的事件处理函数。
视图
包含内容#NavigationBar、#TabBar、#MainContext；
为什么#NavigationBar、#TabBar分在Layout中，而不是components中？
代码上实际上是没有差别的，只是认为#NavigationBar、#TabBar是加载一次的，而非复用，且属于页面布局内容。
App.vueVue实例化的根组件，我们在这里进行布局：
src/App.vue文件：
在这里，我们使用标识 其内部的HTML为Vue Template。
内部必有一个且唯一的节点（这里是div#app）包裹内容（即使只是一串字符）-->若存在同级节点，则会报错（这是因为VNode会通过createElement("div")来创建真实节点，只能是单个元素）；
通过components属性以键值对的形式引入组件，模板（HTML）中使用的标签名为键名（自定义元素VNode），值为导入的组件模块；
通过components定义组件使用的方式，限制了组件应用的范围。即：如果你在其它文件直接使用
局部注册的组件要求：如果在某一文件中应用该组件，必须要使用components注册一次。
导入组件import TabBar from "@/views/layout/TabBar";路径以@起，这是因为build/webpack.base.conf.js中配置的路径别名"@" === "resolve("src")"：
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
"vue$": "vue/dist/vue.esm.js",
"@": resolve("src"), //可以追加当前项目下，想快捷访问的文件目录
}
},
临时定义的组件文件：
src/views/layout/NavigationBar.vue文件：
NavigationBar
在这里，我们通过style[scoped]定义一份样式，其作用范围仅限于当前文件（又可称模块）模板中的元素。
像下边，在TabBar.vue中的header元素就没有使用到该文件中的对应样式，这就是局部作用域的样式。
局部作用域的样式只对当前文件中的元素起作用，想改变body的样式，不好意思，请全局导入或不使用局部作用域。
src/views/layout/TabBar.vue文件：
显示效果： NavigationBar测试是否和NavigationBar一样的效果
#NavigationBar中分左右结构，左边按钮后退，右边按钮更新页面。
更新页面只是更新数据，而不是整个页面的刷新，每个页面更新数据的接口不同，所以，要作为组件属性传入。
在src/views/layout/navigationBar.vue中：
{{title}}
该部分为单文件组件#NavigationBar的Template部分。
@click是v-on:click的简写，用于绑定点击事件。
v-if是Vue中的条件指令，根据返回的布尔值动态添加或移除DOM元素。
该部分为单文件组件#NavigationBar的组件配置对象。
props为父级（调用该组件的组件）传过来的属性。
传值方式
title传的值为字符串，不需要:前缀；
:refresh传的值为非字符串（数字、布尔值、函数、数组、对象...），:为前缀，值为Javascript表达式计算结果；
在程序中，如this.title引用props的值。
在模板中，作元素的innerHTML内容时，如{{title}}引用。
methods为该组件内，元素绑定的事件处理函数。
在程序中，如this.refresh()引用。
在模板中，如@click="onRefresh"调用，传入的是函数应用；若传参，如@click="onRefresh(param)"调用。
computed本身写法和函数定义一致，然而，其本身是一个data（数据源），字段名为函数名，值为函数的返回值。
使用方式与props一致。
| 区别 | method | computed |
|---|---|---|
| 类型 | 函数 | 数据变量 |
| 参数 | 可以带参 | 不带参（非函） |
| 触发 | 交互时触发 | 声明内部的this属性的值变化时执行 |
这里样式请大家随意设定，我使用的是flexBox布局。
点击刷新，我定义了console.log("refresh success")。
TabBar#TabBar分以下情况：
无
一个按钮
两个按钮
每个视图中#TabBar按钮是不同的，所以，按钮的配置要当作组件属性传入（控制变化的量）。
测试数据源const tabBars = [
{
label: "提交",
eventType: "click",
disabled: false,
callBack(vm) {
console.log("单击，提交");
}
},
{
label: "取消",
eventType: "dblclick", //该事件在手机模式下无法响应呢，只能在PC模式下调试
disabled: false,
callBack(vm) {
console.log("双击，取消");
}
}
]
src/views/layout/TabBar.vue的模板：
v-for="tab in tabBars"是Vue中的循环结构，搭配:key使用，优化Vue的渲染机制；
对tabBars进行遍历，tab为数组中的元素。
同样key值，在更新时，会复用组件，而不是销毁后，再创建一个新的组件。
$parent是组件实例#TabBar的父实例（#App）。
src/views/layout/TabBar.vue组件配置对象：
这里使用了另一种方式定义组件tabButton，其与 单文件组件 的区别仅仅在于使用render方法定义模板。
优势：定义出来的组件更具有灵活性，在这里on属性可以动态绑定事件类型。
注意：这里的事件类型[this.event]是作为参数传进来的呢！
组件本质上只是一个JavaScript对象（虚拟DOM），该对象按Vue规定的成员属性构建，区别只在于Template的写作模式。
这里应用了Slot，指代该组件嵌套的子节点。
这里使用了underscore.js（_.isArray），需要在build/webpack.base.conf.js中配置：
const webpack = require("webpack");
...
module.exports = {
...
module:{
...
},
plugins:[
new webpack.ProvidePlugin({
_: "underscore",
}),
],
...
然后，underscore在全局可用。
因为这里的配置对dev和prod环境是一致的，所以，直接在build/webpack.base.conf.js中配置了。
显示效果 整体Layout布局最终，我们要做一个顶天立地的内滚动结构（使用flexBox布局即可）：
src/App.vue样式中：
其中src/styles/mixins.scss：
@mixin flex($direction:row, $alignItems: stretch, $justifyContent: space-between, $basis: auto,$wrap:nowrap) {
display: flex;
flex-direction: $direction;
align-items: $alignItems;
justify-content: $justifyContent;
flex-basis: $basis;
flex-wrap: $wrap;
}
章节回顾
我这里面省略了将写好的#NavigationBar、#TabBar替换原临时搭建的对应组件，我相信你能处理好，对吧？！
#App小节中，是怎样注册局部组件的，如果想要在项目所有模板中可以直接使用标签名来应用组件，该怎么处理呢？
#App小节中，如何定义局部样式的，如果想让app.vue中header的样式全局可用，该怎么处理呢？
父组件如何传值给子组件，若想传布尔值，该如何操作？
render函数如何渲染组件模板，使用该方法如何定义组件？
slot用于什么情况下呢，有什么好处？
思考接下来要实现列表了呢，怎么做列表数据呢？
番外Vue Slot应用
组件定义
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96575.html
摘要：页面布局页面整体布局分上中下上下部门导航栏，每个页面所共有页面的主体，随内容可滚动栏，页面可选，有的有，有的无可分离组件日期组件审批流组件列表组件可分离的工具库申请单类型事假病假年假对应数据类型应该为，需要一个转换为对应的方法申请单状 页面布局 showImg(https://segmentfault.com/img/bVbeCjT?w=663&h=451); App页面整体布局分...
摘要：目前，我们还没有创建项目，进入预期项目目录的上一级文件目录下即可。使用脚手架初始化项目最后一个为项目名称，可以自定义其它名称。 本章以下命令都是在cmd命令行中进行的。 安装命令行 npm i -g vue-cli 安装完成后，输入vue -V返回版本号，即安装成功； 初始化项目 切换到项目目录下 项目目录，即项目所在目录。 目前，我们还没有创建项目，进入 预期项目目录 的上一级文件目...
摘要：若需要传参，传第二个参数不接受多个参数的传入，最多只接收两个参数请求数据目前，通过以上步骤，我们独立的构建了模拟数据和状态管理，但还没有将它们结合起来。验证如果你想验证写出来的模拟数据是否正确，可以在示例页打开控制台，直接运行。 关于模拟数据，这里使用Mock.js这个库，关于用法，官网说的也比较详细，这里我就简单的带一下。 列表数据 我们先将项目中src/components/Hel...
摘要：至于，为什么跟踪文件因为这个功能是开发环境下独有的，要修改开发环境吖，必然找开发环境的配置文件进行跟踪。测试可行性重启项目后，在浏览器中输入是你本地，可通过查看能够访问，就说明局域网内的其他端可以访问。然而，这样并没有结束。 本章内容包含上一章思考的解决，还有一些其它的定制... CSS预处理 关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf....
摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...
阅读 1208·2021-11-24 09:39
阅读 2131·2021-11-22 13:54
阅读 2114·2021-09-08 10:45
阅读 1445·2021-08-09 13:43
阅读 2986·2019-08-30 15:52
阅读 3086·2019-08-29 15:38
阅读 2849·2019-08-26 13:44
阅读 3056·2019-08-26 13:30
