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绑定

//传统写法
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标签中，写如下代码：

<div id="app">
    <h1>{{title}}</h1>
</div>
<script>
    //创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            title:"商品管理"
        }
    })
</script>

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

三、Vue实例

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

data
props
methods
computed

四、挂载

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

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

五、模板

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

<div id="app">
    <h1>{{title}}</h1>
</div>

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

3、模板书写到哪?

在挂载的元素内部直接书写（上面的案例）
在template配置中书写
在render配置中用函数创建（了解即可）

1）template演示如下代码：

<div id="app"></div>
<script>
    //创建Vue实例
    var app = new Vue({
        template:`<h1>{{title}}</h1>`,
        data: {
            title:"商品管理"
        }
    });
    app.$mount("#app");
</script>

2）render演示如下代码：

<div id="app"></div>
<script>
    //创建Vue实例
    var app = new Vue({
        //render参数名称随意
        render(newElement){
            return newElement("h1",this.title)
        },
        data: {
            title:"商品管理"
        }
    });
    app.$mount("#app");
</script>

以上两种方法我们发现，生成的真实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、配置对象说明

data:数据
template: 字符串，配置模板（注意配置的模板只能有一个根元素）
el:配置挂载的区域
methods :配置方法
computed: 配置计算属性

六、Vue实例的生命周期

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

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

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

<div id="app">
    <h1>{{num}}</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        // `this` 指向 vue 实例
        created() {
            alert(this.num);
            this.num++;
        }
    });
</script>

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

注意：不要在选项 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 之类的错误。