vue 颠覆式的开发方式

解疑

  1. 为什么要学习vue？

    1. 降低项目的复杂度
    2. 就业需要

  2. vue难不难？

    特别简单

  3. 相比于React，vue有什么优势？

    前端三大框架：Angular、React、Vue

    Vue的优势：

    1） 学习成本低

    2） Vue已经自动对执行效率进行了优化，初学者完全不用考虑效率问题

  4. vue的特点

    1. 渐进式：vue的侵入性很少，可以与很多其他前端技术联用
    2. 组件化
    3. 响应式：数据响应式，vue会监控数据的变化，当数据发生变化时，自动重新渲染页面

vue的核心功能

关于创建vue工程

  • 直接在页面上引用vue.js
  • 使用脚手架(vue-cli)搭建工程，需要的前置知识（nodejs、webpack、sass、less、css-module、命令行开发）
  1. vue实例: 通过new Vue(配置对象)得到的对象

当创建vue实例的时候，vue会将下面的配置成员提升到vue实例中：

  • data配置: 为了实现响应式
  • methods配置：为了在模板中方便使用

由于有提升的存在，为了防止命名冲突，vue会将自身的成员名称前加上 $ 或 _

  1. 模板

    1. 插值：在模板的元素内部使用{{js表达式}}
    2. 指令：通常作为元素的属性存在，名称上以 v- 开头
      1. v-for：用于循环生成元素
      2. v-on: 用户注册事件，语法糖：@
      3. v-if: 用于判断该元素是否生成，可以和v-else联用，或者和v-else-if联用
      4. v-show: 用于判断该元素是否显示
      5. v-bind: 用于绑定属性，语法糖：:
      6. v-model： 语法糖，用于实现双向绑定，实际上，是自动绑定了value属性值，和注册了input事件
    3. 模板的配置：
      1. 页面中直接书写
      2. 在tempalte配置中书写（常见）
      3. 在render中手动用函数创建，render函数的参数是一个创建虚拟DOM对象的方法，为什么需要虚拟dom？因为真实的dom操作特别慢。

  2. 配置对象

    1. template: 字符串，配置模板
    2. el：配置控制的元素，css选择器
    3. data: 管理的数据，该数据是响应式
    4. methods: 配置方法，方法中的this指向vue实例，不能使用箭头函数，会干扰vue绑定this

  3. 挂载的配置

    1. 通过el进行配置
    2. 使用vue实例中的$mount函数进行配置

例子：商品与库存简化管理系统

效果图如下：

代码：

  • .html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="app"></div>

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

    <script src="./index.js"></script>

</body>

</html>
  • .js
//使用vue实现效果

//template ，要展示的东西

const template = `

<div>

    <h1>{{title}}</h1>

    <div>

        名称：<input type="text" v-model="newProducts.name">

        库存：<input type="number" min="0" v-model.number="newProducts.stock">

        <button @click="addProduct()">添加</button>

    </div>

    <ul class="list">

        <li v-for="(item, index) in products">

           <span>{{item.name}}</span>

           <button @click="changeStock(item, item.stock-1)">-</button>

           <span v-show="item.stock>0" class="stock">{{item.stock}}</span>

           <span v-show="item.stock==0" class="soldout">售罄</span>

           <button @click="changeStock(item, item.stock+1)">+</button>

           <input type="number" min="0" v-model="item.stock" >

           <button @click= remove(index) class="delete">删除</button>

        </li>

    </ul>

</div>

`

//配置对象 config

const config = {

    template,

    //el: "#app",

    data:{

        title: "商品和库存管理简化系统",

        products:[

            {name: "huawei P30", stock: 10},

            {name: "xiaommi 4",stock: 6},

            {name: "iphone", stock:12}

        ], //商品数组

        newProducts:{name:"" ,stock:0}

    },

    methods:{

        addProduct(){

            this.products.push(this.newProducts);

            this.newProducts = {

                name: "",

                stock: 0

            }

        },

        changeStock(prod, newStock){

            if(newStock < 0){

                newStock = 0;

            }

            prod.stock = newStock;

        },//改变库存

        remove(index){

             this.products.splice(index,1);

        }

    }

}

//创建一个vue实例

const app = new Vue(config)

app.$mount("#app"); //与el配置的作用一样

