Vue学习笔记2——本地应用

最新推荐文章于 2021-12-01 11:19:11 发布

天地神仙

最新推荐文章于 2021-12-01 11:19:11 发布

阅读量180

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/FuckerGod/article/details/117562253

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

v-text

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
内部支持写表达式

<body>
    <div id="app">
        <h2 v-text="message+'真好吃'">哈哈哈</h2>
        <h2 v-text="info+'真好吃'">哈哈哈哈</h2>
        <h2>{{message+'真'}}好吃</h2>
    </div>
</body>

<script>
    var app = new Vue({
        el:'#app',
        data: {
            message: '香蕉',
            info:"苹果",
        }
    })
</script>

运行结果
在这里插入图片描述

v-html

v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

    <div id="app">
        <p v-html="message"></p>
        <p v-text="message"></p>
    </div>
<script>
    var app = new Vue({
        el:'#app',
        data: {
            message:"<a href=\"www.baidu.com\">点我进入百度</a>"
        }
    })
</script>

运行结果
在这里插入图片描述

v-on

v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种
例一

<body>
    <div id="app">
        <p>{{ message}}</p>
        <input type="button" value="单击事件" v-on:click="doIt">
        <input type="button" value="双击事件" v-on:dblclick="doIt">
        <input type="button" value="简写事件" @click="doIt">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>

<script>
    var app = new Vue({
        el:'#app',
        data: {
            message:"苹果",
        },
        methods:{
            doIt:function () {
                this.message+="好好吃！"
            }
        }
    })
</script>

运行结果
点击第一个按钮
在这里插入图片描述
每触发一个按钮就会添加一个好好吃！

例二

<!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>v-on补充</title>
</head>

<body>
    <div id="app">
        <input type="text" @keyup.enter="hello">
        <button @click="send('老铁',666)">老铁</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               address:["北京","上海","广州","深圳"],
                person:[{name:"张三"},{name:"李四"}]
            },
            methods: {
              hello:function () {
                  alert("你好")
              },
              send:function (p1,p2) {
                  alert(p1+p2)
              }
            },
        })
    </script>
</body>

</html>

在这里插入图片描述
文本框输入内容后按回车会有“你好”的弹窗
点击老铁按钮后会“老铁666”的弹窗

实现一个简单的计数器

<body>
    <div id="app">
      <button @click="add">+</button>
        <span v-text="message"></span>
        <button @click="sub">-</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>

<script>
    var app = new Vue({
        el:'#app',
        data: {
            message:1,
        },
        methods:{
            add:function () {
                if(this.message<9)
                this.message+=1
                else alert("别点啦最大拉")
            },

            sub:function (){
                if (this.message>0)
                this.message-=1
                else alert("别点啦最小啦")
            }
        }
    })
</script>

运行结果
在这里插入图片描述
点击按钮会正常的加减，最大加到9，最小减到0。并且会有异常提示。

v-show

v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新

<div id="app">
    <input type="button" @click="ChangeShow" value="点击切换状态"></input>
    <img v-show="message"  src="https://picsum.photos/id/1/200/200">
    <img v-show="age>=18"  src="https://picsum.photos/id/1/200/200">
    <button @click="add">+</button>
    <span v-text="age"></span>
    <button @click="sub">-</button>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data: {
            message:"true",
            age:"18"
        },
        methods: {
            ChangeShow: function () {
                this.message = !this.message;
            },
            add: function () {
                    this.age += 1
            },
            sub: function () {
                    this.age -= 1
            }
        }
    })
</script>

运行效果
在这里插入图片描述
点击第一个按钮可以切换第一个图片的显示状态，第二个数字在大于等于18的时候会显示第二章图片。

v-if

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小

<div id="app">
    <p v-if="message">今天天气不错</p>
    <p v-if="temp<10">今天温度好低啊</p>
    <input type="button" @click="ChangeShow" value="点击切换状态">

    <button @click="add">+</button>
    <span v-text="temp+'°'"></span>
    <button @click="sub">-</button>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data: {
            message:"true",
            temp:"18"
        },
        methods: {
            ChangeShow: function () {
                this.message = !this.message;
            },
            add: function () {
                    this.temp+= 1
            },
            sub: function () {
                    this.temp-= 1
            }
        }
    })
</script>

