Vue入门

两个版本对应的文件名

1. 完整版 对应文件名：vue.js

2. 非完整版 对应文件名：vue.runtime.js

两个版本的区别：

• 完整版：可以从HTML或template直接得到视图，有compiler，可一将html里含有{{n}}，@click,v-for这些变成真实的节点
• 非完整版：无compiler，不能直接将html变成节点。webpack通过vue-loader将html变成h('div',this.h)

template 和 render 怎么用

vue完整版

<!--App.vue-->
<template>
    <div id="app">
        {{n}}
        <button @click = "add">+1</button>
    </div>
</template>

/* main.js */
new Vue({
    el: '#app',
    data:{
        n:0
    }
    methode:{
        add(){
            this.n+=1
        }
    }

以非完整版运行上面完整版的例子，n是不显示的，@click也不会有什么作用

非完整版例子

<!--App.vue-->
<template>
    <div id="app">
        {{n}}
        <button @click = "add">+1</button>
    </div>
</template>

/* main.js */
new Vue({
    el: '#app',
    render(){
        return h('div',[this.n, h('button', {on:{click:Jthis.add}, '+1'}])
    }
    data:{
        n:0
    }
    methode:{
        add(){
            this.n+=1
        }
    }

如何用 codesandbox.io 写 Vue 代码

1. 登入官网：codesandbox.io/

2. 点击Create Sandbox 3. 选择创建vue,自动生成vue组件 4. 选择File ——> Export to ZIP导出项目