Vue系列入门教程（2）——第一个Vue实例

一、ES6知识补充

1、速写属性

var name = "xiaoming";
var age = "20";
//对象,属性:属性值
var obj = {
	name:name,
	age:age
}
//可以简写为如下,与上面效果一样
var obj2 = {
	name,
	age
}
console.log(obj);
console.log(obj2);

2、速写方法

//传统写法
var obj = {
	name: "xiaoming",
	sayName: function(){
		console.log(this.name);
	}
}
obj.sayName();
//可以简写为如下:
var obj2 = {
	name: "xiaoming",
	sayName(){
		console.log(this.name);
	}
}
obj2.sayName();

3、箭头函数
1)this绑定

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

//传统写法
var obj = {
	name: "xiaozhang",
	sayName: function(){
		setInterval(function(){
			console.log(this.name);
		},1000);
	}
}
//调用会发现每秒钟打印的都是undefined,this访问不到name
obj.sayName();
//箭头函写法
var obj2 = {
	name: "xiaozhang",
	sayName: function(){
		setInterval(()=>{
			console.log(this.name);
		},1000);
	}
}
//调用会发现this可以访问到name,这也是箭头函数的好处
obj2.sayName();

2）简化方法定义

//传统写法
var add = function(a,b){
	return a+b;
}
//箭头函数
var add = (a,b) => {
	return a+b;
}
//如果只有一条返回语句,可以再简化
var add = (a,b) => a+b;
//如果只有一个参数,可再简化
var db = a => a*2;

4、模板字符串

//模板字符串,使用反引号
var str = `hello java`;
//可以随意换行
var str2 = `hello
			java`;
//可以使用${JS表达式}获取数据，直接拼接字符串
var name = "panziye";
var age = 20;
var str3 = `我的姓名${name},我的年龄${age}`;
console.log(str);
console.log(str2);
console.log(str3);

二、开发第一个Vue实例

1、打开HbuildX，选择文件->新建->项目->普通项目在弹窗中填写项目名称和项目保存目录，选择Vue项目（普通模式）

2、我们可以看下创建好的项目目录结构和内容，发现index.html中已经帮我们引入了对应的vue文件，当然你也可以自己去官网下载你想要的版本拿过来用。

3、我们在index.html的body标签中，写如下代码：


	{{title}}

4、选择预览安装内置浏览器可以查看（也可以选择菜单运行->运行到浏览器->chrome），发现数据显示到了对应的位置。

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

三、Vue实例

1、Vue实例创建语法：new Vue({....})
2、配置对象中的部分内容会被提取到实例中：
[list]data
props
methods
computed[/list]

四、挂载

1、让Vue实例控制网页中某个区域的过程，称之为挂载

2、挂载的方式有两种：
1）通过el:"css选择器"进行配置
2）通过vue实例.$mount("css选择器")进行配置

五、模板

1、被vue实例控制的页面片段称之为模板，比如上述案例的模板就是:


	{{title}}

2、模板的作用是什么?
为了提高渲染效率，vue会把模板编译成为虚拟DOM树(VNode) ，然后再对比更新生成真实的DOM

3、模板书写到哪?
[list]在挂载的元素内部直接书写（上面的案例）
在template配置中书写
在render配置中用函数创建（了解即可）[/list]
1）template演示如下代码：

2）render演示如下代码：

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

立即访问

以上两种方法我们发现，生成的真实DOM中原先的<div id="app"></div>被替换了。

4、模板中写什么?
1）静态内容
2）插值: {{JS表达式}}
3）常用指令（后面再演示）：

1.v-html:绑定元素的 innerHTML
2.v-text:绑定元素的 innerText
3. v-bind:属性名:绑定属性，可以简化为:属性名
4. v-on:事件名: 绑定事件，可以简化为@事件名
5.v-if: 判断元素是否需要渲染
6.v-else-if: 与v-if合用
7.v-else: 与v-if合用
8. v-show: 判断元素是否应该显示
9.v-for: 用于循环生成元素
10. v-bind:key: 用于帮助在重新渲染时元素的比对，通常和v- for配合使用，以提高渲染效率
11.v-model: 语法糖，用于实现双向绑定，实际上，是自动绑定了value属性值，和注册了input事件

5、模板中的代码环境
模板中所有的JS代码，它的环境均为vue实例，例如{{title}},得到的结果相当于是vue实例. title

6、配置对象说明
[list]data:数据
template: 字符串，配置模板（注意配置的模板只能有一个根元素）
el:配置挂载的区域
methods :配置方法
computed: 配置计算属性[/list]

六、Vue实例的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
Vue实例的生命周期图示（重点关注红色部分）：

钩子函数说明（重点关注2.0）：

比如 created 钩子可以用来在一个实例被创建之后执行代码：


	{{num}}

测试时你会发现DOM还没生成，弹窗就出来了，数据为0，确定后，数据显示，值为1。

[v_error]注意：不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。[/v_error]