Vue入门 部署、数据与方法、生命周期

Vue入门第一课

从最简单的开始，Dclode Vue.js教程，个人感觉简单易懂。

1、 安装与部署

刚开始学习，选择最简单的方式，直接引入CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、创建第一个Vue应用，使用数据与方法

• html部分

<!--创建app节点-->
<div id="app">
	<div class="huan">
		{{huan}}
	</div>
	<div>
		{{demo}}
	</div>
	<div class="liu">
		{{liu}}
	</div>
</div>

• js部分

<script type="text/javascript">
	//实例化Vue，请注意大小写
	var vm = new Vue({
	//元素选择器绑定
	el:'#app',
	// 数据
	data:{
		huan:'你好，欢！',
		liu:'你好，刘！',
		demo:'手牵手'
		}
	});
	//监听demo变量
	vm.$watch('demo',function(n,o){
		console.log(o);//原来的demo，‘手牵手’
		console.log(n);//现在的demo，‘背靠背’
	})
	//动态改变，3秒后变量demo改变
	setTimeout(function() {
		vm.$data.demo = '背靠背';
	},3000);
</script>

• 运行结果
  
  关于 $data 的解释，网站有详细解释和实例

实例创建之后，可以通过 vm.$data 访问原始数据对象。

Vue 实例也代理了 data 对象上所有的属性，

因此访问 vm.a 等价于访问 vm.$data.a。

3、生命周期

在实际应用中会经常使用生命周期函数

	<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					demo: '改变前'
				},
				beforeCreate: function() {
					console.log('Vue实例化之后，页面创建之前');
				},
				created: function() {
					console.log('Vue实例完成数据观测（data obsever），属性和方法的运算，watch/event事件回调');
				},
				beforeMount: function() {
					console.log('挂载之前，相关渲染数据首次被调用');
				},
				mounted: function() {
					console.log('element被新创建的vm.$el替换，挂载成功');
				},
				beforeUpdate: function() {
					console.log('数据更新之前调用');
				},
				updated: function() {
					console.log('数据更新之后');
				}
			});
			//$watch在实例化时调用
			vm.$watch('demo', function(n, o) {
				console.log(o);
				console.log(n);
			});
			vm.demo = '改变后';
		</script>

运行结果

– 关于学习的一点想法 –

• 从头开始学，安装、工具、组件、相关术语等等，这样基础会比较扎实
• 根据自己的需要简单的学习，例如想做一个轮播图效果，那么Vue 就是一个简单的工具