vue初学— —HelloWord

vue框架的搭建和配置，这里不说

当我们需要利用vue框架创建一个项目的时候

创建项目：

在当前项目文件夹下 运行命令行工具

当前文件夹下 shift+右键 “在此处打开命令窗口”

输入npm install vue

安装完成后出现node_modules文件夹和json

创建hellow.html项目

步骤：

Vue数据、视图双向绑定

1、引入vue

• CDN网址引入（项目将需要联网）
• 手动下载到电脑（项目不用联网）

2、在脚本层，定义好Vue实例化构造函数或类（双向绑定的中介）

• 定义“视图”：对象参数输入该实例（视图数据）要作用区的域
• 定义“参数”：对象参数输入该实例（视图数据）要使用的数据

3、在视图层，定义好需要使用数据双向绑定的引用，{{ xxx }}

一、引入vue

<script src="./node_modules/vue/dist/vue.js"></script>

二、脚本层，编写双向绑定的视图数据

<script>
	//Vue是内置构造函数，实例
	//初始化Vue实例
	//构造函数和类使用new初始化
	//new Vue()  括号写对象 作为多种参数
	let vm = new Vue({
		el:'#app',	//参数一：本实例作用于哪个视图区域（标签） 用css的选择器
		data:{		//参数二：本实例使用到的数据，对象类型。数据会被本变量vm代理
			msg:'HelloWord'    //data对象里的数据 本来是data.msg获取，但是vm代理了，则可vm.msg获取
		}
	})
</script>

定义“视图”：对象参数输入该实例（视图数据）要作用区的域  el:' css选择器 '

定义“参数”：对象参数输入该实例（视图数据）要使用的数据  data:{ msg:'' , ... }

三、视图层

	<div id="app">{{msg}}</div>		

这里写 {{vm.msg}} 会报错，当前区域（标签）已经与vm绑定了，不可重复写对象名

即这里用的任何变量，对象参数都是vm内的参数或者代理对象(data)的参数

{{}} 内可写“值”“赋值”“三元判断”

结果：

特点：

在浏览器直接输入数据，就可以控制页面，不需要提交和异步

这里是简单页面，在浏览器控制台获取对象属性改变值，得页面改变  vm.msg="我改变了数据，视图也被改了"

如有建议和疑问可联系 
QQ：1017386624 

邮箱：1017386624@qq.com