vue基础学习

学习内容

目录

vuejs基础使用

 v-model 双向数据绑定

v-once 一次性插值

v-bind 基本元素绑定 

methods   computed  watch

v-on 绑定事件

---

vuejs基础使用

学习使用前先安装vue

npm i vue@版本号

浏览器查看工具devtools

基础语法

<div id="app">
    <p>{{xxx}}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            xxx:"Hi~"
        }
    })
</script>

在{{}}中可以放变量和表达式 

 v-model 双向数据绑定

vue最大的特点双向数据绑定。

    <div id="app">
        <input type="text" v-model="msg">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"10"
            }
        })
    </script>

在浏览器中更改input中的值时，msg的值会改变。改变msg的值时，浏览器的值也会改变，但是并没有刷新整个界面，而是局部刷新。

v-once 一次性插值

一次性插值是在第一次渲染后就不会改变了，即使数据改变显示的内容也不会随之改变。

    <div id="app">
        <input type="text" v-model="msg">
        <!-- 一次性插值 -->
        <p v-once>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"10"
            }
        })
    </script>

v-bind 基本元素绑定 

语法

        v-bind:class='表达式'或:class='表达式'

class的表达式可以为：

        字符串:class='activeClass'

        对象:class='{active:isActive,error:hasDel}'

        数组:class='["active","del"]'注意要加上双引号，不然是获取data中的值

v-bind:style='表达式'或:style='表达式'

:style的表达式一般为对象

        :style="{color:activeColor,fontSize:fontSize+'px'}"注意要加上引号,不然是获取data中的值

注意：对象中的value值 activeColor 和 fontSize 是data中的属性

<style>
    .action {
        color: red;
    }
    .del {
        font-size: 30px;
    }
    .blu {
        color: blue;
    }
</style>

    <div id="app">
        <!-- 绑定图片 -->
        <img :src=url1 alt="">
        <!-- 绑定class -->
        <p :class=class1>红色</p>
        <p :class='{action:isActive,del:hasDel}'>大字</p>
        <p :class='["blu","del"]'>大蓝色</p>
        <!-- 绑定style样式 -->
        <p :style="{color:colorStyle}">style的红色</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                url1:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                class1:"action",
                isActive:false,
                hasDel:true,
                colorStyle:"red"
            }
        })
    </script>

methods   computed  watch

methods 方法，作为函数调用。每次加载都重新执行。

computed 计算属性，属性调用。有缓存功能，只有在相关数据发生变化了才从新执行。

watch 监听器，监听实例中数据的变化。

直接上代码

    <div id="app">
        进价：<input type="text" v-model="bid"><br>
        售价：<input type="text" v-model="price"><br>
        methods利润：<input type="text" v-model="profit1()"><br>
        computed(双向)利润：<input type="text" v-model="profit2"><br>
        watch利润：<input type="text" v-model="profit">
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                bid:50,
                price:100,
                profit:50,
            },
            methods:{
                profit1(){
                    console.log("methods被调用");

                    return (this.price-0)-(this.bid-0)
                }
            },
            computed:{
                profit2:{
                    // 默认执行get，没有set，set需要自己写。
                    get:function(){
                        console.log("computed");
                        return (this.price-0)-(this.bid-0)
                    },
                    set:function(newValue){
                        console.log("computed双向绑定");
                        this.price = (newValue-0) + (this.bid-0)
                    }
                }
            },
            watch:{
                // 监听price，只有price发生改变时，才会执行
                price:function(newValue){
                    this.profit = (newValue-0)-(this.bid-0)
                }
            }
        });
        // 监听的第二种写法
        // vm.$watch('price',function(newValue){})

执行 

 

在控制台输入 vm.profit1()时，可以看出方法每次加载都有执行，而vm.profit2，计算属性没有执行函数，只是输出了值。

 

v-on 绑定事件

语法规范

v-on:事件名称="事件处理函数名"  或者简写

@事件名称="事件处理函数名"

用于监听 DOM 事件

每点击1次，数据就加1

    <div id="app">
        <input type="text" v-model="num">
        <input type="button" value="点击+1" @click="add">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add(){
                    this.num++
                }
            }
        })
    </script>

 练习2

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .lanse {
            background-color: blue;
        }
        .kuan {
            width: 200px;
        }
    </style>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 点击按钮切换成蓝色盒子 -->
    <div id="app">
        <button v-on:click="changeLan=!changeLan">点击切换颜色</button>
        <button v-on:click="changeBig=!changeBig">点击切换大小</button>
        <div :class='{ box : true , lanse : changeLan , kuan : changeBig}'></div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                changeLan:false,
                changeBig:false
            }
        })
    </script>
</body>