Vue的简单学习笔记

最新推荐文章于 2023-08-04 19:22:03 发布

kxttmx

最新推荐文章于 2023-08-04 19:22:03 发布

阅读量416

点赞数 1

分类专栏： JavaWeb学习笔记（尚硅谷2022版）文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/kuaixiao0217/article/details/124664466

版权

JavaWeb学习笔记（尚硅谷2022版）专栏收录该内容

36 篇文章 6 订阅

订阅专栏

1.1、vue基本语法

1.v-bind

v-bind:value表示绑定value属性，v-bind可以省略，也就是:value
v-bind:value表示单向绑定
{{}}相当于innerText

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
      window.onload = function() {
        var vue = new Vue({
            "el":"#div0",
            data:{
                msg: "hello world!",
                uname:"张三"
            }
        });
      }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span>
        <!--v-bind:value表示绑定value属性，v-bind可以省略，也就是:value-->
        <!--<input type="text" v-bind:value="uname"/>-->
        <input type="text" :value="uname"/>
    </div>
</body>

2.v-model

v-model:value表示双向绑定，:value可以省略
v-bind是通过msg这个变量的值来控制input输入框，现在v-model不仅msg来控制input输入框，反过来，input输入框的内容也会改变msg的值。

<div id="div0">
    <span>{{msg}}</span><br/>
    <!--<input type="text" v-model:value="msg"/>-->
    <input type="text" v-model="msg"/>
</div>

.trim可以去除首尾空格

<div id="div0">
    <span>{{msg}}</span><br/>
    <input type="text" v-model.trim="msg"/>
</div>

3.v-if和v-else

两者之间不可以插入其他结点

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload = function() {
            var vue = new Vue({
                "el":"#div0",
                data:{
                    num: 2
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <input type="text" v-model="num"/>
        <!--如果num为偶数，则显示该颜色，否则显示另一个颜色-->
        <div v-if="num%2==0"style="width:200px;height:200px;background-color: aquamarine;">&nbsp;</div>
        <!--<br/> -->
        <div v-else="num%2==0"style="width:200px;height:200px;background-color: aqua">&nbsp;</div>
    </div>
</body>

4.v-show

v-show是通过display属性来控制这个div是否显示

<div id="div0">
    <input type="text" v-model="num"/>
    <div v-show="num%2==0" style="width:200px;height:200px;background-color: cadetblue;">&nbsp;</div>
</div>

5.v-for

v-for表示迭代

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload = function() {
            var vue = new Vue({
                "el":"#div0",
                data:{
                    fruitList:[
                        {fname:"苹果",price:5,fcount:100,remark:"苹果很好吃"},
                        {fname:"香蕉",price:6,fcount:80,remark:"香蕉很好吃"},
                        {fname:"菠萝",price:4,fcount:120,remark:"菠萝很好吃"},
                        {fname:"西瓜",price:8,fcount:90,remark:"西瓜很好吃"}
                    ]
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <table border="1" width="400" cellpadding="4" cellspacing="0">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>库存</th>
                <th>备注</th>
            </tr>
            <tr  align="center" v-for="fruit in fruitList">
                <td>{{fruit.fname}}</td>
                <td>{{fruit.price}}</td>
                <td>{{fruit.fcount}}</td>
                <td>{{fruit.remark}}</td>
            </tr>
        </table>
    </div>
</body>

6.v-on:click：实现字符串顺序反转

v-on:click 表示绑定点击事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload = function() {
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:"hello world!"
                },
                methods:{
                    myReverse:function () {
                        //将msg先以""分割，再反转，最后再以""拼接
                        this.msg = this.msg.split("").reverse().join("");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span><br/>
        <!--v-on:click 表示绑定点击事件-->
        <input type="button" value="反转" v-on:click="myReverse"/>
    </div>
</body>

v-on可以省略，变成@click

<div id="div0">
    <span>{{msg}}</span><br/>
    <!--v-on可以省略，变成@click-->
    <!--<input type="button" value="反转" v-on:click="myReverse"/>-->
    <input type="button" value="反转" @click="myReverse"/>
</div>

6.watch：侦听属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload = function() {
            var vue = new Vue({
                "el":"#div0",
                data: {
                    num1: 1,
                    num2: 2,
                    num3: 0
                },
                watch:{
                    //侦听属性num1和num2
                    //当num1的值有改动时，需要调用后面定义的方法，newValue指的是num1的新值
                    num1:function (newValue) {
                        this.num3 = parseInt(newValue) + parseInt(this.num2);
                    },
                    num2:function (newValue) {
                        this.num3 = parseInt(this.num1) + parseInt(newValue);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <input type="text" v-model:value="num1" size="2"/>
        +
        <input type="text" v-model:value="num2" size="2"/>
        =
        <span>{{num3}}</span>
    </div>
</body>

2.2、Vue对象的生命周期

代码演示：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload = function() {
            var vue = new Vue({
                "el":"#div0",
                data: {
                    msg:1
                },
                methods:{
                    changeMsg:function (){
                        this.msg = this.msg + 1;
                    }
                },
                /*vue对象创建之前*/
                beforeCreate:function () {
                    console.log("beforeCreate:vue对象创建之前......");
                    console.log("msg:" + this.msg);
                },
                /*vue对象创建完成*/
                created:function () {
                    console.log("created:vue对象创建完成......");
                    console.log("msg:" + this.msg);
                },
                /*数据装载之前*/
                beforeMount:function (){
                    console.log("beforeMount:数据装载之前......");
                    console.log("span:" + document.getElementById("span").innerText);
                },
                /*数据装载完成*/
                mounted:function (){
                    console.log("mounted:数据装载完成......");
                    console.log("span:" + document.getElementById("span").innerText);
                },
                /*数据更新之前*/
                beforeUpdate:function (){
                    console.log("beforeUpdate:数据更新之前......");
                    console.log("msg:" + this.msg);
                    console.log("span:" + document.getElementById("span").innerText);
                },
                /*数据更新完成*/
                updated:function (){
                    console.log("updated:数据更新完成......");
                    console.log("msg:" + this.msg);
                    console.log("span:" + document.getElementById("span").innerText);
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span id="span">{{msg}}</span><br/>
        <input type="button" value="改变msg的值" @click="changeMsg">
    </div>
</body>