一切从Hello World说起！手把手教你Vue开发环境搭建！- 学习vue第一站深入浅出（二）

下载IDE集成开发环境

推荐下载：HBuilder X

从Hello World开始感受

点击下载：vue.js

下载后，在项目中，新建js文件夹，复制到js文件夹处

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个VUE示例Hello World</title>
	</head>
	<body>
		<div id="app">
			<input type="text" name="Myname" id="Myname" value="" placeholder="少侠尊姓大名" v-model="name"/>
			<h1>久仰久仰，{{name}}少侠</h1>
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					name:''
				}
			})
		</script>
	</body>
</html>

运行结果：

详细讲解：关于Vue实例少侠必须知道的知识

创建一个Vue实例，和所有面向对象的语言一样，通过构造函数Vue来实例化，来创建app对象：

var app = new Vue({
            //配置参数
			})

在配置参数中，必选项是：el

el作用是：指定一个页面中已存在的Dom元素绑定Vue实例，可以是像上面例子中的CSS选择器，也可以是HTMLElement选择器，如：

<div id="app">
	<input type="text" name="Myname" id="Myname" value="" placeholder="少侠尊姓大名" v-model="name"/>
	<h1>久仰久仰，{{name}}少侠!</h1>
</div>
	<script src="js/vue.min.js"></script>
	<script>
		 var app = new Vue({
				el:document.getElementById("app"),  //或者用CSS选择器 '#app'
				data:{
					name:''
				}	
		 })
	</script>

如果想取到el指定的元素值，可以用： app.$el

注意：在input标签中，有一个数据监控表达式：v-model="name" 它所赋予的值对应data数据中的name字段，这样Vue的双向数据绑定才会成功！

所有在视图中用到的数据，都要在data内预先初始化，将业务数据集中起来，不至于后期分散到业务逻辑中，浪费维护时间。

在业务逻辑中对于data的访问与修改

el除了指向一个元素外，还可以指向一个变量，默认建立了双向绑定：

        <script>
			var temData = {
				name:"王大锤"
			}
			
			var app = new Vue({
				el:document.getElementById("app"),
				data:temData
			})
			//访问data数据，输出:"王大锤"
			console.log(app.name);
			//修改属性值,原数据值也随着变化，输出:"郝小胖"
			app.name = "郝小胖";
			console.log(temData.name);
			//修改原数据,Vue属性也会修改，输出:"东方不败没JJ"
			temData.name = "东方不败没JJ";
			console.log(app.name);
		</script>

请自己动手，敲一遍这个小例子，体会一下data中的双向绑定。

Vue实例的生命周期回调方法

created：实例初始化完成后回调，此时仅仅完成了数据data的初始化，但并未绑定view，$el取值不可用！
mounted：el指定到实例上后回调，业务逻辑在这里开始处理。
beforeDestroy：实例销毁之前回调，主要用于解绑、释放、销毁数据

            var app = new Vue({
				el:document.getElementById("app"),
				data:temData,
				created:function(){
					console.log(this.name); //访问data数据，输出:"王大锤"
				},
				mounted:function(){
					console.log(this.$el);	//访问el对象，输出:<div id="app"></div>
				}
			})

恭喜，您已经入门Vue，掌握了一些基础知识，下面让我们来学会灵活运用吧！您可以：

Vue教程-过滤器filter知识入门- 学习vue第一站深入浅出（三）

郝小胖的独门秘笈

发布了28 篇原创文章 · 获赞 12 · 访问量 1万+

私信关注