本篇文章是介绍vue的入门知识，记录了作者学习过程中的一些收获和遇到的坑，后续会更新，敬请期待。。。

1、vue官方网站：

https://cn.vuejs.org

2、什么是vue

vue是一个前端开发框架，用于降低UI复杂度
UI：user interface用户界面

3、vue的特点

渐进式
响应式
组件化

4、体验vue代码

开发工具：visual studio code
常用插件
Auto Rebane Tag:能够自动更改结束标签
Live Server:自动搭建本地服务器
Prettier -Code formatter: 代码美化
Vetur:但vue组件格式支持
vscode-icons:美化文件图标

5、两种学习的途径

6、使用工具及插件

Visual Studio

坑一：run code 乱码解决方案：安装node.js，重启。

7、代码

<div id="app">
    <h1>
        {{title}}
    </h1>
    <p>
        名称：<input type="text" v-model="newProduct.name">
        库存：<input type="number" v-model="newProduct.stock" type="number">
        <button @click="addProduct">添加</button>
    </p>
    <ul>
        <li v-for="(item,i) in products" :key="1">
            {{item.name}}
            库存：{{item.stock}}
        </li>
    </ul>
</div>
<script src="vue.min.js"></script>
<script>
    var vm = new Vue({
        // 配置
        el:"#app", //配置模板
        data: {
            // 配置数据
            title: "商品管理",
            newProduct:{
                name:"默认名称",
                stock:10,
            },
            products: [
                {name:"iphone", stock: 10},
                {name:"xioami", stock: 20},
                {name:"huawei", stock: 0},
            ],
        },
        methods:{
            addProduct(){
                // console.log("addProduct")
                this.products.push({
                    name: this.newProduct.name,
                    stock: this.newProduct.stock
                })
            }
        }
    });
   // vm.$mount("#app");
</script>

8、ES6知识补充

// 1、速写属性
var name = "abc";
var age = 13;

var obj = {
    name,
    age,
};
console.log(obj);
// 2、速写方法
var obj = {
    name: "张三",
    sayHello() {
        console.log(this.name);
    },
};
obj.sayHello();
// 3、箭头函数
var obj = {
    name: "程程",
    sayHello: function (){
        // setInterval(function () {
            //箭头函数，一定绑定obj。
            setInterval( () => {
            console.log(this.name);
        },1000);
    },
};
obj.sayHello();


var func = function (a,b) {
    return a + b;
}
// 一个返回语句可以省略大括号
var func = (a,b) => a + b; 
console.log(func(3,4));

//一个参数可以省略小括号
var func = a => a*2;
console.log(func(8));
// 4、模板字符串
var name = "成哥";
var age = 18;
var str = `姓名：${name},年龄：${age}`;
// 模板字符串可以换行，以前默认""不能换行，模板字符串是反单引号。
//相当于  
// str = "姓名：" + name + ",年龄：" + age;
console.log(str);

9、vue实例（干货、细节！！！）

9.1 结构

通过new Vue({…})创建的对象
配置对象中的部分内容会被提取到vue实例中：
data
props
methods
computed

9.2 挂载

让vue实例控制网页中某个区域的过程，称之为挂载。
挂载的方式：
1、通过el:"css选择器"进行配置
2、通过vue实例.$mount(“css选择器”)进行配置

9.3 模板

被vue实例控制的页面片段
1、模板的作用是什么？

为了提高渲染效率，vue会把模板编译成为虚拟DOM树（VNode），然后再生成真实的DOM

2、模板书写到哪？

1、在挂载的元素内部直接书写
2、在template配置中书写
3、在render配置中用函数创建

3、模板中写什么？

1、静态内容
2、插值：{{JS表达式}}，mustache语法
3、指令

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

<!-- <button @click="addProduct">添加</button> -->
<button v-on:click="addProduct">添加</button>
-------------------------------------------------------
<!-- <a v-bind:href="link">{{text}}</a> -->
<a :href="link">{{text}}</a>
-------------------------------------------------------
:value="text"
@input="text=$event.target.value"
相当于v-model="text"   语法糖简化

4、模板中的代码环境

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

9.4 配置对象

