初试Vue.js+Require.js

Vue.js 是现在比较流程的视图层的框架，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。而Rquire.js 则是实现js文件的异步加载，避免网页失去响应。管理模块之间的依赖性，便于代码的编写和维护。用一个简单的程序来同时应用这两个框架下面是HTML 代码：test.html<html><head>...

Elaineyang610

4187人浏览 · 2019-06-26 11:20:56

Elaineyang610 · 2019-06-26 11:20:56 发布

Vue.js 是现在比较流程的视图层的框架，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

而Rquire.js 则是实现js文件的异步加载，避免网页失去响应。管理模块之间的依赖性，便于代码的编写和维护。

用一个简单的程序来同时应用这两个框架

下面是HTML 代码：

test.html
<html>
<head>
    <title>Vue + RequireJS</title>
    <!-- load RequireJS and  -->
    <script src="scripts/require.js" data-main="scripts/main"></script>

</head>
<body>
<div id="app">Loading...</div>
<div id="component1">
    {{message}}
</div>
</body>
</html>

"<script src="scripts/require.js" data-main="scripts/main"></script>" 这一句就是对require.js进行引入，"data-main" 就是require.config 文件，文件名叫'main.js' 在与html文件在同目录下的scripts folder里面，因此就是'scripts/main'。

接下来我们看看main.js里面到底是什么东西：

main.js
require(
    // configuration
    {
        baseUrl:'scripts',
        paths: {
            // the Vue lib
            'Vue': '../lib/vue',
            // Vue RequireJS loader
            'vue': 'https://unpkg.com/requirejs-vue@1.1.5/requirejs-vue'
        }
    },
    // load libs right now
    ['Vue', 'vue'],
    function(Vue, vue){
        // now load our single-file-component app
        // syntax: <vue loader module>!<relative path to .vue file>
        require(['vue!app','component1'], function(theApp,comp1){
            // mount app.
            theApp.$mount('#app');

        });
    }
);

这个部分：

require(
    // configuration
    {
        baseUrl:'scripts',
        paths: {
            // the Vue lib
            'Vue': '../lib/vue',
            // Vue RequireJS loader
            'vue': 'https://unpkg.com/requirejs-vue@1.1.5/requirejs-vue'
        }
    },

baseUrl 定义的路径是引入的基础路径，例如要引入Vue.js, 则path要设置成../lib/vue.js，路径下js可以省略，所以直接写成../lib/vue

// load libs right now
    ['Vue', 'vue'],
    function(Vue, vue){
        // now load our single-file-component app
        // syntax: <vue loader module>!<relative path to .vue file>
        require(['vue!app','component1'], function(theApp,comp1){
            // mount app.
            theApp.$mount('#app');

        });
    }
);

在下面就直接引入了 Vue的库，从而可以在下面代码使用Vue.js

['Vue', 'vue'],
function(Vue, vue){
    // now load our single-file-component app
    // syntax: <vue loader module>!<relative path to .vue file>
    require(['vue!app','component1'], function(theApp,comp1){
        // mount app.
        theApp.$mount('#app');

    });

require(['vue!app','component1'], function(theApp,comp1){ 这里引入的两个模块一个是'vue!app' 另外一个是'component1'，

其中'app'用的是$mount的挂载方式，而component1则是通过指定'el'实现对dom的渲染。

app.vue:

<template>
  <div>
    <ul>
      <li v-for="i in items">
        {{i}}
      </li>
    </ul>

  </div>
</template>



<script>
// require Vue
define(['Vue'], function(Vue){
  // create and return app instance
  // refer template as `template`
  return new Vue({
    template: template,

    data: {
    el:'app',
      // sample data: Japanese numbers
      items: [
        'test1',
              'test2',
              'test3'
      ]
    }
  })
});
</script>

在文件app.vue,定义了dom的模板（template），以及通过Vue进行data的绑定。

component1.js:

// require Vue
define(['Vue'], function(Vue){

    return new Vue({
        el:'#component1',
        data: {
            message:'Hello!Guest!'
        }
    })
});

而component1.js,则通过new Vue 指定了el #component1 进行数据的渲染。

直接跑test.html 就可以得到下面结果：

test1
test2
test3

Hello!Guest!

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^