Vue本地应用(通过Vue实现常见网页效果)

最新推荐文章于 2024-08-02 18:13:49 发布

iLuis12138

最新推荐文章于 2024-08-02 18:13:49 发布

阅读量875

点赞数 1

分类专栏：前端学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/iluis/article/details/128466654

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

内容绑定，事件绑定

-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>v-text</title>
</head>
<body>

    <div id="app">
        <!-- 正常写法 -->
                <!-- 全替换写法,一般不推荐，使用了v-text后H2标签包含内容会被全部替换 -->
                <h2 v-text="message">123213123</h2>
                <!-- 插值表达式写法 -->
                <h2>你好的英文是{{message}}</h2>
        <!-- 字符串拼接一个！的插值表达式写法 -->
                <!-- 全替换写法,一般不推荐，使用了v-text后H2标签包含内容会被全部替换 -->
                <h2 v-text="message+'!'">123123123</h2>
                <!-- 插值表达式写法 -->
                <h2>你好的英文是{{message+"!"}}</h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello",
            }
        })
    </script>
</body>
</html>

-v-html（可以类似于v-text，但可以解析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>v-html</title>
</head>
<body>

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                // content:"Hello",
                content:"<a href='www.baidu.com'>百度一下，你就知道</a>",
            }
        })
    </script>
</body>
</html>

-v-on(为元素绑定事件)

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

    <div id="app">
        <!--
            <input type="button" v-on:事件名称="方法">
            可以使用 “@” 代替 “v-on:” 使用
            <input type="button" @事件名称="方法">
        -->
        <input type="button" value="v-on指令-单击事件" v-on:click="doIt">
        <input type="button" value="v-on指令@用法-单击事件" @click="doIt">
        <input type="button" value="v-on指令-鼠标移入事件" v-on:monseenter="doIt">
        <input type="button" value="v-on指令@用法-双击事件" @dbclick="doIt">
        <h2 @click="changeFood">{{ food }}</h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{  
                food:"西兰花炒饭"
            },
            methods:{
                doIt:function(){
                    alert("做程序员！");
                },
                // 点击就多拼接一段字符
                changeFood:function(){
                    // console.log(this.food); //测试
                    this.food += "好好吃"
                },
            },
        })
    </script>
</body>
</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>
</head>
<body>
    <div id="app">
        <button @click="subtractNum">-</button>
        <!-- <span v-text>{{num}}</span> -->
        <span v-text=>{{num}}</span>
        <button @click="addNum">+</button>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                // 对data中变量的更改需要使用到this关键字
                addNum:function(){
                    if(this.num==10){
                        alert('已经最大了!');} 
                    else{
                        this.num++;} 
                },
                subtractNum:function(){
                    if(this.num==0){
                        alert('已经最小了!');} 
                    else{
                        this.num--;} 
                },
            },
        })
    </script>
</body>
</html>

显示切换，属性绑定

v-show（根据表达式的真假，通过操纵css中display切换元素的显示和隐藏）

<!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>v-text</title>
</head>
<body>
    <div id="app">
        <!-- v-show 的判定结果都是bool值，可以进行简单双符号比较 -->
        <img src="" alt="Picture_1" v-show="isShow">
        <img src="" alt="Picture_2" v-show="isHidden">
        <!-- 点击后年龄变为4，v-show变为false -->
        <img src="" alt="Picture_3" v-show="old >=16 " @click="changeOldTo4">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
       var app = new Vue({
            el:"#app",
            data:{
                isShow:1,
                isHidden:0,
                old:18,
            },
            methods:{
                changeOldTo4:function(){
                    this.old = 4;
                },
            },
       })
    </script>
</body>
</html>

v-if（根据表达式的真假，通过操纵dom元素来切换元素的去除和恢复，区别于v-show是利用display:none，这个是直接使元素在dom tree中去除，在实际使用中，频繁需要隐藏和现实切换使用v-show，反之使用v-if，操纵dom树对性能影响较大）

<!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>v-if</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换isShow" @click="toggleIsshow">
      <p v-if="isShow">Hello Vue!</p>
      <!-- 对比v-show -->
      <p v-show="isShow">Hello Vue! v-show</p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
       var app = new Vue({
            el:"#app",
            data:{
              isShow:false,
            },
            methods:{
                toggleIsshow:function(){
                    this.isShow = !this.isShow;
                }
            },
       })
    </script>
</body>
</html>

v-bind（对元素中的属性进行设置，v-bind基本使用方法：v-bind:属性名=表达式，可以不写v-bind，直接使用:元素的写法，通常搭配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>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <!-- 使用三元表达式设置类名 -->
        <img v-bind:src="imgSrc" alt="" :title="imgTitle" :class="isActive?'active':''"
        @click = "toggleActive">
        <br>
        <!-- 使用对象的方式设置类名 -->
        <img v-bind:src="imgSrc" alt="" :title="imgTitle" :class = "{active:isActive}"
        @click = "toggleActive">
    </div>

    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.liuluyi.cn:9999/wp-content/uploads/2022/11/TheTree.png",
                imgTitle:"璐懿",
                isActive:"false",
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }  
            },
        }) 
    </script>
</body>
</html>

列表循环，表单元素绑定

v-for(根据数据操作列表结构)

<!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>
</head>
<body>
    <div id="app">
        <input type="button" value="添加" @click="add">
        <input type="button" value="移除" @click="remove">
        <!-- v-for常常与数组进行搭配使用 -->
        <!-- 语法是(A,B) in array -->
        <ul>
            <li v-for="(city,index) in vagetables" :title="city.name">
                {{ index+1 }}四大直辖市:{{ city }}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["bejing","shanghai","tianjin","chongqing"],
                vagetables:[
                    {name:"西兰花"},
                    {name:"西红柿"},
                ]
            },
            methods: {
                add:function(){
                    this.vagetables.push({name:"牛奶"});
                },
                remove:function(){
                    this.vagetables.shift();
                }
            },
        })
    </script>
</body>
</html>

v-on补充(执行逻辑传递额外的参数，自定义参数，事件修饰符)

<!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>
</head>
<body>
    <div id="app">
        <!-- 在函数之后传递形参，可以传递多个 -->
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <!-- 
            一个输入框，如果没有enter参数，keyup每输入一个字符都会弹窗，enter之后就只会在会车的时候进行弹窗
            相当于.enter是在事件之后加上.修饰符来限制事件的触发
        -->
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{

            },
            methods: {
                doIt:function(p1,p2){
                    console.log("do It!");
                    console.log(p1,p2);
                },
                sayHi:function(){
                    alert("吃了没？");
                },
            },
        })
    </script>
</body>
</html>

v-model（获取和设置表单元素的值，也叫做双向数据绑定，其作用为便捷的设置和获取表单元素的值）

<!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>v-model</title>
</head>
<body>
    <div id="app">
        <!-- input标签是最常见的表单元素 -->
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <!-- v-test差值表达式，{{}} -->
        <h2 @click="setMessage">{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
    <script>
        // 创建Vue实例
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello",
            },
            methods: {
                    getMessage:function(){
                        alert(this.message);
                    },
                    setMessage:function(){
                        this.message= "我已经修改！";
                    },
            },
        })
    </script>
</body>
</html>