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配置的作用一样

posted @ 2020-08-17 17:57 ZenlenTim 阅读(53) 评论(0) 收藏举报

刷新页面返回顶部

vue学习笔记一

vue 颠覆式的开发方式

解疑

vue的核心功能

公告