Mr.J--初识Vue.js（两大特性示例）

Vue中文文档：https://cn.vuejs.org/

刚开始写Vue是在html页面里面写的，为什么这样说，Vue有专门的文件格式（本人暂时没搞懂）：

可恶的Hello World

html:

<div id="app">
        <h1>{{message}}</h1>
    </div>

js:

var test = new Vue({
    el : '#app',
    data: {
    　　message : 'Hello world, I am Vue.js'
    }
    });

结果:

数据绑定

直接上代码，在输入框中可以看见返回的message的结果。（Javascript文件内容和Hello World文件一致）

<div id="app">
        <h1>Your input is  {{message}}</h1>
        <input type="text" v-model = "message">
    </div>

 

Vue组件化自定义标签

html中写入：

 <div id="app">
        <message content = 'Hello World'></message>
    </div>

js调用：

var Message = Vue.extend({
    　　props : ['content'],
    　　template : '<h1>{{content}}</h1>'
    })
    Vue.component('message', Message);
    var vm = new Vue({
    　　el : '#app',
    });

在页面中F12查看：

将原来的div内容直接进行更改。

注：本人在npm装了vue,但是现在只能通过

<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>

进行vue导入，求大佬指点。