Vue学习日记第一章-认识vue

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语法就是双大括号不仅可以写变量还可以写简单的表达式

    
    


 
    {{message}}   
    {{movies}}  
    {{movies + message}} 

//前期创建vue需要引入的vue.js(这里引入的路径是我的文件夹的路径)，可以在官网下载

同步学习代码可以在我的guthub项目中查看

参考文献

MVVM的介绍以及图片来自here