Vue.js的学习笔记Cha2--day2

Enoshima

已于 2022-07-30 16:50:10 修改

阅读量259

点赞数

文章标签： vue.js 学习 javascript

于 2022-07-26 23:29:59 首次发布

本文链接：https://blog.csdn.net/Enoshima/article/details/125940771

版权

笔记基于此教程：黑马–4小时入门Vue.js
用IJ作为开发环境
虽然已经出了3.x，但是从发布时间来看，四小时的教程是基于2.x的（3.x发布于2020年，视频发布于2019），后续的实战教程应该是3.x…所以还是先学2.0。

-----------------------------------------分割线----------------------------------------------

P6 Cha2内容介绍

用Vue实现网页效果
用Vue指令获取元素并管理（v-if、v-show…）

P7-P？ Vue指令

v-text 设置标签的文本值
两种写法：

        <!--1 将元素中的所有内容替换为message-->
        <h2 v-text="message">Enoshima</h2>
        <!--2 将元素中被{{}}括起内容替换为message：差值表达式-->
        <h2>Enoshima {{message}}</h2>

        <!--3 字符串连接-->
        <!--1-->
        <h2>{{message+' Enoshima'}}</h2>
        <!--2-->
        <h2>{{message+" Enoshima"}}</h2>
        <!--3-->
        <h2 v-text="message+' Enoshima'"></h2>

效果如下
在这里插入图片描述

v-html 实现
效果如下：

代码如下

    <div id="app">
        <p v-html="website"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="./index.js"></script>-->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                website:"<a href='http://www.baidu.com'>百度网站</a>"
            }

v-on 基础
1、为元素绑定事件
效果

<body>
    <div id="app">

        <input type="button" value="v-on事件" v-on:click="doIt">
        <button value="v-on event" @click=doIt >v-on event</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="./index.js"></script>-->
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function () {
                    alert("做It");
                }
            },
        })
    </script>
</body>

这里总是报错Namespace “v-on” is not bound，目前找到的解决方法就是换成@那种写法。明天我看看官网怎么解决。

通过监听事件改变页面的元素配置。在Vue中主要关注数据更新，数据更新后相应元素能同步被更新。
效果如下：实现双击文字能改变文字内容
请添加图片描述
代码如下：

<body>
    <div id="app">
        <input type="button" value="v-on事件" v-on:click="doIt">
        <button value="v-on event" @click=doIt >v-on event</button>
        <h2 @dblclick="changefood">{{food}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="./index.js"></script>-->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"咸鱼茄子煲"
            },
            methods:{
                doIt:function () {
                    alert("做It");
                },
                changefood:function () {
                    this.food+="最好吃"
                }
            },
        })
    </script>
</body>

2、传递参数

        <button @click="chuancan('超赞的')">点赞</button>
        <script>
        var app = new Vue({
            el:"#app",
            data:{
            },
            methods:{
                chuancan:function (p) {
                    console.log(p);
                }
            },
        })
    </script>

3、定义特定按键监听：只有按下该按键时才触发事件

<!--希望达到按下回车就执行任务的功能-->
<input type="text" @keyup.13="sayhello">
<!--这里的13是键代码（搜索键盘键码即可），也可以用键别名enter-->
 <script>
        var app = new Vue({
            el:"#app",
            methods:{
                sayhello:function () {
                    alert("你好");
                }
            },
        })
    </script>

P10 本地应用：计数器

没有使用他的模板（其实就是个css吧）随手做了一下。效果如下：
请添加图片描述
代码如下：

<body>
    <div id="app">
<!--        <input type="button" value="v-on事件" v-on:click="doIt">-->
<!--        <button value="v-on event" @click=doIt >v-on event</button>-->
<!--        <h2 @dblclick="changefood">{{food}}</h2>-->
        <button @click=minus >-</button>
        <h5>{{num}}</h5>
        <button @click=add >+</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="./index.js"></script>-->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"咸鱼茄子煲",
                num:0
            },
            methods:{
                changefood:function () {
                    this.food+="最好吃"
                },
                minus:function () {
                    this.num = this.num -1
                },
                add:function () {
                    this.num = this.num +1
                }
            },
        })
    </script>
</body>

------------------------------分割线--------------------------
于是学完了Vue指令的第一部分~接下来开始第二部分啦！

v-show
根据表达式的真假，通过操作元素的display属性，切换元素的显示和隐藏。

