python组件式开发_python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)...

最新推荐文章于 2022-10-22 21:06:06 发布

weixin_39788572

最新推荐文章于 2022-10-22 21:06:06 发布

阅读量252

点赞数

文章标签： python组件式开发

本文链接：https://blog.csdn.net/weixin_39788572/article/details/111423467

版权

昨日内容回顾

1. 组件间的传值1. bus -->空Vue对象

通过向bus对象抛出自定义事件的方式在组件间传递信息2. 注意事项：1. bus.$on()应该在组件mounted(挂载在页面上)的时候就执行2. this对象2. Vue实例的生命周期钩子函数(8个)1. beforeCreate

data属性光声明没有赋值的时候2. created

data属性完成了赋值3. beforeMount

页面上的{{name}}还没有被渲染成真正的数据4. mounted

页面上的{{name}}被渲染成真正的数据5. beforeUpdate

数据(data属性)更新之前会执行的函数6. updated

数据(data属性)更新完会执行的函数7. beforeDestroy

实例被销毁之前会执行的函数8. destroyed

实例被销毁后会执行的函数3. VueRouter

在前端做路由的1. 基本使用1. 先写路由2. 生成路由实例3. 将路由实例挂载到Vue对象上4.

<==>

2. 路由的模糊匹配1. path: '/user/:name' --->$route.params.name2. /user/alex?age=9000 --->$route.query.age3. 子路由

children4. 编程式导航

用JS代码去控制页面跳转

this.$router.push(...)4. Vue-CLI

一个脚手架工具，帮助我们快速的搭建Vue项目1. 查看本机安装的vueCLI的版本

vue-V ---> 2.9.6

2. 使用Vue CLI创建Vue项目

vue init webpack mysite5. 组件中捕获原生事件

.native修饰符

View Code

一、编程式的导航

除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击时，这个方法会在内部调用，所以说，点击等同于调用 router.push(...)。

声明式编程式

router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

//字符串

router.push('home')//对象

router.push({ path:'home'})//命名的路由

router.push({ name:'user', params: { userId: 123}})// 带查询参数，变成 /register?plan=private

router.push({ path:'register', query: { plan: 'private' }})

