vue项目篇(更新中)

2021-12-02 16:02:55 阅读：204 来源： 互联网

标签：vue 项目 title 更新 js 跳转 router mui css

vuex是数据状态管理,用在购物车的模块上

ps:

views是路由使用的,components

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

</script>
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

返回类型是数组,第二个参数是返回最大长度

split()是把字符串改为数组,reserve()是反转数组

join() 方法将数组作为字符串返回。

外来引入框架安装

npm install mint-ui@2.2 --save
接下来main.js,这是完整引入,建议用这个
```
import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)
```
Mint UI

上述代码完成了Mint UI的引入，其中， style.css样式文件需要单独引入。引入后，在页面中使用“mt-”前缀来定义标签名，如<mt-button>、<mt-header>等。

打开MUI官方网站GitHub - dcloudio/mui: 最接近原生APP体验的高性能框架，找到MUI下载地址下载到本地，或者直接使用源码包里的文件。在本项目中，把MUI相关的css、js等资源放置在src/lib目录下，
```
import './lib/mui/css/mui.css'

import './lib/mui/css/icons-extra.css'
```

技巧: 1. main.js是安装css和js的地方,因为webpack会打包这个文件

    2.外来引入的必须要用Vue.use()方法作为插件.

3.下载之后的库和框架,最主要就是要使用他的css或者js样式

首页页面知识点

{ path: '/home', component: Home, meta: { title: '首页' } },

meta是元信息在进入这个页面的时候可以使用

route与router区别

this.$route是"参数式编程",是地址上的url的参数,
this.$router是"导航式编程",因为里面有很多导航式api
this.$router.push("")里面是放hash地址,会修改本页的hash地址进行跳转,并增加一条记录
this.$router.replace("")里面是放hash地址,会修改本页的hash地址进行跳转,会覆盖记录

```
// 全局前置守卫
```
```
router.beforeEach(function (to, form, next) {
  if (to.path === '/home') {
    next()
    document.title = to.meta.title
    console.log(to)
  }
})
```
to,form是object类型和$route是一样的,里面有url的全部信息和在路由放meta的初始信息.docuemn.title是浏览器的页面标题

next()是通行证,如果没有就不给通过,里面可以添加地址j进行跳转.例如:next('/login')可以进行身份验证跳转

<template>
  <div id="app">
    <div class="container">
      <mt-header fixed :title="$route.meta.title"></mt-header>
      <router-view></router-view>
    </div>
  </div>
</template>

头部框的:title可以利用v-bind动态更新.不要放在各自的组件中,放在APP.vue之中,可以一直存在,并且根据<router-view>更新

MUI-最接近原生APP体验的高性能前端框架

这个网站的元素使用复制,在进行组件封装,再使用到App.vue之中
router-link的底层是a标签 ,当用a链接实现跳转可以用router-link实现,<a href="#/home">等于<router-link to="/home">

router-link点击之后会增加一个.router-link-active的class属性,我们可以用来做点击之后变色或者高亮的效果

当然有时在引入框架的时候,要注意写死的属性,例如:
```
<router-link class="mui-tab-item mui-active" to="#/home">
        
        首页
      </router-link>
      <router-link class="mui-tab-item" to="#/category">
        
        分类
      </router-link>
```
这里的mui-active是写死的属性我们需要注意删除掉,才能和.router-link-active的class属性配合做好点击高亮的功能.

标签：vue,项目,title,更新,js,跳转,router,mui,css
来源： https://blog.csdn.net/weixin_52519753/article/details/121679351

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue项目篇(更新中)

外来引入框架安装

首页页面知识点