Vue全家桶实战01_【从入门到放弃系列】

准备工作

先说一下使用的编程软件，sublime Text，具体怎么安装及配置，我已经写好了一篇博客。欢迎查阅。

Sublime Text 的下载巨慢的问题，安装问题，html页面代码生成问题，代码提示问题全都解决了【最完美的解决方案】

然后，就是找一个路径，比如我的D:\VUE 【新文件夹】

进入cmd模式，在命令行，输入以下两条命令：

然后，使用sublime text打开这个目录。即：【补充：01-vue/02-vue是我自己建的】

插值表达式

第一个Demo

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<div id="app">
		<!-- vue的模板语法：{{}} -->
		<h2>{{ msg }}</h2>
	</div>

	<!-- 引包 -->
	<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
 	<!-- 创建实例化对象 -->
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				msg:'乔治大哥'
			}
		})
	</script>
	
</body>
</html>

运行结果：

添加template:

运行结果：

【即】如果template中定义了内容，那么优先加载template ,如果没有定义内容那么加载的是#app的模板

这个涉及的是生命周期，之前我又写过关于这个问题的博客。vue生命周期详解，不过后续还会进行阐述。可以先点击看看。

进一步添加

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div id="app">
		<!-- vue的模板语法：{{}} -->
		<h2>{{ msg }}</h2>
		<h3>{{1+1}}</h3>
		<h4>{{ isTrue }}</h4>
		<h1>{{ str.split('').reverse().join('') }}</h1>
		<h2>{{ 1>2 ? '真的' : '假的' }}</h2>
		<h3>{{'哈哈哈哈哈'}}</h3>
		<h4>{{ {name:'georgedage'} }}</h4>
	</div>

	<!-- 引包 -->
	<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
 	<!-- 创建实例化对象 -->
	<script type="text/javascript">

		var data ={
				//数据属性，既可以是一个对象，也可以是一个函数
				msg:'乔治大哥',
				isTrue:1==1,
				str:'hello georgedage'
		}


		var vm = new Vue({
			el:'#app',
			data:data,
			template:''
		});
		console.log(vm.$el);
		console.log(vm.$data===data);

		//除了数据属性vue实例还暴露了一 些有用的实例属性和方法。他们都有前缀$


	</script>
	
</body>
</html>

结果展示：