View Code

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = 123router.push({ name:'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123

//这里的 params 不生效

router.push({ path:'/user', params: { userId }}) // -> /user

View Code

同样的规则也适用于 router-link 组件的 to 属性。

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

**注意：**如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式编程式

router.replace(...)

举例：

Title

color:red;

}

去首页

去列表

template:'

home

'};

let list={

template:'

list

const routes=[

{path:'/home',component:home},

{path:'/list',component:list}

]

let router=new VueRouter({

routes:routes,

linkActiveClass:'active'});//默认加载第一个路径

router.push("/home");

let vm=new Vue({

el:"#app",

methods:{//编程式导航

goHome(){//页面跳转，push是增加到历史管理

this.$router.history.push('/home')//go表示前进后退//this.$router.history.go(-1)

goList(){

this.$router.history.push('/list')//将当前历史管理替换成list//this.$router.history.replace('/list')

}

},//会在实例中提供两个属性this.$route(属性)，this.$router(方法);

router:router,

})

View Code

访问网页，效果如下：

二、vue页面布局

我们要完成这个效果

使用以下命令，创建一个vue项目，具体执行过程，请参考上一篇文章

$ npm install -g vue-cli

$ vue init webpack my-project

$ cd my-project

$ npm install bootstrap@3.3.7 -D

$ npm run dev

去除默认页面

进入目录my-project\src\router

查看index.js，在routes里面有一行，它表示组件HelloWorld

component: HelloWorld

查看上面的一行

import HelloWorld from '@/components/HelloWorld'

@表示src目录

@/components/HelloWorld 表示src\components\HelloWorld.vue

.vue后缀，可以不用写。

组件统一在目录中components

进入目录my-project\src\components，查看HelloWorld.vue

在之间的代码，就是默认首页，图片下面的一堆a标签。

修改之间的代码。HelloWorld.vue部分代码如下：

这是首页！！！

View Code

返回上一级，打开App.vue文件，查看之间的代码

下面一行，表示一个图片。assets目录，可以放一些资源，比如图片之类的

再看下面一行

它的完整代码是。是一个简写，它会自动闭合！

初学者，建议使用完整写法！

删除这2行代码，增加一个bootstrap的导航条

修改App.vue里面之间的代码，增加一个nav标签

修改App.vue里面之间的代码，导入bootstrap

修改App.vue里面

App.vue完整代码如下：

//导入bootstrapimport 'bootstrap/dist/css/bootstrap.min.css'export default {

name:'App'}

View Code

访问网页，效果如下：

增加我的笔记

首先增加路由，路由统一在router目录

进入目录my-project\src\router，修改index.js，增加路由/note

为了方便路由扩展，定义常量routeArray，它是一个路由数组

修改默认的导入路由方式

头部使用import导入Note.vue

index.js完整代码如下：

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import Note from '@/components/Note.vue' //导入我的笔记组件

Vue.use(Router)//生成路由数组

var routeArray=[

{

path:'/',

name:'我的首页',

component: HelloWorld

{

path:'/note',

name:'我的笔记',

component: Note

}

]//生成路由实例

var routerObj=new Router({

mode:'history',

routes: routeArray

})//导入默认路由实例

export default routerObj

View Code

注意：component:Note 这里面的Note，对应就是Note.vue文件

进入目录my-project\src\components，新建文件Note.vue

这是我的笔记页面!

name:"Note"}

View Code

进入目录my-project\src，查看文件main.js，它是app 入口文件

查看这一行

router, 这个是简写，实际的完整代码是 router:router

因为键和值，都是router，所以可以简写为router

它实际对应的就是my-project\src\router目录，这个目录下有一个index.js，它会自动去加载它！

页面切换效果

在App.vue中的之间的代码，是网页导航部分。这里面的我的首页和我的笔记的a标签的herf属性是#，需要修改一下

由于我们使用的是Vue Router，它将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

所以a标签，必须替换为router-link。必须指定，App.vue完整代码如下：

//导入bootstrapimport 'bootstrap/dist/css/bootstrap.min.css'export default {

name:'App'}

View Code

注意：要指定路由出口，否则页面无法渲染！

那么Vue Router如何渲染网页导航的呢？

main.js，它是app入口文件，在Vue对象中，指定router就是src/router目录，默认会加载里面的index.js

index.js里面定义了2个path，/和/note，分别对应组件HelloWorld.vue和Note.vue

这2个组件，定义了标签，标签之间的代码，就是页面渲染的部分

访问页面，效果如下：

为什么首页的url，后面没有内容呢？而我的笔记，url后面有一个note

因为首页的path，就是 / ，它和直接IP+端口访问，效果是一样的！

查看src\router\index.js文件

//生成路由实例

var routerObj=new Router({

mode:'history',

routes: routeArray

})

从我们学习vue的前5天，生成路由实例时，从未指定mode参数。它默认为hash，访问页面会发现，url后面，会带一个#号，发觉没有？

指定mode为history，就不会有#号了！

vue项目流程

到这里，先来梳理一下，Vue项目的流程。在开发过程中，一般我们只修改src目录下的文件。

路由流程如下：

解释：

1. main.js是app入口文件，它里面定义的router，实际就是router目录

2. router目录下有一个index.js文件，它会默认加载。就好像使用Apache或者Nginx，指定默认首页为index.html一样

3. index.js定义了路由数组，指定一些组件。组件统一存放在components目录，后缀为.vue的文件，就是一个组件！

再来看一下

页面渲染流程：

解释：

1. 在main.js中，定义了组件为{ App }，它实际对应的就是App.vue

2. 在App.vue中，定义了标签，它是存放html代码的。

一般使用vue，会先绑定一个

，这个是约定俗成的！通俗的来讲，就是划分了一块田。

那么之后的所有操作，都是基于这个div来操作的！

必须指定路由出口，也就是，(是简写)，它才能被浏览器渲染！

3. HelloWorld.vue是默认就有的组件，它里面也定义了，但是并没有标签(路由出口)

为什么呢？因为在组件App.vue，它里面已经定义了路由出口，我们所有的操作都是基于这个div来操作的！

不信？有图有真相！

使用浏览器工具，查看html代码

看到一条蓝线没有，它表示一对标签。看到h1标签没有？它是HelloWorld.vue组件才有的标签！

h1标签是在

说到这里，我想大家应该明白了使用webpack模板创建vue项目的整个流程了吧！

for循环导航菜单

查看index.js，routeArray变量是一个数组。它对应的是App.vue中的2个a标签，这2个a标签写死了，我们可以改成for循环，来遍历数组。方便以后的扩展！

那么如何获取当前所有路由呢？

修改App.vue，增加一个计算属性

//导入bootstrapimport 'bootstrap/dist/css/bootstrap.min.css'export default {

name:'App',

data:function(){return{}

},//计算属性

computed:{

allRoutes:function(){//从Vue实例里面取出所有的路由

console.log(this.$router.options.routes)// returnthis.$router.options.routes

}

View Code

刷新页面，查看console，出现了2个路由

使用v-for循环allRoutes

修改App.vue，完整代码如下：

//导入bootstrapimport 'bootstrap/dist/css/bootstrap.min.css'export default {

name:'App',

data:function(){return{}

},//计算属性

computed:{

allRoutes:function(){//从Vue实例里面取出所有的路由//console.log(this.$router.options.routes)returnthis.$router.options.routes

}

View Code

刷新网页，效果同上！

我的笔记面板

点击我的笔记，下面的内容，是一个面板

使用栅格系统，左侧笔记列表为3格，右边笔记编辑区为9格

访问 http://127.0.0.1:8080/note

效果如下：

左侧列表组件

左侧的列表组，是一个组件

在components文件夹下，新建NoteList.vue文件

将Note.vue中的列表组的html代码剪切过来

NoteList.vue完整代码如下：

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

name:"NoteList"}

View Code

修改Note.vue，导入NoteList组件，Note.vue完整代码如下：

我的笔记

//导入NoteListimport NoteList from '@/components/NoteList.vue'export default {

name:"Note",//加载这个组建的时候先要去找 NoteList

components: {

NoteList,

}

height: 600px;

border: 1px solid grey;

}

View Code

刷新网页，效果同上！

分离左侧列表

每一个li标签都是组件，在components文件夹下，新建NoteItem.vue文件

name:"NoteItem"}

