Vue学习开始走向VUE开发2---第一个Vue程序

本文链接：https://blog.csdn.net/jifukui/article/details/99582273

Vue一个比较大的特色是支持数据的双向绑定，现在我们就一这个特性来开始第一个Vue程序带大家走进Vue的世界。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="test">
    <div v-text="name">Name is </div>
    <div>Local Name is: </div>
    <input
    v-model="name"
    />
</div>
 
<script>
var vm = new Vue({  
        el: '#test',  
        data: {  
            name:"hahahhaha"
        },  
    });  
</script>
</body>
</html>

这个程序开起来和一般的HTML没有太大的区别有引入的脚本文件，在<script>标签中创建了一个变量vm为初始化的Vue对象，对象中有两个键el和data,其中el键表示的是这个对象挂载在这个DOM中在这里是将此挂载在id为test的标签，data为对象的数据部分。

当使用浏览器打开此文件时将会得到如下图所示的内容