Vue本地应用

最新推荐文章于 2023-07-26 10:42:22 发布

HeX_7

最新推荐文章于 2023-07-26 10:42:22 发布

阅读量757

点赞数 1

分类专栏： # Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/HeX_7/article/details/124244626

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.内容绑定，事件绑定

（v-text v-html v-on基础）

v-text

v-text指令作用：设置标签内容（textContent）

默认写发挥替换全部内容，使用差值表达式{}可以替换指定内容

内部支持写表达式

<body>
    <div id="app">
        <h2 v-text="message + '!'"></h2>
        <h2 v-text="info + '!'"></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:"黑马程序员!!!",
                info:"前端移动教育部"
            }
        })

    </script>

v-html

v-html指令作用：设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么只会解析为文本

解析文本使用v-text，需要解析html结构用v-html

<body>
    
    <!--2.html结构-->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        //3.创建Vue实例
        var app = new Vue({
            el:"#app",
            data:{
                // content:"百度一下"
                content:"<a href='http://www.baidu.com'>百度一下</a>"
            }
        })

    </script>
</body>

v-on基础

v-on指令的作用是：为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的放大定义在methods属性中

方法内部通过this关键字可以访问定义在data中的数据

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>

    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        //3.创建Vue实例
        var app = new Vue({
            el:"#app",
            data:{
                food:"凉拌西蓝花"
            },
            methods:{
                doIt:function(){
                    alert("做IT");
                },
                changeFood:function(){
                    this.food+="好好吃"
                }
            }
        })
    </script>
</body>

2.显示切换，属性绑定

（v-show v-if v-bind）

v-show

指令作用：根据真假切换元素的显示状态

原理是修改元素的display，实现显示隐藏

执行后面的内容，最终都解析为布尔值

值为true元素显示，值为false元素隐藏

数据改变之后，对应元素的显示状态会同步更新

<body>

    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="img/b2.jpg" alt="">
        <img v-show="age>=18" src="img/b2.jpg" alt="">
    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })

    </script>
</body>

v-if

指令作用是：根据表达式真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树中，为false 从dom树中移除

频繁切换v-show，反之v-if 因为前者切换消耗较小

<body>
    
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">黑马程序员</p>
        <p v-show="isShow">黑马程序员 v-show修饰</p>
        <!-- 
            v-show改变的是display这个属性
            v-if改变的是dom树 若为false 则会直接没有

            若频繁切换使用v-show反之v-if
        -->

        <h2 v-if="temperature>=35">热死啦</h2>
    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:40
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

点击切换显示后

v-bind

指令作用：为元素绑定属性

完整写法： v-bind：属性名

简写的话可以直接省略v-bind，只保留：属性名

需要动态的增删class建议使用对象的方式

<head>
<style>
        .active{
            border:1px solid red;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" :title="imgTitle+'!!!'" alt="" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" :title="imgTitle+'!!!'" alt="" :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.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

案例：图片切换：

列表数据使用数组保存

v-bind指令可以设置元素属性

v-show和v-if都可以切换元素显示状态

3.列表循环，表单元素绑定

（v-for v-on补充 v-model）

v-for

指令作用：根据数据生成列表结构

数组经常和v-for结合使用

语法：（item，index）in 数据

item和index可以结合其他指令一起使用

数据长度的更新会同步到页面上，是响应式的

<body>


    <div id="app">

    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">

        <ul>
            <!-- item代表这个对象或者数组或其他语法 -->
            <li v-for="(item,index) in arr"> 
                {{index+1}}黑马程序员校区：{{item}}
            </li>
        </ul>
        <h2 v-for="item in vegetables" :title="item.name">
            {{ item.name }}
        </h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                vegetables:[
                    {name:"凉拌西蓝花"},
                    {name:"西蓝花凉拌"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"花菜小炒肉"})
                },
                remove:function(){
                    this.vegetables.shift() //shift默认移除最左边的元素
                }
            }
        })

    </script>
    
</body>

v-on补充

事件绑定的方法写成函数调用形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上 . 修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

事件修饰符有多种

<body>

    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'诸葛')">
        <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",
            methods:{
                doIt:function(p1,p2){
                    console.log("做IT");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert('吃饭了吗');
                }
            }
        })
    </script>
</body>

v-model

指令作用：便捷的设置和获取表单元素的值

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

绑定数据与表单元素的值是双向的，改变任意一个，另一个均会改变

<body>
    
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <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:"黑马程序员"
        },
        methods:{
            getM:function(){
                alert(this.message);
            },
            setM:function(){
                this.message="酸菜鱼";
            }
        }
    })

    </script>
</body>