vue学习笔记一

vue 颠覆式的开发方式

解疑

为什么要学习vue？
1. 降低项目的复杂度
2. 就业需要
vue难不难？
特别简单
相比于React，vue有什么优势？
前端三大框架：Angular、React、Vue

Vue的优势：
1）学习成本低
2） Vue已经自动对执行效率进行了优化，初学者完全不用考虑效率问题
vue的特点
1. 渐进式：vue的侵入性很少，可以与很多其他前端技术联用
2. 组件化
3. 响应式：数据响应式，vue会监控数据的变化，当数据发生变化时，自动重新渲染页面

vue的核心功能

关于创建vue工程

直接在页面上引用vue.js
使用脚手架(vue-cli)搭建工程，需要的前置知识（nodejs、webpack、sass、less、css-module、命令行开发）

vue实例: 通过new Vue(配置对象)得到的对象

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

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

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

模板
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操作特别慢。
配置对象
1. template: 字符串，配置模板
2. el：配置控制的元素，css选择器
3. data: 管理的数据，该数据是响应式
4. methods: 配置方法，方法中的this指向vue实例，不能使用箭头函数，会干扰vue绑定this
挂载的配置
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>

//使用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 "模块路径"

posted @ 2020-09-04 14:50 ZenlenTim 阅读(143) 评论(0) 收藏举报

刷新页面返回顶部

vue学习笔记一

vue 颠覆式的开发方式

解疑

vue的核心功能

前文补充

公告