2.Vue指令

最新推荐文章于 2024-01-04 21:16:21 发布

肝JOJO

最新推荐文章于 2024-01-04 21:16:21 发布

阅读量90

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_34620296/article/details/103057804

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本地应用
    1.通过Vue实现常见的网页效果
    2.学习Vue指令,以巩固知识点
    3.Vue指令指的是,以v-开头的一组特殊语法
Vue指令
    1.v-text  设置标签的文本值(textContent),会替换所有内容
    2.v-html  设置标签的innerHTML
    3.v-on/@  为元素绑定事件 
        可传递自定义参数 @click="doit(p1,p2)" dolt:function(p1,p2){}
        可传递事件修饰符 @keyup.enter="Hi"  Hi:function(){} 
    4.v-show  根据表达值的真假,切换元素的显示和隐藏(控制元素的显示方式)
    5.v-if    根据表达值的真假,切换元素的显示和隐藏(控制节点存在与否,耗费性能)
    6.v-bind/:  设置元素的属性
    7.v-for 根据数据生成列表结构 (经常和数组结合使用)
    8.v-model  获取和设置表单元素的值(双向数据绑定)

代码示例:

    <style>
        .active{
            border: 20px solid red;
        }
    </style>

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
        window.onload=function(){
            var app = new Vue({
                el:'#app',
                data:{
                    message:'v-text指令',
                    content:'<a href="https://www.baidu.com">百度</a>',
                    food:'卫龙辣条',
                    isShow:false,
                    age:17,
                    imgSrc:"img/李老八.jpg",
                    imgTitle:"李老八",
                    isActive:false,
                    arr:[1,2,3],
                    vegetables:[
                        {name:"西兰花"},
                        {name:"火龙果"}
                    ],
                    messages:"v-model双向数据绑定",

                },
                methods: {
                    doW:function(){
                        alert('wakanda forever!');
                    },
                    changFood:function(){
                        this.food+='好恰!'; 
                    },
                    changeIsShow:function(){
                        this.isShow = !this.isShow;
                    },
                    swClass:function(){
                        this.isActive = !this.isActive;
                    },
                    add:function(){
                        this.vegetables.push({name:"菠菜"});
                    },
                    remove:function(){
                        this.vegetables.shift();
                    },
                    doit:function(p1,p2){
                        alert(p1+p2);
                    },
                    Hi:function(){
                        alert("传事件修饰符");
                    },
                    getM:function(){
                        alert(this.messages);
                    },
                    setM:function(){
                        this.messages="改变messages";
                    },


                },





            })
        }
   </script>

<body>
    <div id="app">
        <h2 v-text='message+"!"'></h2> <!-- 会替换所有文本内容 -->
        <h2>你好,{{message+'!'}}</h2>  <!-- 只会替换括号内文本的内容 -->

        <h2 v-html='content'></h2> <!-- 会替换innerHTML的内容 -->

        <input type="button" value="v-on指令" v-on:click='doW'>
        <input type="button" value="v-on简写" @mouseenter='doW'>
        <h2 @click='changFood'>{{food}}</h2>

        <input type="button" value="切换隐藏/显示" @click='changeIsShow'>
        <img src="img/乔瑟夫.jpg" alt="" v-show='isShow'>  <!-- 根据isShow的真/假,显示/隐藏 -->
        <img src="img/乔瑟夫.jpg" alt="" v-show='false'>   <!-- 隐藏 -->  
        <img src="img/乔瑟夫.jpg" alt="" v-if='age>=17'> <!-- 根据表达式的真/假,显示/隐藏 -->

        <input type="button" value="切换类名" @click="swClass">
        <img v-bind:src="imgSrc" alt="">
        <!-- 下面为简写(常用) -->    
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''">  <!-- 使用三元表达式改变类名 -->
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}"> <!-- active类名是否生效取决于isActive的真假 --> 
           
        <ul>
            <li v-for="(item,index) in arr"> <!-- 数组 -->         
                {{index}}生成列表:{{item}} 
            </li>
        </ul>
        <h2 v-for="(item, index) in vegetables" :title="item.name"> <!-- 对象数组 -->
            {{item.name}}
        </h2>   
        <input type="button" value="添加蔬菜" @click="add">
        <input type="button" value="移除蔬菜" @click="remove"> 

        <input type="button" value="传参数" @click="doit(777,'传参数')">
        <input type="button" value="传修饰符" @keyup.enter="Hi"> 
        <!-- 按下enter调用方法 --> 

        <input type="text" v-model="messages" @keyup.enter="getM">  <!-- 可获取数据 -->
        <h2>{{messages}}</h2>  <!-- 改变表单值,也会改变messages值,反之一样(双向数据绑定) -->
        <input type="button" value="修改messages" @click="setM">
    </div>
</body>

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.Vue指令

本地应用 1.通过Vue实现常见的网页效果 2.学习Vue指令,以巩固知识点 3.Vue指令指的是,以v-开头的一组特殊语法Vue指令 1.v-text 设置标签的文本值(textContent),会替换所有内容 2.v-html 设置标签的innerHTML 3.v-on/@ 为元素绑定事件代码示例: <script s...
复制链接

扫一扫