1、data:数据
2、template:字符串，配置模板
3、el:配置挂载的区域
4、methods:配置方法
5、computed:配置计算属性
计算属性和方法的区别：

1. 计算属性使用时，是当成属性使用，而方法是需要调用的
2. 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算。
3. 计算属性可以当成属性赋值

//	计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算。
<div id="app">
    <div>
        姓：{{firstName}}
        名：{{lastName}}
        姓名：{{fullName}}
    </div>
    <p>
        全名：{{fullName}}
    </p>
    <p>
        全名：{{fullName}}
    </p>
    <p>
        全名：{{fullName}}
    </p>
    <p>
        全名：{{fullName}}
    </p>
    <p>
        全名：{{getfullName()}}
    </p>
    <p>
        全名：{{getfullName()}}
    </p>
    <p>
        全名：{{getfullName()}}
    </p>
    <p>
        全名：{{getfullName()}}
    </p>
</div>
<script src="vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            firstName: "袁",
            lastName: "进"
        },
        // 计算属性
        computed: {
            fullName(){
                console.log("计算属性fullName")
                return this.firstName + this.lastName;
            }
        },
        // 调用方法执行时用fullName()
        methods: {
            getfullName(){
                console.log("调用方法")
                return this.firstName + this.lastName;
            }
        }
    });
</script>
==============================================================
computed: {
    fullName:{
        // console.log("计算属性fullName")
        // return this.firstName + this.lastName;
        get() {
            console.log("计算属性fullName");
            return this.firstName + this.lastName;
        },
        set(val) {
            console.log("计算属性赋值了")
            this.firstName = val[0];
            this.lastName = val.substr(1);
        }
    }
},
===================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <title>Document</title>
</head>
<body>
<!-- <div id="app">
    <p>{{ message }}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"hello vue.js!"
        }
    })
</script> -->

<div id="app">
    <h1>
        {{title}}
    </h1>
    <p>
        名称：<input type="text" v-model="newProduct.name">
        库存：<input type="number" v-model="newProduct.stock" type="number">
        <!-- <button @click="addProduct">添加</button> -->
        <button v-on:click="addProduct">添加</button>
    </p>
    <h2 v-if="products.length===0">没有商品</h2>
    <ul v-else>
        <li v-for="(item,i) in products" :key="1">
            {{item.name}}
            库存：{{item.stock}}
            <button @click="handleDelete(i)">删除</button>
        </li>
    </ul>
    <p>
        商品总数：{{products.length}}, 总库存:{{totolStock}}
    </p>
</div>
<script src="vue.min.js"></script>
<script>
    var vm = new Vue({
        // 配置
        el:"#app", //配置模板
        // template:`
        // <div id="app">
        //     <h1>
        //         {{title}}
        //     </h1>
        //     <p>
        //         名称：<input type="text" v-model="newProduct.name">
        //         库存：<input type="number" v-model="newProduct.stock" type="number">
        //         <button @click="addProduct">添加</button>
        //     </p>
        //     <ul>
        //         <li v-for="(item,i) in products" :key="1">
        //             {{item.name}}
        //             库存：{{item.stock}}
        //         </li>
        //     </ul>
        // </div>`,
        // render(createElement) {
        //     return createElement("h1",["abc"]);
        // },
        data: {
            // 配置数据
            title: "商品管理",
            newProduct:{
                name:"默认名称",
                stock:10,
            },
            products: [
                {name:"iphone", stock: 10},
                {name:"xioami", stock: 20},
                {name:"huawei", stock: 0},
            ],
        },
        computed: {
            totolStock(){
                // var sum = 0;
                // for (var i = 0; i < this.products.length;i++) {
                //     sum += +this.products[i].stock;
                // }
                // return sum;

                // var sum = 0;
                // for (p of this.products) {
                //     sum += +p.stock;
                // }
                // return sum;

                return this.products.reduce((a,b)=>{
                    return a + (+b.stock);
                },0)
            },
        },
        methods:{
            addProduct(){
                // console.log("addProduct")
                this.products.push({
                    name: this.newProduct.name,
                    stock: this.newProduct.stock
                });
            },
            handleDelete(i){
                this.products.splice(i,1);
            }
        }
    });
    // vm.$mount("#app");

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