01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)

最新推荐文章于 2023-07-11 23:27:15 发布
最新推荐文章于 2023-07-11 23:27:15 发布
阅读量681 收藏 2
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tangoneone/article/details/105922710
版权

01- vue是什么:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  <!-- 需求:我在一个input输入框输什么,页面上得p标签就显示什么? -->
<body>
    <!--vue.js是什么：vue就是一个javascript框架，
       特点：无需再操作dom,只关心数据 -->
  

    <!-- 原生js做法 -->
    <input type="text" name="" id="">
    <p>这是一个p标签</p>

    <script>
        document.querySelector('input').oninput = function () {
            document.querySelector('p').innerText = this.value
        }
    </script>



    <!-- vue做法 -->
    <div id="app">
        <input type="text" name="" id="" v-model="msg">
        <p>{{msg}}</p>
    </div>


    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: ''
            }
        })
    </script>

</body>

</html>

02- vue的基本使用:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- vue的基本使用
        1.下载导包,或者使用cdn版本,vue文档都有
        2.布局,写结构,以前怎么写现在怎么写
        3.使用vue语法,
     -->

    <!--2.布局 -->
    <div id="app">
        {{msg}}-{{message}}
        <p>{{obj.name}}-{{obj.age}}</p>
    </div>

    <!-- 1.导包 -->
    <script src="./vue.js"></script>

    <!--.3. 使用vue语法 -->
    <script>
        var app = new Vue({
            // 挂载点:el实际就是element缩写,相当于一个容器,布局都放在这个容器中
            // 挂载点一定要是一个正常的元素,不能挂在html跟body上
            el: '#app', //相当于选择器querySelector

            // 数据:给的感觉就相当于是一个vue的变量
            data: {
                msg: '今天是个好日子',
                message: 'hello vue',
                obj: {
                    name: 'yanina',
                    age: 18
                }
            }
        })
    </script>
</body>

</html>

03-v-text指令:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

 <!-- 
        v-text指令
        指令:   就相当于是标签的自定义属性. 
        指令值: 就相当于是自定义属性的值. 

        v-text指令表示替换的文本,类似于innerText
        用指令值替换标签中的所有内容. 

        v-text指令值: 一句话表达式
             a.变量
             b.基本运算
             c.三元表达式
 -->
<body>
    <!--2.布局 -->
    <div id="app">
        <p v-text="msg">我是一个快乐的p标签<span>哈哈</span></p>
        <p v-text="obj.name"></p>
        <p v-text="1+1"></p>
        <p v-text="obj.age>18?'去网吧':'偷着去'"></p>
    </div>

    <!-- 1.导包 -->
    <script src="./vue.js"></script>

    <!--.3. 使用vue语法 -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '嘻嘻你今天好美丽呢!',
                obj: {
                    name: 'yanina',
                    age: 19
                }
            }
        })
    </script>
</body>

</html>

ps:打印效果： 在这里插入图片描述

04-插值语法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  <!-- 
        {{ 数据 }}

        数据: 一句话表达式
              a.变量
              b.基本运算
              c.三元表达式

        使用场景: 用于部分内容的替换. 
        使用地方: 标签的文本区域
     -->
<body>
    <!--2.布局 -->
    <div id="app">
        <p v-text="msg">我是一个快乐的p标签</p>
        <!-- 插值语法不会替换所有的文本 -->
        <p>{{msg}},而且天气也很好</p>
        <p>{{obj.name}}~{{obj.age}},是个美女</p>
        <p>{{1+1}}</p>
        <p>{{obj.age>18?'谈恋爱':'好好学习'}}</p>
    </div>

    <!-- 1.导包 -->
    <script src="./vue.js"></script>

    <!--.3. 使用vue语法 -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '嘻嘻你今天好美丽呢!',
                obj: {
                    name: '唐雅莉',
                    age: 19
                }
            }
        })
    </script>
</body>
</html>

ps:打印效果： 在这里插入图片描述

05-v-html指令:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--
     v-html指令
     类似于innerHtml
     使用场景:富文本(带标签的字符串)的解析
     会替换标签中的所有内容. 

        适用于一句话表达式
            1.变量
            2.基本运算
            3.三元表达式
 -->

