helloVue
什么是vue.js？
(这一段内容可以先大致了解，等学习到vue中期或后期再回来看就会恍然大悟了)
vue.js是一套构建用户界面的渐进式框架。
那什么是渐进式呢？渐进式是开发者可以根据需求逐渐添加一些东西，而这些东西关联性又不是很强。
并且Vue使用的是MVVM(Model View ViewModel)模式，那什么MVVM又是什么呢？
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【Model】指的是后端传递的数据。在vue中model是js的数据。【View】指的是所看到的页面。【ViewModel】mvvm模式的核心，它是连接view和model的桥梁。在vue中是实例对象。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定
对了，还有重要的一点是，在vue里面，所有东西都是响应式的。即你在代码里所做的改变，在页面刷新一下就可以看到效果。
创建vue
导入vue那些就不说了，很多地方都有，而且后期也不需要用到前期导入vue的方式。
创建vue跟创建对象一样使用new Vue({}),大括号表示创建Vue实例时需要传递的参数，只不过这个参数是一个对象而已。
当然，创建的实例可以用一个变量来接收，如const n = new Vue({el: '#app'})
参数
接下来说说传递给Vue的对象的参数。
const n = new Vue({
el: '#app', // 要渲染的对象 可以是string或htmlelement
data: { //定义数据(属性)，参数可以是Object或者Function
message: '你好啊',
movies: ['幸运符','漫威','爱情公寓'],
num: 1
},
computed: { //计算属性，参数必须是函数但是使用时当做属性来用
money(){
// 可以是一些表达式等
return 10+20
},
methods: { //定义函数的地方
sub(){
//需要注意的是在对象内部使用属性时要加上this (千万要记住，这个经常会忘记)
this.num--;
}
}
}
})
另外，在创建vue的时候回进行一些回调生命周期函数。(下面的实例化接上张图)
const n = new Vue({
...,
created(){ console.log('我是组件创建后自动执行的回调函数');},
mounted() { console.log('将template挂载到整个DOM上后执行的回调函数')},
updated(){ console.log('我是界面发生更新时执行的回调函数')},
destroyed(){ console.log('我是组件销毁时执行的回调函数')}
})
取值 (语法:Mustache {{需要取值的内容}} )
知道了怎么创建vue，接下来写怎么用刚才创建vue时传递的数据。mustache语法就是双大括号不仅可以写变量还可以写简单的表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> <!--创建vue时挂载的元素 -->
{{message}} <!-- 在页面中显示hailo -->
{{movies}} <!-- 显示['haiwang', 'xinjichuanyue','盗梦空间'] -->
{{movies + message}}
</div>
//前期创建vue需要引入的vue.js(这里引入的路径是我的文件夹的路径)，可以在官网下载
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hailo',
movies:['haiwang', 'xinjichuanyue','盗梦空间']
}
})
</script>
</body>
</html>
参考文献
