10 examples of 'vue js cdn' in JavaScript

1
function Vue(options){
2
    var context = document.querySelector(options.el);
3
    var html = context.innerHTML;
4
    var data = options.data;
5
    var regex = /(\{\{\s*([\w]+)\s*\}\})/g;
6
    while(regex.exec(html)){    
7
        console.log(1)
8
        html = html.replace(new RegExp(RegExp.$1, "g"), data[RegExp.$2]);// 只进来2次
9
        //html = html.replace(RegExp.$1, data[RegExp.$2]);// 进来3次
10
        // console.log(RegExp.$1 + "："+ RegExp.$2);
11
    }
12
13
    context.innerHTML = html;
14
}

7
export function vueLoaders({cssSourceMap, cssMinimize, cssExtract, babelOptions}) {
8
    return {
9
        loaders: Object.assign({
10
            js: {
11
                loader: 'babel-loader',
12
                options: babelOptions
13
            }
14
        }, cssLoaders({
15
            cssSourceMap,
16
            cssMinimize,
17
            cssExtract
18
        }))
19
    };
20
}

8
function Vue (options) {
9
  if (process.env.NODE_ENV !== 'production' &&
10
    !(this instanceof Vue)
11
  ) {
12
    warn('Vue is a constructor and should be called with the `new` keyword')
13
  }
14
  this._init(options)
15
}

26
function Vue(options) {
27
    var self = this; // 实例的对象赋值，防止后期对对象的更改
28
    this.data = options.data;
29
    this.methods = options.methods;
30
31
    // 将data上面的属性代理到vm实例上
32
    Object.keys(this.data).forEach(function(key) {
33
        self.proxyKeys(key);
34
    });
35
36
    // 监听数据的变化
37
    observe(this.data);
38
    // 进行指令的编译
39
    new Compile(options.el, this);
40
41
    options.mounted.call(this); // 所有事情处理好后执行mounted函数
42
}

45
export function compileVue (source, componentName) {
46
  return new Promise((resolve, reject) => {
47
    if (!templateRE.test(source)) {
48
      return reject('No Template!')
49
    }
50
    const scriptMatch = scriptRE.exec(source)
51
    const script = scriptMatch ? scriptMatch[1] : ''
52
    const templateMatch = templateRE.exec(source)
53
    const compileOptions = {}
54
    if (/\s*recyclable\=?/i.test(templateMatch[1])) {
55
      compileOptions.recyclable = true
56
    }
57
    const res = compile(templateMatch[2], compileOptions)
58
59
    const name = 'test_case_' + (Math.random() * 99999999).toFixed(0)
60
    const generateCode = styles => (`
61
      try { weex.document.registerStyleSheets("${name}", [${JSON.stringify(styles)}]) } catch(e) {};
62
      var ${name} = Object.assign({
63
        _scopeId: "${name}",
64
        style: ${JSON.stringify(styles)},
65
        render: function () { ${res.render} },
66
        ${res['@render'] ? ('"@render": function () {' + res['@render'] + '},') : ''}
67
        staticRenderFns: ${parseStatic(res.staticRenderFns)},
68
      }, (function(){
69
        var module = { exports: {} };
70
        ${script};
71
        return module.exports;
72
      })());
73
    ` + (componentName
74
      ? `Vue.component('${componentName}', ${name});\n`
75
      : `${name}.el = 'body';new Vue(${name});`)
76
    )
77
78
    let cssText = ''
79
    let styleMatch = null
80
    while ((styleMatch = styleRE.exec(source))) {
81
      cssText += `\n${styleMatch[1]}\n`
82
    }
83
    styler.parse(cssText, (error, result) => {
84
      if (error) {
85
        return reject(error)
86
      }
87
      resolve(generateCode(result.jsonStyle))
88
    })
89
    resolve(generateCode({}))
90
  })
91
}

