vue学完就入门！

最新推荐文章于 2022-11-14 16:10:13 发布

樂笒

最新推荐文章于 2022-11-14 16:10:13 发布

阅读量96

点赞数 1

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

本文链接：https://blog.csdn.net/m0_49413017/article/details/116607633

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

前言
内容事件绑定

前言

学习目标：

用 Vue 实现常见的网页效果
学习Vue指令，巩固所学
Vue指令就是v-开头的指令

内容事件绑定

V-text

作用：设置标签的内容

默认写法会替换全部内容，使用差值表达式可以替换指定内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <h3 v-text="message+'!'" >我是憨憨</h3>
        <!-- 会显示我是帅哥，覆盖憨憨 -->
        <h3>{{message+'!'}}这毫无疑问</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message:'我是帅哥',
            }
        })
    </script>
</body>

</html>

V-html

作用：能解析html

内容中有html结构会被解析为标签
v-text只能文本
文本用text，需要解析html用html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <h2 v-html="web"></h2>
<a href="https://blog.csdn.net/m0_49413017?spm=1011.2124.3001.5343"></a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                web:'<a href="https://blog.csdn.net/m0_49413017?spm=1011.2124.3001.5343">我的csdn博客</a>',
            
            }
        })
    </script>
</body>

</html>

v-on

作用：为元素绑定事件

创建实例时：el挂载点，data数据，methods方法
v-on指令是绑定事件，简写为@
通过this，关键字获取data中的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
       <input type="button" value="摸摸我" @click="clickit">
       <h2 @click="clickit">{{message}}</h2>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message:'点一下',
            },
            methods:{
                clickit:function(){
                    this.message+="亲你一口"
                }
            }
        })
    </script>
</body>

</html>

简单计算器

data中定义数据：比如message
methods中添加两个方法：比如add（递增），sub（递减）
使用v-text将num设置给span标签
使用v-on将add和sub分别绑定给+,-按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="+" @click="add">
        <span>{{message}}</span>
        <input type="button" value="-" @click="sub">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 1,
            },
            methods:{
                add:function(){
                    this.message++
                },
                sub:function(){
                    this.message--

                }
            }
        })
    </script>
</body>

</html>

v-show

作用：根据表达值的真假，切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #app>img {
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }

    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="显示/隐藏" @click="changeisshow">
        <input type="button" value="成人内容" @click="addage">
        <img v-show="ishow"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-f8ce1fdc8bce264456d33f4f31c343dc_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621416089&t=b39d95b0250f58a0c89e89134310df34"
            alt="思密达">
        <img v-show="age>=18" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3774010462,110501402&fm=26&gp=0.jpg" alt="xiba">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1,
                ishow: false,
                age: 17

            },
            methods: {
                changeisshow: function () {
                    this.ishow = !this.ishow;
                },
                addage: function () {
                    this.age++
                }
            }

        })

    </script>
</body>

</html>

v-if

作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

v-if直接消失
v-show 加dis -play

v-bind指令

使用方式：

v-bind:属性名=表达式

vue里面我们能够省去v-bind
为 :属性名=表达式的方式

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">
    <title>vue基础</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
       <li v-for="item in Array">{{item}}</li>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                Array:['西瓜','草莓','橘子','荔枝',]

            },
            methods: {}
 

        })

    </script>
</body>

</html>

显示效果

v-on 补充

事件绑定的方法可以写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接受传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车

v-model

作用：获取和设置表单元素的值（双向数据绑定）

绑定的数据会和表单元素值相关联

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <input type="button" @click="setmessage" value="我的名字">
        <input type="text" v-model='message' @keyup.enter='getmessage' >
        <h3>{{message}}</h3>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message:'lehan',

            },
            methods: {
                setmessage:function(){
                    this.message='你真好看'
                },
                getmessage:function(){
                    alert(this.message)

                }

            }
 

        })

    </script>
</body>

</html>

效果：

学完这些已经小入门啦

樂笒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学完就入门！

文章目录前言内容事件绑定V-textV-htmlv-onv-showv-ifv-bind指令v-forv-on 补充v-model前言学习目标：用 Vue 实现常见的网页效果学习Vue指令，巩固所学Vue指令就是v-开头的指令内容事件绑定V-text作用：设置标签的内容默认写法会替换全部内容，使用差值表达式可以替换指定内容<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