本篇文章是介绍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>
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