search

MandyJin / MandyJin.github.io

靳莹莹的博客
https://mandyjin.github.io/
1 stars 0 forks source link

Vue初体验 #1

Open MandyJin opened 6 years ago

MandyJin commented 6 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="container">

            <table class="table table-hover table-bordered">
                <caption style="caption-side: top" class="h2 text-center text-danger">购物车</caption>
                <tr>
                    <th>全选  <input type="checkbox" v-model="all" @change="isAll"></th>
                    <td>商品</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in products">
                    <td><input type="checkbox" v-model="item.isSelected" @change="checkOne"></td>
                    <td><img :src="item.productCover" alt="">{{item.productName}}</td>
                    <td>{{item.productPrice}}</td>
                    <td><input type="number" v-model="item.productCount" min="1"></td>
                    <td>{{item.productCount*item.productPrice|toFixed(2)}}</td>
                    <td><button class="btn btn-danger" @click="remove(index)">删除</button></td>
                </tr>
                <tr>
                    <td colspan="6">总价格：{{"￥"+sum()}}</td>
                </tr>
            </table>

    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        created(){
            this.getData();
        },
        filters:{
            toFixed(val,n){
                return "￥"+val.toFixed(2)
            }
        },
        data: {
            products:[],
            all:false,
        },
        methods: {
            getData(){
                //获取数据
                axios.get("carts.json").then((res)=>{
                    this.products=res.data;
                    console.log(this.products);
                },()=>{})
                this.checkOne()
            },
            isAll(){
                //让products中的每一项isSelected的值跟着all的值变化
                this.products.forEach((item)=>{
                    item.isSelected=this.all
                })
            },
            checkOne(){
                //all的值是根据每一项的isSelected值决定的，全为true，all就是true，只要由一个是false，all就是false
                this.all=this.products.every(item=>item.isSelected)
            },
            sum(){
                return this.products.reduce((pre,cur)=>{
                    //如果没有选中，就不加上当前的
                    if(!cur.isSelected) return pre;
                    return pre+cur.productCount*cur.productPrice
                },0)
            },
            remove(i){
                this.products.splice(i,1)
            }
        }
    })
</script>
</body>
</html>
MandyJin commented 6 years ago

双向数据绑定

双向绑定概念其实很简单，就是视图(View)的变化能实时让数据模型(Model)发生变化，而数据的变化也能实时更新到视图层

MandyJin commented 6 years ago

双向数据绑定的简单实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
</head>
<body>
<input id="input" type="text" value="">
<p id="p"></p>
</body>
</html>
<script type="text/javascript">
    let obj={};
    let temp={};

    //在console更改obj.name  来监听并更改视图
    Object.defineProperty(obj,"name",{
        get(){
            //只要获取这个对象obj的属性name就会触发这个函数,并且会拦截
            //获取 obj.name
            //这个函数返回什么 获取的值就是什么
            return temp["name"]  ;
        },
        set(val){
            //只要是给obj.name设置值就会触发这函数,并且拦截
            //默认给set传一个参数就是设置的值
            temp.name=val;
            input.value=val;
            p.innerHTML=val;
        }
    });

    //Module变化通知View,View再更新Module
    input.oninput=function () {
        //当正在输入的时候触发的事件;
        obj.name=this.value;
        p.innerHTML=this.value
    };
</script>
MandyJin commented 6 years ago

双向数据绑定-Proxy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
</head>
<body>
<input type="text" id="input">
<p id="p1">
</p>
</body>
</html>
<script type="text/javascript">
    //es6 中的一个构造函数 Proxy
    let temp={name:"你好"};
    let p=new Proxy(temp,{
        get(temp,key,p){
            //默认传3个参数
            //temp:代理的原对象
            //key:获取属性
            //p:当前实例
            //通过 p.属性/p["属性"] 获取值的时候被他拦截
            return temp[key]
        },
        set(temp,key,val,p){
            //四个参数
            //val 设置的属性值
            //通过 p.属性/p["属性"]=值的时候 被他拦截
            temp[key]=val;
            input.value=val;
        }
    });
    input.addEventListener("input",function () {
        p.name=this.value;
        p1.innerHTML=p.name;
    });

</script>
MandyJin commented 6 years ago

v-if v-show 都是根据里面的数据(变成布尔值)的值控制显示和隐藏的 v-if 控制的是DOM v-show 控制的是样式 display:none

如果频繁的切换显示隐藏使用v-show性能好点

vue中自定义的一个标签表示组件,可以起包裹作用 v-if操作DOM元素,直接将标签干掉 v-show操作样式对于这个template标签不起作用