什么是vue

什么是vue Vue.js是什么？(4)

时间：2024-01-24 21:00:29 来源：IT袋作者：马勇

导读：什么是vue，3.4、v-on 指令作用 v-on 为HTML标签绑定事件 !DOCTYPE html>html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">head> meta charset="UTF-8"> meta name="viewport" content="width=device-wi

什么是vue

3.4、v-on

指令	作用
v-on	为HTML标签绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <!--
            v-on：为 HTML 标签绑定事件
            完整语法：<标签名 v-on:事件名="vue中methods里面的函数名()"></标签>
            简写语法：<标签名 @事件名="vue中methods里面的函数名()"></标签>
        -->
        <button v-on:click="change()">单击_改变div的内容</button>
        <button v-on:dblclick="change()">双击_改变div的内容</button>
        <button @click="change()">简写单击_改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"javascript"
        },
        methods:{
          change(){
                if(this.name=="javascript"){
                    this.name="vue"
                }else {
                    this.name = "javascript"
                }
            }
        }
    });
</script>
</html>

3.5、v-bind

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <!--
            示例2：使用完整模式（<标签 v-bind:属性名="变量名">）给href属性绑定模型数据url
        -->
        <a v-bind:href="url">百度</a>
        <br>
        <!--
            示例3：使用简化模式（<标签 :属性名="变量名">）给href属性绑定模型数据url
        -->
        <a :href="url">百度</a>
        <br>
        <!--
            示例4：使用简化模式给class属性绑定模型数据cls
        -->
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标：使用vue中指令v-bind给标签属性绑定数据
    * 语法1：完整模式
    *       <标签 v-bind:属性名="变量名">
    * 语法2：简化模式
    *       <标签 :属性名="变量名">   //v-bind可以省略
    * 注意： <标签 属性名="{{变量名}}"> 这是不可以的，插入值表达式{{变量名}} 只能放在标签体内
    * */
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com/",
            cls:"my"
        }
    });
</script>
</html>