<body>
    <!--2.布局 -->
    <div id="app">
        <p v-text="msg">我是一个快乐的p标签<span>xixi</span></p>
        
        <!-- 带标签解析 -->
        <p v-html="msg">我是一个悲伤的p标签<span>haha</span></p>
        
        <!-- 数值不用加引号 -->
        <p v-html="1+1"></p>
        
       <!-- 不是数值要加引号 -->
        <p v-html="'<h1>1+1</h1>'"></p>
    
    </div>

    <!-- 1.导包 -->
    <script src="./vue.js"></script>

    <!--.3. 使用vue语法 -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '<h1>嘻嘻你今天好美丽呢!</h1>',

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

ps:打印效果： 在这里插入图片描述

06-v-model指令:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
    v-model指令
    使用范围:表单元素(input,radio,select...)
    使用效果:实现双向绑定,讲表单元素的值(value)和v-model的值合二为一.
    使用:v-model='变量',不适用一句话表达式,基本运算符跟三元表达式就不行
 -->
<body>
    <!--2.布局 -->
    <div id="app">
        <input type="text" v-model="msg">
        <p>你输入了:{{msg}}</p>
    </div>

    <!-- 1.导包 -->
    <script src="./vue.js"></script>

    <!--.3. 使用vue语法 -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // msg: '',
                msg: '商品',
            }
        })
    </script>
</body>
</html>

ps:打印效果：
在这里插入图片描述
在这里插入图片描述

07-v-model指令-单选框:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 单选框:只能选择一组中的某一个 -->
        <label>
            <input type="radio" name="gender" id="" value="男"  v-model="gender">男
        </label>
        <label>
            <input type="radio" name="gender" id="" value="女"  v-model="gender">女
        </label>
        <br>
        <p>你选择的性别是:{{gender}}</p>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                gender:'女'
            }
        });
    </script>
</body>

ps:打印效果： 在这里插入图片描述

08 v-model指令-多选框:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <!-- 多选框 -->
        <input type="checkbox" name="xihuan" value="高" id="" v-model="like">高
        <input type="checkbox" name="xihuan" value="富" id="" v-model="like">富
        <input type="checkbox" name="xihuan" value="帅" id="" v-model="like">帅
        <br><br>
        <p>你喜欢他的是:{{like}}</p>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el:'#app',
            data:{
               like:['高','帅'] 
            }
        });
    </script>
</body>
</html>

ps:打印效果： 在这里插入图片描述

09 v-model指令-下拉菜单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 通过v-model把变量与该input的value的值合二为一 -->
<body>
    <div id='app'>
        <!-- 下拉菜单: 下拉菜单的value值就是选中的option的value值 -->
        <select name="" id="" v-model="address">
            <option value="Y城" >Y城</option>
            <option value="p城" >p城</option>
            <option value="G港" >G港</option>
            <option value="基地">基地</option>
        </select>
        <br>
        <p>你选择的跳伞城市是: {{address}}</p>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                address:'p城'
            }
        });
    </script>
</body>
</html>

ps:打印效果：在这里插入图片描述

10 v-on指令:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
   <!-- 
        v-on指令
        用来注册事件的. 
        语法: v-on:事件名="简短的js或者是一个已经写好的function"
                           简短的js可以理解成就是一句话表达式.
     -->
