本文目录：
- 1.安装
- 2.使用vue
- 3.创建vue实例
- 4.事件处理
- 5.基础指令
- 6.样式绑定
- 7.表单输入
- 8.什么是组件？
- 9.将组件分离出来-单文件组件
- 10.组件生命周期钩子函数
1.安装
首先创建一个项目目录，我这里创建一个vue-demo的目录，这个名字可以自定义，但是不要命名为vue 这样会冲突
我这里使用命令来创建，如果对命令不熟悉，可以直接在webstorm中创建
mkdir vue-demo
然后进入到vue-demo目录,如果使用webstorm创建的话就直接在webstrom中打开teminal，这样是默认进入vue-demo的
cd vue-demo
接下来初始化项目
npm init -y
最后使用npm 安装vue
npm install [email protected] --save
因为是小白嘛，为了防止意外bug的出现，安装的时候我们使用@锁定版本。
2.使用vue
vue是一个渐进式的框架，so，我们可以直接在页面中使用script引用vue的核心js文件，没错，不需要任何配置，就是这么简单！
3.创建vue实例
通过new Vue函数创建出一个新的Vue实例vm
let vm = new Vue()
可以在创建Vue实例的时候传入相应的选项
let vm = new Vue({
el: '#app' //id名为app的元素作为应用的根节点
})
console.log(vm.$el) //这里打印出相应的根节点
符号开头的，用来和用户自定义的属性区分开
初始化时传入的data属性，用来存放相关数据，并且这些数据是响应式的
let vm = new Vue({
el: '#app',
data: {
message: 'hello,nodeing',
username: 'xiaoqiang'
}
});
console.log(vm.$data.message) //hello,nodeing
console.log(vm.$data.username) //xiaoqiang
强调一点，vm代理了data的数据对象，效果如下
console.log(vm.$data.message === vm.message)//true
需要注意的是，只有初始化的时候，在选项data中存在的属性才是响应式的
例如，初始化的时候是这样的：
let vm = new Vue({
el: '#app',
data: {
message: 'hello,nodeing',
username: 'xiaoqiang'
}
});
其中，data里面并没有password属性，我们在浏览器中增加password属性，是看不到变化的。
4.事件处理
监听事件
使用v-on:事件名称 = '事件处理函数'的形式来监听事件，事件处理函数要写在methods后面的对象中