vue 中最基本的代码结构
<!DOCTYPE html>
<html lang="ch-Hans">
<head>
<meta charset="UTF-8">
<title>Vue代码结构</title>
<!-- 导入vue插件 -->
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
<div id="app">
<p>{{ value }}</p>
</div>
<script>
// 2.创建一个Vue实例
// 当我们导入包之后，在浏览器的内存中就多了一个vue的构造函数
var vm = new Vue({
//表示一个当前我们new的这个Vue实例，要控制页面上的哪个区域
el: '#app',
//data属性存放的是el中要用到的数据
data: {
//通过Vue提供的指令，很方便的把数据渲染到指定位置，不需要操作DOM元素了
value: '欢迎学习Vue'
},
methods:{
show(){
this.value = '欢迎学习Vue!!!!'
}
}
})
</script>
</body>
</html>
})
1.el:
选择器 ，指定控制的区域。
2.data
是个对象，制定了控制区域内需要用到的数据。
3.methods
虽然带了个s后缀，但本身是一个对象。这里定义了一些函数 methods 函数中如果想访问 data 中的数据必须添加 this。