<body>

    <div id='app'>
        <!-- 事件名:和我们以前写的一样 -->

        <!-- 等号后面可以写 简单js也就是一句话表达式 -->
        <button v-on:click="num++">单击+1</button>
        <button v-on:dblclick="num++">双击+1</button>
        <button v-on:mouseenter="num++">鼠标移入+1</button>

        <!-- 等号后面可以写 一个写好的function -->
        <!-- 已经准备好的方法写在methods里面,methods和data是兄弟关系 -->
        <button v-on:click="say()">调用say方法</button>
        <button v-on:dblclick="say">调用say方法</button> <!-- 如果不需要传递参数,方法调用的阔以省略不写的. -->
        <button v-on:click="sayHello('丫丫')">调用sayHello方法</button>

        <!-- 方法中用data中的数据,用this -->
        <button v-on:click="add">调用add方法让num++</button>

        <br><br>

        <!-- v-on指令简写就是@符号(以上的简写形式,以后也用简写) -->
        <button @click="num++">单击+1</button>
        <button @dblclick="num++">双击+1</button>
        <button @mouseenter="num++">鼠标移入+1</button>
        <button @click="say()">调用say方法</button>
        <button @click="say">调用say方法</button>
        <button @click="sayHello('丫丫')">调用sayHello方法</button>
        <button @click="add">调用add方法让num++</button>

        <p>这里的数量是:{{num}}</p>
    </div>

    <script src='vue.js'></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num:0
            },
            methods: {
                say(){
                  alert('你好鸭')
                },
                sayHello(name){
                    alert(name+'你好鸭')
                },
                add(){
                     //在方法中如何使用data中的数据. 使用this就可以了.  
                    this.num++
                }
            }
        });
    </script>
</body>

</html>

ps:打印效果： 点击不同的按钮可以让下面的数量加1,调用不同的方法可以弹出不同的弹出层在这里插入图片描述

11 用v-on指令(做购物车加减案例):

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<!-- 
    分析: 
      1.input框来一个v-model="值"
      2.+ 绑定add方法.  让data里面的数据+1 
      3.- 绑定sub方法.  让data里面的数据-1,判断不能为负数
 -->
<body>
    <div id='app'>
        <button @click="sub">-</button>
        <input type="text" name="" id="" v-model="inputValue">
        <button @click="add">+</button>

        <p>你选择的件数是:{{inputValue}}</p>
    </div>

    <script src='vue.js'></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                inputValue: 0
            },
            methods: {
                sub() {
                    // if (this.inputValue > 0) {
                    //     this.inputValue--
                    // }
                    this.inputValue >0 && this.inputValue--
                },
                add() {
                    this.inputValue++
                }
            }
        });
    </script>
</body>

</html>

ps:打印效果： 这里点击-按钮与+按钮可以使中间的input数字发生变化,但是不能小于0在这里插入图片描述

12 vue中的this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <button @click="add">单击+1</button>
        <p>现在是数字:{{num}}</p>
    </div>

    <script src='vue.js'></script>
    <script>
          //调用Vue的构造函数,得到一个Vue的实例
        var app = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                add() {
                    this.num++;
                    //this.$data.num++;

                    // this就是vue实例
                    // data和methods都没有在vue实例里
                    // 真正是把data里面的数据和methods里面的方法直接平铺到了vue实例里
                    console.log(this);
                    console.log(app);
                    console.log(this == app); //true
                    this.test()
                },
                test() {
                    alert('我是test方法')
                }
            }
        });
    </script>
</body>
</html>

13 搜索英雄人物demo案例:

<!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>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .search {
        text-align: center;
        padding: 30px 0;
    }

    .search input {
        width: 300px;
        padding: 10px 6px;
    }

    .search button {
        width: 80px;
        height: 40px;
    }

    .info {
        width: 400px;
        margin: 0 auto;
    }

    .info .story {
        padding-top: 15px;
        text-indent: 2em;
    }
</style>

<body>

    <div id="app">
        <div class="search">
            <input type="text" placeholder="请输入王者名称" v-model="heroValue" @keyup.enter="search">
            <button @click="search">搜索</button>
        </div>
        <div class="info">
            <h4>姓名：{{heroList[heroIndex].name}}</h4>
            <div class="story">英雄故事:{{heroList[heroIndex].story}}</div>
            <!-- <img :src=heroList[heroIndex].img[0] alt="" style="width: 500px;"> -->
        </div>
    </div>