View Code

修改NoteList.vue，导入NoteItem.vue。NoteList.vue完整代码如下：

v-for="(note, index) in NoteList"v-bind:name='note'v-bind:key="index"

import NoteItem from '@/components/NoteItem.vue'export default {

name:'NoteList',

components: {

NoteItem

data:function(){return{//声明数组

NoteList: ['吃饭','睡觉','打豆豆']

}

View Code

刷新网页，效果如下：

父子传值

从上图可以看到，左边的列表组是空的，需要父子传值。

父就是NoteList，子就是NoteItem

修改NoteList.vue，增加一个数组，使用for循环遍历

v-for="(note, index) in NoteList"v-bind:name='note'v-bind:key="index"

//导入NoteItem组件import NoteItem from '@/components/NoteItem.vue'export default {

name:'NoteList',

components: {

NoteItem

data:function(){return{//声明数组

NoteList: ['吃饭','睡觉','打豆豆']

}

View Code

修改NoteItem.vue

name:'NoteItem',

props: ['name'] //在子组件声明我需要被传入的参数

}

View Code

刷新页面，效果如下：

查看html代码，和分离之前的代码，是一致的！

右侧笔记编辑区

右边区域，根据栅格系统，平均划分，就可以了。左边6格，右边6格

右边区域也是一个组件，在components目录下，创建NoteEdit.vue

标题

添加

// import marked from 'marked'export default {

name:'NoteEdit',

}

margin-top: 15px;

height:80%;

width:100%}

.height600 {

height: 600px;

}

.right-box {

border: 1px solid grey

}

View Code

编辑Note.vue，导入NoteEdit.vue组件，Note.vue完整代码如下：

我的笔记

//导入NoteListimport NoteList from '@/components/NoteList.vue'

import NoteEdit from '@/components/NoteEdit.vue'export default {

name:"Note",//加载这个组建的时候先要去找 NoteList

components: {

NoteList,

NoteEdit

}

height: 600px;/*border: 1px solid grey;*/}

View Code

刷新网页，效果如下：

双向数据绑定

左边的textarea输入框的值一旦发现改变，要将数据实时展示在右边的div中

使用v-model就可以实现

修改NoteEdit.vue

标题

添加

// import marked from 'marked'export default {

name:'NoteEdit',

data:function () {return{

content:''}

}

margin-top: 15px;

height:80%;

width:100%}

.height600 {

height: 600px;

}

.right-box {

border: 1px solid grey

}

View Code

刷新网页，效果如下：

Markdown

Markdown 是一个 Web 上使用的文本到HTML的转换工具，可以通过简单、易读易写的文本格式生成结构化的HTML文档。目前 github、Stackoverflow 等网站均支持这种格式。

中文文档链接：

在线编辑器：

访问这个网站，

它能将markdown语法，实时转换为Html

# 表示h1标签

```javascript``` 表示javascript代码

[]() 表示超链接

比如：

marked

marked是npm模块中，专门用来解析markdown语法的

先停止vue项目，安装marked

-D表示当前项目安装

E:\python_script\Vue\my-project>npm install marked -D

出现以下提示，表示安装成功

+ marked@0.4.0

added1 package from 1 contributor and audited 8826 packages in 21.209s

found1moderate severity vulnerability

run `npm audit fix` to fix them,or `npm audit` for details

启动vue项目

E:\python_script\Vue\my-project>npm run dev

修改NoteEdit.vue，导入插件marked

标题

添加

//导入marked模块，用来处理makedown语法import marked from 'marked'export default {

name:'NoteEdit',

data:function () {return{

content:''}

},//增加计算属性

computed:{

markedDownContent:function(){returnmarked(this.content)

}

margin-top: 15px;

height:80%;

width:100%}

.height600 {

height: 600px;

}

.right-box {

border: 1px solid grey

}

View Code

刷新网页，输入几段makedown语法

#我的家在东北

## 扫得寺内

```pythonprint("python是世界上最好的语言")

```-[] 呵呵哒-[x] 萌萌哒

![很萌的卡通小猫](http://www.gaoxiaogif.com/d/file/4dddbd73cb24eaef339623e28784155f.gif)

效果如下：

markdown是程序员的必备神器，所以有时间的话，多了解一下markdown的语法！

因为很多程序员都在用它

highlight.js

highlight.js是一款轻量级的Web代码语法高亮库

使用highlight.js高亮你的代码,无论是java，js还是php等等语言，都会自动的对关键字进行高亮

安装highlight.js

E:\python_script\Vue\my-project>npm install highlight.js -D

出现以下提示，表示安装成功

+ highlight.js@9.12.0

added1 package from 245 contributors and audited 8828 packages in 44.305s

found1moderate severity vulnerability

run `npm audit fix` to fix them,or `npm audit` for details

使用highlight.js

修改main.js，增加一段代码

//Web代码语法高亮库import hljs from 'highlight.js'

import 'highlight.js/styles/monokai.css' //样式文件

Vue.directive('highlight',function (el) {

let blocks= el.querySelectorAll('pre code');

blocks.forEach((block)=>{

hljs.highlightBlock(block)

})

注意：

Vue.directive要在实例初始化之前，不然会报错

main.js完整代码如下：

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set inwebpack.base.conf with an alias.import Vue from 'vue'

import App from './App'

import router from './router'Vue.config.productionTip=false//Web代码语法高亮库import hljs from 'highlight.js'

import 'highlight.js/styles/monokai.css' //样式文件

Vue.directive('highlight',function (el) {

let blocks= el.querySelectorAll('pre code');

blocks.forEach((block)=>{

hljs.highlightBlock(block)

})

})/* eslint-disable no-new */new Vue({

el:'#app',

router,

components: { App },

template:''})

View Code

修改NoteEdit.vue，增加v-highlight即可

NoteEdit.vue完整代码如下

标题

添加

//导入marked模块，用来处理makedown语法import marked from 'marked'export default {

name:'NoteEdit',

data:function () {return{

content:''}

},//增加计算属性

computed:{

markedDownContent:function(){returnmarked(this.content)

}

margin-top: 15px;

height:80%;

width:100%}

.height600 {

height: 600px;

}

.right-box {

border: 1px solid grey

}

View Code

刷新网页，增加一段python和javascript代码

```pythonclassStudent(object):def __init__(self, name, age, score):

self.name=name

self.age=age

self.score=scoredef get_name(self): #获取学生的姓名

returnself.namedef get_age(self): #获取学生的年龄

returnself.agedef get_course(self): #返回3门科目中最高的分数

return '{}\n{}\n{}'.format(self.name,self.age,max(self.score))

```

```javascript

var name= "abc";

console.log(name);

```

View Code

效果如下：

weixin_39788572

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python组件式开发_python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)...

昨日内容回顾1. 组件间的传值1. bus -->空Vue对象通过向bus对象抛出自定义事件的方式在组件间传递信息2. 注意事项：1. bus.$on()应该在组件mounted(挂载在页面上)的时候就执行2. this对象2. Vue实例的生命周期钩子函数(8个)1. beforeCreatedata属性光声明没有赋值的时候2. createddata属性完成了赋值3. beforeMo...
复制链接

扫一扫