DYBOY's Blog

浑浑噩噩Vue

Vue学习的笔记

Vue

前端的进阶,小东也是粗略认识,个人偏见:例如以MVVM 模式的Vue前端渐进式框架,将前端的任务放到了视图层,更关心业务逻辑。

为啥有这种进化呐?人们的需求的改变,催使技术的进阶,客户想要前端美观,快速,这涉及到前端的优化

前端的优化可以有:

  • 源代码压缩、HTML5语义标签、更少的二次Get请求(资源文件整合)、图片使用精灵图,这些都是从带宽流量层面来优化的;
  • 其次程序员编码方面的诉求,希望前端的编码更专注业务逻辑,视图层DOM操作交给框架就好了,更加清晰、分模块化的编写程序,得以实现合作完成更加高效开发。
  • 浏览器兼容性问题,越来越多的浏览器,这就需要对各浏览器兼容提出要求,使用webpackbabel等工具使得ES2015编译以支持各个浏览器,前端工作更加专注业务逻辑。

我在D盘安装了Node,并且把Node的本地仓库移到了D盘下

结构

整个网页的入口组件App.vue,入口的js是main.js

0x01 构建项目


// 命令行下
vue init webpack vue01
...                  //这部分自己设置,配置信息
cd vue01
npm install -g
npm run dev            //运行起来可以实时看到效果
npm start            //同上
...                    //一系列的开发工作
nom run build        //项目做好后发布,生成静态文件index.html在dist目录下(发布时)

package.json中设置指定版本:

  "dependencies": {
    "vue": "2.5.16",
    "vue-router": "3.0.1"
  },

0x02 导入Bootstrap


npm install bootstrap --save --save-exact

main.js可看作程序的全局文件,其中引入:

import 'bootstrap/dist/css/bootstrap.min.css'

0x03 导入axios,vue-axios


是个啥?https://github.com/axios/axios

npm install --save --save-exact axios vue-axios

main.js引入:

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

项目中调用方法:

this.axios.post("https://api.top15.cn/piclist.php").then(response => {
    this.content = response.data;
})

如上 https://api.top15.cn/piclist.php 的跨域问题,我在后端源码中设置了 header('Access-Control-Allow-Origin: *'); ,大家就可以随便请求,也就不存在跨域的情况了。

0x04 导入自定义CSS


assets目录下新建一个style.css这样子,写入想要的样式,或者一些前端主题样式,在对应的组件使用import './assets/style.css'即可以相对路径的方式进行引入

0x05 组件


组件三大部分

0x06 工程结构


  • build目录:webpack的设置文件
  • config目录:工程设置文件
  • src目录:项目源代码编写文件
  • static目录:存储静态资源文件
  • index.html:网页启动的入口文件

0x07 路由


src 目录下的router 目录下的 index.js 编写我们的路由信息

使用import HelloWorld from '@/components/HelloWorld'导入组件,路由信息在下方的Router中增删改查

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import News from '@/components/News'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
        {
            path: '/about',
            name:'About',
            component: About
        },
        {
            path: '/news',
            name: 'News',
            component: News
        }
  ]
})

src 目录下的 main.js,自动引入了 router 目录下的 index.jsimport router from './router'),在入口组件中注册 router 对象

整体的流程:

  1. 添加Vue:在components目录下新建几个vue文件(组件)
  2. 添加路由:在router目录下的index.js中注册自己写的vue组件
  3. 添加链接:在App.vue中添加<router-link to="/">首页</router-link>这样的代码

0x08 动态路由


在URL中含有参数

//更新路由,再次初始化,在Player.vue中
beforeRouteUpdate( to, from , next){
    this.detail = this.getPlayer(to.params.uid);
    next();
},

router/index.js 中引入组件并设置如下:

        {
            path: '/player/:uid',
            name:'Player',
            component: Player
        }

0x09 嵌套路由

在动态路由基础上附加嵌套URL(组件)

在路由中引入组件,设置children

路由设置

在对应的Player.vue中设置的<router-link :to="xxx"></router-link>,参数to需要绑定

其他的和动态路由中需要注意的相同。

编程路由…

0x09 多组件


0x10 重定向 | 别名


redirect

alias

0x11 路由多参数


从路由取参数

vue

路由设置:

router/index.js

调用:

调用

0x12 总结


框架确实好用,逻辑性也增强了,两天时间内,浑浑噩噩速成Vue…,学艺不精,后期写个小东西练练手吧~2019-3-13 23:30:32

版权声明:《 浑浑噩噩Vue 》为DYBOY原创文章未经允许不得转载。

 DYBOY
 作者签名:专注程序开发和Web安全,商业合作请联系dyboy2017@qq.com

发表评论:

用心评论~

TOP
Powered by Emlog | Theme:Monkey by DYBOY
渝ICP备16008772号
sitemap