<!-- 
        分析: 
        1.打开有一个默认的数据显示
           a.input文本输入框  v-model="值"  值="塞拉斯"
           b.名字  {{heroList[0].name}}
           c.故事  {{heroList[0].story}}
          
        2.搜索功能
           a.按钮设置点击事件  @click="搜索事件"
           b.搜索事件里面如何写: 
              b1:遍历数据数组
              b2:indexOf去判断每一个数据的name里面包含不包含 用户输入的关键字 . 
              b3:如果找到了就返回该数据的下标. 
                 那上面显示名字和故事的地方,就不用0, 就用这个获取到的下标. 
     -->

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                heroValue: '塞拉斯',
                heroIndex: 0,
                //英雄数据
                heroList: [{
                    "name": "塞拉斯",
                    "story": "作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。",
                    "img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big517001.jpg"
                    ],
                }, {

                    "name": "妮蔻",
                    "story": "妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。",
                    "img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big518001.jpg"
                    ],
                }, {

                    "name": "派克",
                    "story": "在比尔吉沃特的屠宰码头，颇有名气的鱼叉手派克葬身在一条巨大的琢珥鱼腹内……然而，他却回来了。他在家乡的阴街陋巷中徘徊着，用超自然的手段干脆残忍地解决那些鱼肉他人的恶棍——一座因捕猎怪物而自豪的城市如今发觉自己却成了狩猎的目标。",
                    "img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big555000.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big555001.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big555009.jpg"
                    ],
                }, {

                    "name": "卡莎",
                    "story": "在孩童时期就被虚空夺走的卡莎，凭着纯粹的固执和意志力活了下来。她的历练让她成为了一位夺命的猎手，或者也有人会称她为黑暗未来的使者。她与一副有生命的虚空生物甲壳形成了一种不得安宁的共生状态，而很快她就将面临一个重大的抉择，究竟是原谅那些称她为怪物的凡人并协力抵御压境的黑暗……还是干脆忘记，放任虚空吞噬这个已将她抛弃的世界。",
                    "img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big145000.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big145001.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big145014.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big145015.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big145016.jpg",
                        "http://ossweb-img.qq.com/images/lol/web201310/skin/big145017.jpg"
                    ],
                }],

            },
            methods: {
                search() {
                    //这个方法就是遍历上面的heroList数组,拿到搜索词所在的那个下标
                    for (let i = 0; i < this.heroList.length; i++) {
                        // 判断搜索的关键词在不在数组的属性name中
                        if (this.heroList[i].name.indexOf(this.heroValue) != -1) {
                            this.heroIndex = i;
                            return;
                        }
                    }

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

</html>

ps:打印效果： 这是还没搜索的状态下默认是 塞拉斯这是还没搜索的状态下默认是塞拉斯
ps:打印效果： 搜索一个卡字可以直接enter键也可以点搜索按钮出现对应的英雄以及英雄故事
在这里插入图片描述

14 v-on常用的修饰符:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: seagreen;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 1.希望按下回车后执行(按键修饰符.enter 可以是键码或者英文+-->
        <input type="text" name="" id="" @keyup.enter="fun">
        <br><br>

        <!-- 2.希望不要冒泡 (事件修饰符 .stop 阻止单击事件继续传播) -->
        <div class="father" @click="clickFather">
            <div class="son" @click.stop="clickSon"></div>

         <!-- 3.希望不要有默认行为 .prevent -->
         <!-- 下面这种事既不要有默认行为又不要冒泡的 -->
            <a href="http://www.baidu.com" @click.prevent.stop="clickA">我是a链接</a>
        </div>

     

        <!-- 
             工作中用的多的:
               .enter   回车触发
               .stop    阻止冒泡
               .prevent 阻止默认行为
             -->
    </div>

    <script src='vue.js'></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                fun() {
                    console.log('嘻嘻哈哈');
                },
                clickFather() {
                    alert("我是爸爸");
                },
                clickSon() {
                    alert("我是儿子");
                },
                clickA() {
                    alert("我是a链接,我被点击了");
                }
            }
        });
    </script>
</body>

</html>

ps:打印效果：
在input表单中按下回车enter会打印"嘻嘻哈哈",
点击红色盒子弹出"我是儿子",不会冒泡弹出"我是爸爸"(阻止了冒泡)
点击a链接弹出"我是a链接,我被点击了" 不会跳转到百度页面也不会冒泡弹出"我是爸爸"(阻止了冒泡并阻止了默认跳转)
在这里插入图片描述

