vue的CDN用法

CDN用法比较简单，只需要引入vue的js文件就可以开始开发。

<script type="text/javascript" src="https://unpkg.com/vue"></script>

下面使用一些vue常用的特性

一：数据绑定

HTML代码

首先创建一个容器名字叫vue-app,然后绑定name这个变量，在HTML中渲染出来
<div id="vue-app">

   // 以后所有的内容都写在这个容器里面
   <h1>{{name}}</h1>  // 绑定name这个数据

</div>

js代码

// 实例化vue对象
new Vue({
    el:"vue-app",
    data:{
        name:"hello vue"
    }
})

二：函数的使用

HTML代码

// 先创建一个容器和上面一致
<div id="vue-app">
  <button on:click="updateName">修改name数据的值</button>
  <h1>{{name}}</h1>
</div>

js代码

// 实例化 vue对象
new Vue({
    el:"vue-app",
    data:{
        name:"hello vue"
    },
    methods:{
        updateNmae:function(){
            this,name = '修改后的hello vue'
        }
    }
})

三：数据的双向绑定

HTML代码

// 数据双向绑定用到v-model这个属性
<div id="vue-app>
 <input  type="text" v-model="name" >
 <span>{{name}}</span>
</div>

js 代码

// 实例化vue对象
new Vue({
    el:"vue-app",
    data:{
        name:"hello vue"
    },

})