<div id="app">
        <h4 v-show="true">v-show=true</h4>
       <button @click="changeIsshow">改变显示状态：取非</button>
        <h4 v-show="isShow">v-show="isShow"</h4>
        <button @click=add>age+1</button>
        <h4 v-show="age>=5">v-show="age>=5"</h4>
    </div>
    <!--中间省略-->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                age:0
            },
            methods:{
                add:function () {
                    console.log(this.age),
                    this.age+=1
                },
                changeIsshow:function () {
                    this.isShow=!this.isShow
                }
            },
        })
    </script>

效果如下
请添加图片描述

v-if
根据表达式的真假，直接操作元素（删除/增加），切换元素的显示和隐藏。代码与上几乎完全一致，只用把v-show改成v-if即可。
v-bind：设置元素属性
有哪些元素属性？
- 元素地址src
- 标题title
- 类class

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            border:5px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
<!-- v-bind可以被省略 <img v-bind:src="imgsrc" v-bind:title="imgtitle+'!'">-->
        <img :src="imgsrc" :title="imgtitle+'!'">
        <!--两种控制active的方式：active是否生效取决于表达式是否为真-->
        <img v-bind:src="imgsrc" v-bind:class="age>5?'active':''">
        <img v-bind:src="imgsrc" v-bind:class="{active:age<5}">

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="./index.js"></script>-->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgsrc:"./src/1.png",
                imgtitle:"大暑海报",
                age:9
            },
            methods:{

            },
        })
    </script>
</body>
</html>

P14 本地应用：图片查看器

我自己实现的代码如下

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .but{
            width:200px;
            height:200px;
            font-size:100px
        }
        .img{
            width:2000px;
            height:1500px;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click=previous class="but"> 左 </button>
        <img :src="imgsrc[shownum]" class="img" >
        <button @click=after class="but"> 右 </button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgsrc:["./src/1.jpg","./src/2.jpg","./src/3.jpg"],
                shownum:0
            },
            methods:{
                previous:function () {
                    this.shownum=this.shownum-1;
                    if(this.shownum<0){this.shownum=2}
                },
                after:function () {
                    this.shownum=this.shownum+1;
                    if(this.shownum>2){this.shownum=0}
                }
            },
        })
    </script>
</body>
</html>

效果如下：（去广州玩拍的亮片，还不错吧？）
请添加图片描述
------------------------------分割线--------------------------
于是学完了Vue指令的第二部分~于是开始第三部分

v-for
根据数据生成列表结构：展示数组内容

<div id="app">
        <ul>
            <li v-for="dish in array">{{dish}}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                array:["山药蒸肉饼","手撕鸡","红烧鱼","炒空心菜"]
            }
        })

在这里插入图片描述
对于对象数组，可以用对象的方法(push,shift)增删相应的对象。后续还可以获取用户输入的信息，完整地与用户交互。

methods:{
                add:function () {
                    this.dessert.push({ name:"葡式蛋挞"});
                },
                shanchu:function(){
                   this.dessert.shift();
                }

v-model：获取/设置表单元素的值（双向数据绑定）
超级重要的章节！登录系统会用到

<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getM">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:""
            },
            methods:{
                getM:function () {
                    alert(this.message);
                }
            },
        })
    </script>
</body>

在这里插入图片描述
反过来，也可以在代码里设置一个重置默认键，重置表单内容为默认内容。

P18 本地应用：备忘录

在这里插入图片描述
需要的知识点：

数组长度获取v-text：{{array.length}}
有序数组为
2. v-for获取列表元素中的多个内容时，前面的为取出的对象，后面为index
3. 删除单个时用this.array.splice(index,1(要删除的数目))；全清空时直接令数列=空列即可

我的实现效果如下：
当事件数目为0时和不为0时展现的字不一样
有事情还没做的时候才会显示clear

有一个地方还不会实现，就是回车按下之后希望表单中的东西被清空，以及希望表单中没输入东西的时候会有灰色的字

请添加图片描述
代码如下：

<body>
    <div id="app">
        <h3 v-show="todolist.length!=0">还有{{todolist.length}}件事情没做啦，快去做啦！</h3>
        <h3 v-show="todolist.length==0">今天要做什么事情呢</h3>
        <input type="text" v-model="todolist.content" @keyup.enter="getM">
        <ol>
            <li v-for="(todo,index) in todolist">
                {{todo.content}}
                <button @click="shanchu(index)">x</button>
            </li>
        </ol>
        <button v-show="todolist.length!=0" @click="clear">人家不做了啦</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                todolist:[],

            },
            methods:{
                getM:function () {
                    this.todolist.push({content:this.todolist.content})
                },
                shanchu:function(index){
                    this.todolist.splice(index,1);
                },
                clear:function () {
                    this.todolist=[];
                }
            },
        })
    </script>
</body>