10 examples of 'vue3 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
}

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
}

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
}

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
}

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
}

23
static component (componentName, opts) {
24
    this.components[componentName] = opts;
25
}

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
}

106
createVue(id, componentName, component, data) {
107
    this.registerComponent({
108
        ids: [id],
109
        name: componentName,
110
        instance: new Vue({
111
            el: id,
112
            data: { initData: data, isReady: true },
113
            components: { [componentName]: window[component] },
114
            mixins: [this.vueMixins],
115
        }),
116
        isLoaded: true,
117
    });
118
}

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
}

12
async function main () {
13
  flvjs.LoggingControl.forceGlobalTag = true
14
  flvjs.LoggingControl.enableAll = true
15
  
16
  const { roomId, id } = await hookAsync()
17
  console.log('hook ok', roomId, id)
18
  
19
  const player = new Vue(DanmuPlayer)
20
  player.$mount(`#${id}`)
21
  console.log('mount')
22
23
  // @ts-ignore
24
  player.src = await getSourceURL(roomId, 'ws', '0')
25
  // @ts-ignore
26
  console.log(player.src)
27
}