【Vue学习第二天0605】本地应用

简·AI

已于 2022-06-05 22:35:55 修改

阅读量128

点赞数

分类专栏： vue学习文章标签： vue.js 学习 elementui

于 2022-06-05 22:35:13 首次发布

本文链接：https://blog.csdn.net/m0_53522458/article/details/125123259

版权

vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、Vue指令

1、v-text：设置文本

要想实现（固定文字）+变量文字的方式，采用下面的形式

（1）

<h2>湖北{{message+'!'}}</h2>

（2）

 <h2 v-text="message+'!'"></h2>

<script>
        var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello Vue!',
        info:"好好学习天天向上！"
      }
    })
    </script>

2、v-html：设置标签的innerHTML

通过v-text和v-html的对比来解释v-html的功能

（1）代码

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

<script>
         var app = new Vue({
         el: '#app',
         data: {
         //content: 'Hello Vue!',
         content:"<a href='https://blog.csdn.net/m0_53522458?spm=1000.2115.3001.5343'>我的主页</a>"
       }
     })
     </script>

（2）效果：使用v-text仅有文本，使用v-html可打开超链接

3、v-on：为元素绑定事件

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

（2）事件名不需要写on

（3）指令可以简写为@

（4）绑定的方法定义在methods属性中

源代码：

<div id="app">
        <input type="button" value="v-on指令" v-on:click="dolt">
        <input type="button" value="v-on简写" @click="dolt">
        <input type="button" value="双击事件" @dblclick="dolt">
        <input type="button" value="事件绑定" v-on:dblclick="dolt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>

<script>
        var app = new Vue({
        el: '#app',
        data:{
            food:"哈密瓜yyds!"
        },
        methods:{
            dolt:function(){
                alert("sjysz")
            },
            //逻辑
            changeFood:function(){
           // console.log(this.food);
            this.food+="好好吃"
        }
        }
        
    })
    </script>

运行效果：