运行效果
在这里插入图片描述
当温度加到18的时候，将会隐藏下面一行文字的显示
点击上方的按钮会隐藏上面一行文字的显示如图所示

隐藏状态下dom树下的节点被删除

v-bind

v-bind指令的作用是:为元素绑定属性
完整写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .show{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <p v-bind:class="{show:activity}" @click="change">你好</p>
    <p :class="{show:activity}" @click="change">世界</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data: {
           activity:false
        },
        methods: {
            change:function () {
                this.activity=!this.activity;
            }
        }
    })
</script>
</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>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">

        <button href="" v-show="index>0" @click="prev">左</button>
        <img v-bind:src="imgSrc[index]" alt="">
        <button href="" v-show="index<imgSrc.length-1" alt="" @click="add">右</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:[ "https://picsum.photos/id/1/300/200",
                    "https://picsum.photos/id/2/300/200",
                    "https://picsum.photos/id/3/300/200",
                    "https://picsum.photos/id/4/300/200",
                    "https://picsum.photos/id/5/300/200",
                    "https://picsum.photos/id/6/300/200"],
                index:0
            },
            methods: {
               add:function () {
                   this.index++;
                   alert(this.index)
               },
               prev:function () {
                   if (this.index>1)
                   this.index--;
                   alert(this.index)
               }
            },
        })
    </script>
</body>
</html>

运行效果
在这里插入图片描述
点击图标进行图片切换，第一张图片的时候左边的按钮进行隐藏，最后一张图片的时候右边的按钮进行隐藏。

v-for

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的

<!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>v-for指令</title>
</head>

<body>
    <div id="app">
        <button @click="add">
            点我添加王五
        </button>
        <ul>
            <li v-for="(item,index) in address">
                我住在{{address[index]}}
            </li>
            <h2 v-for="item in person">
                我叫{{item.name}}
            </h2>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               address:["北京","上海","广州","深圳"],
                person:[{name:"张三"},{name:"李四"}]
            },
            methods: {
               add:function () {
                 this.person.push({name:"王五"})
               },
               prev:function () {
                   if (this.index>0)
                   this.index--;
                   alert(this.index)
               }
            },
        })
    </script>
</body>

</html>

运行效果
在这里插入图片描述
点击按钮后

v-model

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据←→表单元素的值

<!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>v-model补充</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        <button @click="Cmsg">按我改变输入框的值</button>
        <p>{{message}}</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"蛋炒饭",
            },
            methods: {
             Cmsg:function () {
                this.message="真不错"
             }
            },
        })
    </script>
</body>

</html>

运行效果
在这里插入图片描述
点击按钮后

实现一个简单的记事本

1.新增

生成列表结构(v-for 数组)
获取用户输入(v-model)
回车,新增数据(v-on .enter 添加数据)

2.删除

数据改变,和数据绑定的元素同步改变
事件的自定义参数
splice方法的作用

3.统计

统计信息个数(v-text length)

4.清空

点击清除所有信息(v-on 清空数组)

5.隐藏

没有数据时,隐藏元素(v-show v-if)

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>神仙记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
<!-- 主体区域 -->
<section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
        <h1>神仙记事本</h1>
        <input v-model="inputValue" @keyup.enter="input" placeholder="请输入任务"
               class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list">
                <div class="view">
                    <span class="index">{{index+1}}.</span>
                    <label>{{item}}</label>
                    <button class="destroy" @click="deleteVal(index)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length!=0">
      <span class="todo-count" >
        <strong>{{list.length}} </strong> items left
      </span>
        <button class="clear-completed" @click="clearVal">
            Clear
        </button>
    </footer>
</section>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#todoapp",
        data:{
            inputValue:"天天向上",
            list:["按时吃饭","好好学习"]
        },
        methods:{
            input:function () {
                this.list.push(this.inputValue)
            },
            deleteVal:function (index) {
                this.list.splice(index,1)
            },
            clearVal:function () {
                this.list=[]
            }
        }

    })
</script>
</body>

</html>

效果实现

在这里插入图片描述

天地神仙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue学习笔记2——本地应用

v-textv-text指令的作用是:设置标签的内容(textContent)默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容内部支持写表达式<body> <div id="app"> <h2 v-text="message+'真好吃'">哈哈哈</h2> <h2 v-text="info+'真好吃'">哈哈哈哈</h2> <h2>{{mess
复制链接

扫一扫