前文补充

  • 关于渐进式

  • 关于computed

    计算属性，其中的配置会提升到vue实例中，因此，在模板中可以直接当作属性使用，使用时，实际上调用的是对应的方法。

    通常，计算属性用户通过data或其他计算属性得到的数据。

    与方法的区别：

    1）vue会检查计算属性的依赖，当依赖没有发生变化时，vue会直接使用之前缓存的结果，而不会重新计算

    2）计算属性的读取函数，不可以有参数

    3) 计算属性可以配置get和set，分别用于读取时和设置时

    例子：

    .html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

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

    <script src="./index.js"></script>

</body>

</html>

.js

//实现config中属性computed的效果

const template = `

<div>

     <h1>

         姓：{{firstName}}, 名：{{lastName}}, 全名1：{{getFullName()}},

         全名2： {{fullName}}

         <span >{{n}}</span>

         <button @click="n++">加</button>

     </h1>

     <p>

         全名：<input type="text" v-model="fullName">

     </p>

</div>

`;

const config = {

    template,

    el: "#app",

    data:{

          firstName: "ZenleTim",

          lastName: "faa",

          n: 0

    },

    computed:{

        fullName:{

            get(){

                console.log("属性重新计算了")

                return this.firstName + ' ' + this.lastName;

            },

            set(newVal){

                console.log(newVal);

                this.firstName = newVal[0];

                this.lastName = newVal.substr(1);

            }

        }

    },

    methods:{

       getFullName(){

           console.log("方法调用了！！！！");

           return this.firstName + ' ' + this.lastName;

       }

    }

};

var app = new Vue(config);

  • 关于v-html指令

    vue为了安全，会将元素内部的插值进行实体编码

  • 关于ES6模块化

    面对大型项目，传统开发的问题：

    1）如何管理错综复杂的代码

    2）如何处理全局变量污染的问题

    3）如何管理复杂的依赖关系

    实现模块化的方式：CommonJS、AMD、CMD、ES6

    ES6模块化：

    • 模块中的所有变量，全部是布局，只能在模块内部使用
    • 模块导出：export default 导出的数据
    • 模块导入(在所有代码之前导入)：import 变量名 from "模块路径"

vue学习笔记一的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  4. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  5. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  6. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  7. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  8. AntDesign vue学习笔记（七）Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  9. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  10. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

随机推荐

  1. 简单配置iOS的通用链接，迅速解决“universal link 校验不通过”问题！

    对于需要使用微信支付等功能的APP来说,对接微信提供的openSDK是不可缺少的一环.随着苹果iOS 13系统版本的安全升级,为此openSDK在1.8.6版本进行了适配.1.8.6之后的openSD ...

  2. phpredis 扩展之操作 Redis，记下来记下来！

    phpredis 是 redis 的 php 的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系很有用 $redis = new Redis(); $redis->connect ...

  3. URLDecoder异常解决方法

    URLDecoder对参数进行解码时候,代码如: URLDecoder.decode(param,"utf-8"); 有时候会出现类似如下的错误: URLDecoder异常Ille ...

  4. java数组与数组异常

    一 数组的定义 1.第一种定义方法: 格式: 数据类型[] 数组名=new 数据类型[数组长度] 2.第二种定义方法: 格式: 类型[] 数组名 = new 类型[]{元素,元素,.....} 3.第 ...

  5. C#LeetCode刷题之#874-模拟行走机器人​​​​​​​（Walking Robot Simulation）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4038 访问. 机器人在一个无限大小的网格上行走,从点 (0, 0 ...

  6. C#LeetCode刷题之#849-到最近的人的最大距离（Maximize Distance to Closest Person）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3754 访问. 在一排座位( seats)中,1 代表有人坐在座位 ...

  7. 洛谷P1028.数的计算(动态规划)

    题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先输入一个自然数n(n≤1000),然后对此自然数按照如下方法进行处理: 1.不作任何处理; 2.在它的左边加上一个自然数,但该自然 ...

  8. 图的DFS和BFS（邻接表）

    用C++实现图的DFS和BFS(邻接表) 概述   图的储存方式有邻接矩阵和邻接表储存两种.由于邻接表的实现需要用到抽象数据结构里的链表,故稍微麻烦一些.C++自带的STL可以方便的实现List,使算 ...

  9. 聊聊MySQL常用的4种主从复制架构

    目录 一主多从复制架构 多级复制架构 双主(Dual Master)复制架构 多源(Multi-Source)复制架构 如何优化主从延迟问题? 复制的4中常见架构有一主多从复制架构.多级复制架构.双主 ...

  10. 求正整数2和n之间的完全数

    [题目描述] 求正整数22和nn之间的完全数(一行一个数). 完全数:因子之和等于它本身的自然数,如6=1+2+36=1+2+3 [输入] 输入n(n≤5000)n(n≤5000). [输出] 一行一 ...