15 v-bind的基本使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        v-bind指令
        用于属性的绑定. 后面的值就是该属性的值. 
        用法: v-bind:属性名="属性值(一句话表达式)"
                            1.变量  2.基本运算  3.三元表达式
     -->
</head>

<body>
    <div id='app'>
        <button @click="btnClick">点我换图片</button>
        <br>
        <img v-bind:src="imgSrc" v-bind:title="imgTitle" v-bind:score="imgScore" alt=""> <!-- 原始写法 -->
        <img :src="imgSrc" :title="imgTitle" :score="imgScore"  alt=""> <!-- 简写 -->
    </div>

    <script src='vue.js'></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                imgSrc:"http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg",
                imgTitle:'这是一张图片',
                imgScore:'123',
            },
            methods: {
                btnClick(){
                   this.imgSrc = "http://ossweb-img.qq.com/images/lol/web201310/skin/big555000.jpg";
                   this.imgTitle = '这是一张美丽的图片',
                   this.imgScore = '456'
                }
            },
        });
    </script>
</body>
</html>

ps:打印效果： 没点击按钮之前 在这里插入图片描述
ps:打印效果： 点击按钮之后,换图片地址,图片标题,还有自定义的score属性
在这里插入图片描述

大力99
关注
专栏目录
Vue中v-model的多种使用方式-妙用小技巧
JackieDYH的博客
01-17 1746
v-model <div id="app"> <input type="text" v-model="num"> <input type="text" :value="num" v-on:input="num=$event.target.value"> <h2>{{num}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/v
五、伊森商城 前端基础-Vue v-text&v-html&v-bind&v-model p23
你甚至不愿意叫我一声伸哥
12-04 383
v-text、v-html、v-bind单向绑定、v-mode双向绑定l的使用，插值表达式、插值闪烁
vue的v-html，v-text指令,以及按键修饰符和事件修饰符的运用
qq_59717525的博客
11-06 282
<!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"> <script src=.
Vue快速入门（创建vue，数据的双绑定，钩子函数，this，v-text和v-html）
weixin_44487309的博客
03-02 794
安装vue 下载安装 下载地址：https://github.com/vuejs/vue 可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip 下载解压，得到vue.js文件。 使用CDN 或者也可以直接使用公共的CDN服务： 或者也可以直接使用公共的CDN服务： <!-- 开发环境版本，包含了用帮助的命令行警告 --&g...
插值，v-bind，v-model的区别
gdtown的博客
04-30 445
v-bind {{}} v-model 三者在使用场景上的区别
v-model与插槽
qq_42835776的博客
07-06 375
插槽内可以包含任何模板代码，包括 HTML： <navigation-link url="/profile"> <!-- 添加一个 Font Awesome 图标 --> <span class="fa fa-user"></span> Your Profile </navigation-link> 甚至其它的组件： <navigation-link url="/profile"> <!-- 添加一个图标
vue的引入。v-text,插值,v-html,v-bind,v-model,v-on,v-for,v-if的使用
qq_41887317的博客
05-08 552
在前端项目中引入vue 1 下载vue.js https://download.csdn.net/download/qq_41887317/85322072 2 在项目中引入vue，注意src中路径，应该写自己项目中的路径 <script src="../js/vue.js"></script> 使用vue 1 v-text="变量名 可以让标签中文本内容，跟变量绑定在一起 。h1标签不起作用，显示文本 <body> <p ...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
在Vue.js中，过滤器（Filters）是Vue实例的一个非常有用的特性，它允许用户对从插值表达式和v-bind表达式中输出的文本进行格式化。Vue2允许自定义过滤器，这些过滤器可以被添加到JavaScript表达式的尾部，并由“管道...
对Vue- 动态元素属性及v-bind和v-model的区别详解
10-18
在学习Vue框架的过程中，对于动态元素属性的使用以及Vue提供的指令v-bind和v-model的理解是非常关键的。这两个指令在Vue.js中用于数据绑定，但是它们的使用场景和作用有着本质的区别。接下来，我将从多个维度详细...
vue基础（插值表达式，v-bind，v-on，v-model ）
weixin_69742797的博客
05-19 972
1、vue单文件组件：扩展名（.vue）的文件 包含三个结构： 模板结构：template--是必须的、模板中只能有一个根元素，所以要将结构包裹到div中。 功能：script--返回当前组件实例；export default{}--引入组件默认会进行返回的实例，返 回当前组件实例 样式：style 2、插值表达式： 语法：{{表达式}} 表达式里面可以写---->变量，表达式，调用a...
Vue基础语法 v-band和v-model和插值语法 (二)
weixin_46022934的博客
12-02 1456
1.数据的读取 {{}} (在DOM内容区域使用) 2.数据读取使用 v-bind 指令 (在属性中使用) 3.数据的双向绑定 v-model
Vue学习：v-text指令
weixin_47295886的博客
02-15 407
v-text:向其所在的节点插入文本 并不会识别标签。v-text:向其所在的标签插入文本 和插值语法有点相似。v-else:条件渲染 动态控制节点是否存在。v-show:条件渲染 动态控制节点是否展示。但是 v-text:会拿到对象对应的值全部替换里面的值。v-if:条件渲染 动态控制节点是否存在。v-for:遍历数组/对象/字符串。v-bind:单项绑定解析表达式。v-on:绑定事件监听 简写@v-model:双向数据绑定。
Vue中的插值操作
qq_61541602的博客
04-19 1555
1.Mustache(英文:胡子)语法 Mustache也就是我们常使用的双大括号 作用: 将data中的文本数据，插入HTML中(响应式)，在其中不仅可以直接写变量，也可以写简单的表达式。 例: <div id="app"> <h2>{{message}}</h2> </div> //所下载的Vue <script src="../vue.js"></script> <script> con
在Vue中使用v-text设置标签文本值（textContent）和拼接的代码
最新发布
qq_66104156的博客
07-11 644
在Vue中使用v-text设置标签文本值（textContent）和拼接的代码 注意：v-text的默认写法会替换全部内容，使用差值表达式{{ }}可以替换指定内容；拼接：直接用+连接
Vue 常用指令 内容绑定/事件绑定 v-text、v-html、v-on
小楼一夜听春雨，深巷明朝卖杏花
06-16 3107
但是使用v-html的时候那么html的各种属性都能够渲染出来。最终将v-text渲染为一个html的文本。在开发过程当中使用vue的语法，但是在实际最终会将vue的语法转化渲染为html页面。可以看到做文本的时候可以使用v-text，同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个。
vue中html里面不能直接写this.$router.push('**')
我不想说
11-06 2813
vue中模板html部分如果写：<h2 @click="this.$router.push('Fllist')">1#车</h2> 不仅不会跳转到Fllist而且报错：“TypeError: Cannot read property ‘$router’ of undefined” 因为在进行模板渲染的时候，这里没有$router对象 解决方法：写在methods里面 &lt...
vue html修饰器,一些让Vue更好用的装饰器
weixin_31794609的博客
06-21 242
给vue添加一个pageIsReady的变量。用于ts环境下的vue通过装饰器添加这个属性，并包装vue的created, mounted和beforeDestroy方法。当created或者mounted里发出的请求完成后，就把pageIsReady设为true。使用这个装饰器时，在业务代码中完全无感，没有任何心智负担。import { Constructor } from "vue/types...
Vue---v-bind、v-on、this语法
GaoXiR的博客
12-26 927
1、v-bind: 是Vue中提供用于绑定属性的指令，" v-bind: " 指令可以被简写为 " : "，其中用 “v-bind:” 绑定的属性中的值为data函数中的属性名，这个属性名可以理解为变量，在绑定的html属性中其还可以添加合法的Js表达式。 用法如下： <input type="button" value="按钮" v-bind:title="msg+ '123'">...
Vue内置指令详解：v-text, v-html, v-show等
Vue指令是Vue.js框架中非常重要的特性，它们提供了一种声明式的方式来操作DOM。下面将详细介绍这些内置指令的功能和用法： 1. **v-text**： - `v-text` 指令用于设置元素的textContent，相当于JavaScript中的`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值