前端发展技术不断更新,需要学习的地方还很多,一个人最可怕的不是有多成功,而是不断的学习,作为一名技术人员,要不断学习新的事物,不断提升自己,才是发展之路。
写博客不是给别看的而是给自己看的
有幸之前的项目使用过一些不错的框架 今天简单描述一下vue和require的使用,仅入门级的参考。

Vue

  • Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
  • Vue 只关注视图层, 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
  • Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。

require

  • RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

1首先布置使用require

使用requirejs,我们只需要导入requirejs即可,不需要显式导入其它的js库,因为这个工作会交给requirejs来做。

<script type="text/javascript" data-main="./static/js/index.js" src="./static/plugins/require.js"></script>

同时data-main 是告诉requirejs:载入真正的入口文件。它一般用来对requirejs进行配置,并且载入真正的程序模块。
看看入口文件index.js的配置:

requirejs.config({
    baseUrl: './static/',
    paths: {
        "jquery": "plugins/jquery-1.8.3.min",
        "bootstrap": "plugins/boostrapv3/js/bootstrap.min",
    },
    shim: {
        "bootstrap": {
            deps: ["jquery"]
        },
    },
});
  • config 该函数用于配置RequireJS.
    require.config配置参数选项
    baseUrl :用于加载模块的根路径。
    paths: 用于映射不存在根路径下面的模块路径。
    shims: 配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。
    RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。
    deps:加载依赖关系数组

    define: 定义一个模块

define(function(require){
    var Vue  = require('../static/plugins/Vue.min.js');
    var public  = require('../static/js/public.js');
    var cookie  = require('../static/plugins/jquery.cookie.min.js');
    var login_outUrl = public.urlPath.loginUrl;
    });

另外还可以把 require 当作依赖的模块,然后调用它的方法:

require(["./static/plugins/Vue.min.js","./js/navbar"],function (vue,navBar) {
    navBar.fnInit("active");
});

2 使用Vue

  • 这里我们再require的data-main中配置vue
paths: {
        "jquery": "plugins/jquery-1.8.3.min",
        "Vue":"plugins/Vue.min",
    },
  • 在引用vue的require中使用
require(["Vue","./js/navbar"],function (vue,navBar) {
    navBar.fnInit("active");
});

如果项目中使用webpack,nodeJs管理项目,与Vue一起使用会更好的前端开发体验,由于目前还没设计,这里不做过多说明 , 但是不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。

  • 在页面地方使用Vue模板语法,Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,
 <ul id="side">
            <li v-for="item in items" :data-type="item.type">
                <span class="iconfont" :id="item.type"></span>
                <div class="tooltip parts-li-tip">
                    <div class="tooltip-inner" >
                        <div >
                            <h4>{{ item.message }}</h4>
                        </div >
                    </div>
                </div>
            </li>
            <li data-type="QRcode">
                <span class="iconfont"></span>
                <div class="tooltip parts-li-tip">
                    <div class="tooltip-inner">
                        <img src="./static/img/firstPage/weixin.jpg"></div>
                </div>
            </li>
            <li data-type="Top" v-on:click="goTop()">
                <span class="iconfont"></span>
            </li>
        </ul>
  • Vue数据处理
new Vue({
            el : '#side',
            data: {
                items: [
                    { message: '客服电话:15389056016',img: './static/img/online/phone.png',type: 'Phone' },
                    { message: 'QQ:165639134',img: './static/img/online/qq.png',type: 'QQ' },
                    { message: '淘宝官方店',img: './static/img/online/taobao.png',type: 'WhatsApp' },
                ],
            },
            methods: {
                fnSideTarget: function (message) {
                    alert(message)
                },
                goTop:function () {
                    $('html,body').animate({'scrollTop':0},600);
                }
            }
        });

这里只是一个简单项目使用的例子。。。。

Logo

前往低代码交流专区

更多推荐