3
module.exports = function nuxtBootstrapVue (moduleOptions) {
4
  // Conditionally require bootstrap original css too if not explicitly disabled
5
  if (moduleOptions.css !== false) {
6
    this.options.css.unshift('bootstrap/dist/css/bootstrap.css')
7
  }
8
9
  // Register plugin
10
  this.addPlugin({
11
    src: path.resolve(__dirname, 'plugin.js'),
12
    fileName: 'bootstrap-vue.js',
13
    moduleOptions
14
  })
15
16
  // Add library styles
17
  this.options.css.push('bootstrap-vue/dist/bootstrap-vue.css')
18
}

4
export default function vueLoader({ isServer }) {
5
  // https://vue-loader.vuejs.org/en
6
  const config = {
7
    postcss: postcssConfig.call(this),
8
    extractCSS: !!this.options.build.extractCSS,
9
    cssSourceMap: this.options.build.cssSourceMap,
10
    preserveWhitespace: false,
11
    loaders: {
12
      js: {
13
        loader: 'babel-loader',
14
        options: this.getBabelOptions({ isServer })
15
      },
16
      // Note: do not nest the `postcss` option under `loaders`
17
      css: styleLoader.call(this, 'css', [], true),
18
      less: styleLoader.call(this, 'less', 'less-loader', true),
19
      scss: styleLoader.call(this, 'scss', 'sass-loader', true),
20
      sass: styleLoader.call(
21
        this,
22
        'sass',
23
        { loader: 'sass-loader', options: { indentedSyntax: true } },
24
        true
25
      ),
26
      stylus: styleLoader.call(this, 'stylus', 'stylus-loader', true),
27
      styl: styleLoader.call(this, 'stylus', 'stylus-loader', true)
28
    },
29
    template: {
30
      doctype: 'html' // For pug, see https://github.com/vuejs/vue-loader/issues/55
31
    },
32
    transformToRequire: {
33
      video: 'src',
34
      source: 'src',
35
      object: 'src',
36
      embed: 'src'
37
    }
38
  }
39
40
  // Return the config
41
  return config
42
}

4
function createVue(el, vueComponent, vueProps) {
5
  const nodeEl = document.createElement('div');
6
  el.appendChild(nodeEl);
7
  const app = Object.assign(new Vue(vueComponent), vueProps);
8
  app.$mount(nodeEl);
9
  return app;
10
}

45
updateCssLoaders(webpackConfig) {
46
    // Basic CSS and PostCSS
47
    this.updateCssLoader('css', webpackConfig, rule => {
48
        rule.loaders.find(
49
            loader => loader.loader === 'postcss-loader'
50
        ).options = this.postCssOptions();
51
    });
52
53
    // LESS
54
    this.updateCssLoader('less', webpackConfig);
55
56
    // SASS
57
    let sassCallback = rule => {
58
        if (Mix.seesNpmPackage('sass')) {
59
            rule.loaders.find(
60
                loader => loader.loader === 'sass-loader'
61
            ).options.implementation = require('sass');
62
        }
63
64
        if (Config.globalVueStyles) {
65
            rule.loaders.push({
66
                loader: 'sass-resources-loader',
67
                options: {
68
                    resources: Mix.paths.root(Config.globalVueStyles)
69
                }
70
            });
71
        }
72
    };
73
74
    // SCSS
75
    this.updateCssLoader('scss', webpackConfig, sassCallback);
76
77
    // SASS
78
    this.updateCssLoader('sass', webpackConfig, sassCallback);
79
80
    // STYLUS
81
    this.updateCssLoader('styl', webpackConfig);
82
}

21
async function main () {
22
  // Get user info
23
  try {
24
    state.user = await $fetch('user')
25
  } catch (e) {
26
    console.warn(e)
27
  }
28
  // Launch app
29
  new Vue({
30
    el: '#app',
31
    data: state,
32
    router,
33
    render: h => h(AppLayout),
34
  })
35
}