Vue-第二章基本指令

于 2022-01-06 09:21:37 发布
阅读量549 收藏
点赞数
分类专栏： # Vue 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55959870/article/details/122336509
版权

目录

2.1Vue模板语法

2.2绑定类样式和内连样式

2.3条件渲染指令

2.4事件绑定

2.1Vue模板语法

文本
双大括号{{message}}
不变化值内容<span v-once>{{message}}</span>
代替大括号 <span v-text="message">
可以输出h5代码<span v-html="message">

2.2绑定类样式和内连样式


vue绑定类样式：对象语法和数组语法
1.对象语法
<div v-bind:class="类样式名:绑定数据,---"></div>
2.数组语法
<div v-bind:class="[绑定数据1,绑定数据2---]">

 对象语法
 <style>
      #app {
      width:600px;
      margin:50px auto;
      }
          #app .border {
           width:300px;
           height:300px;
           border:solid 2px yellow;
          }
          #app .shadow {
            box-shadow:0 0 10PX #888888;
          }
          #app .backcolor {
           background-color:#6715ff;
          }
          #app .hover {
          transition:all 1s 0s;
          }
          #app .hover:hover {
              width:200px;
              height:200px;
              background-color:red;
              transition:all 1s 0s;
          }
  </style>
   
</head>
<body>
      <script src="Scripts/vue.min.js"></script>
      <link href="Content/ElementUI/element-ui.css" rel="stylesheet" />
      <script src="Scripts/ElementUI/element-ui.js"></script>

    <div id="app">
        <p>
            <input type="checkbox" v-model="isborder"/>边框
            <input type="checkbox" v-model="isshadow"/>阴影
            <input type="checkbox" v-model="isbackcolor"/>背景
            <input type="checkbox" v-model="ishover"/>动画
        </p>
        <div
            v-bind:class="{
            border:isborder,
            shadow:isshadow,
            backcolor:isbackcolor,
            hover:ishover
            }">

        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isborder: true,
                isshadow: true,
                isbackcolor: true,
                ishover: true
            },
        });
    </script>
</body>
数组语法

    <div id="app">
        <p>
         数组语法绑定类样式属性
        </p><%--v-bind可省略--%>
        <div :class="[borderClass,shadowClass,backColoClass]"></div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                borderClass: "border",
                shadowClass: "shadow",
                backColoClass: "backcolor",
            },
        });
    </script>

vue绑定内联样式
1.对象语法
<div v-bind:style="样式名"></div>
是一个JavaScript对象，css属性名可以用驼峰式(camelCase)
或短横线分隔(kebab-case)需要用引号括起来命名

2.数组语法
<div v-bind:style="[类样式名1,类样式名2,...]"></div>
可以将uoge样式对象应用到同一元素上

<style>
      #app {
      width:600px;
      margin:50px auto;
      }
</style>
 <div id="app">
        <p>
        对象语法绑定内联样式
        </p>
        <img src="/imges/flower.jpg" alt="花" v-bind:style="Style" />
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                Style: {
                    width: "450px",
                    height:"400px",
                    "box-shadow": "0 5px 15px 5px #888888",/*kebab-case命名*/
                    borderRadius: "50px"   /*camelCase命名*/
                }     
            },
        });
    </script>
<style>
#app{
width: 600px;
margin:50px auto;
}
</style>

<div id="app">
        <p>
         数组语法绑定内联样式
        </p>
        <img v-bind:src="imgSrc" alt="花" v-bind:style="[baseStyle,extendStyle]" />
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                imgSrc: "imges/flower.jpg",
                baseStyle: {
                    width: "450px",
                    height:"400px"
                },
                extendStyle: {
                    "box-shadow": "0 5px 15px 5px #888888",
                    borderRadius: "50px",
                    border:"sold 15px #FFFFFF"
                }     
            },
        });
    </script>

2.3条件渲染指令


v-if指令和v-show指令
运行时条件很少改变用v-if
如需频繁切换则用v-show

v-if和v-else

 <style>
          #app {
          width:600px;
          margin:50px auto;
          }
          .box{
           box-shadow:0 0 5px 5px #888888;
           padding:20px 100px;
           border-radius:5px;
           margin-top:20px;
          }
  </style>
   
</head>
<body>
      <script src="Scripts/vue.min.js"></script>
      <link href="Content/ElementUI/element-ui.css" rel="stylesheet" />
      <script src="Scripts/ElementUI/element-ui.js"></script>

    <div id="app">
        <p>
         用户登录/注册
        </p>
        <input type="checkbox" v-model="isRegUser" />是注册
        <div class="box">
            <div v-if="isRegUser">
                <h3>用户注册</h3>
                <p>
                    <label for="txtLoginId">登录账户:</label>
                    <input type="text" id="txtLoginId" placeholder="请输入登录账号..." />
                </p>
                 <p>
                    <label for="txtLoginPwd">登录密码:</label>
                    <input type="text" id="txtLoginPwd" placeholder="请输入登录密码..." />
                </p>
                 <p>
                    <label for="txtVLoginId">登录账户:</label>
                    <input type="text" id="txtVLoginId" placeholder="请输入确认密码..." />
                </p>
            </div>
            <div v-else>
            <h3>用户登录</h3>
                    <p>
                        <label for="txtLoginId">登录账户:</label>
                        <input type="text" id="txtLoginId" placeholder="请输入登录账号..." />
                    </p>
                     <p>
                        <label for="txtLoginPwd">登录密码:</label>
                        <input type="text" id="txtLoginPwd" placeholder="请输入登录密码..." />
                    </p>
            </div>
        </div>   
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: { 
                isRegUser:true
            }
        });
    </script>

v-show

 <div id="app">
        <p>
         用户登录/注册
        </p>
        <input type="checkbox" v-model="isRegUser" />是注册
        <div class="box">
            <div v-show="isRegUser">
                <h3>用户注册</h3>
                <p>
                    <label for="txtLoginId">登录账户:</label>
                    <input type="text" id="txtLoginId" placeholder="请输入登录账号..." />
                </p>
                 <p>
                    <label for="txtLoginPwd">登录密码:</label>
                    <input type="text" id="txtLoginPwd" placeholder="请输入登录密码..." />
                </p>
                 <p>
                    <label for="txtVLoginId">登录账户:</label>
                    <input type="text" id="txtVLoginId" placeholder="请输入确认密码..." />
                </p>
            </div>
            <div v-show="!isRegUser">
            <h3>用户登录</h3>
                    <p>
                        <label for="txtLoginId">登录账户:</label>
                        <input type="text" id="txtLoginId" placeholder="请输入登录账号..." />
                    </p>
                     <p>
                        <label for="txtLoginPwd">登录密码:</label>
                        <input type="text" id="txtLoginPwd" placeholder="请输入登录密码..." />
                    </p>
            </div>
        </div>   
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: { 
                isRegUser:true
            }
        });
    </script>

2.4事件绑定

当模板渲染完成之后，就可以进行事件的绑定与监听。Vue提供
了v-on指令 用来监听DOM事件，通常在HTML内使用v-on指令绑
定事件，不像传统方式在js中获取DOM元素，再绑定事件处理函数。
1.v-on指令
v-on指令监听DOM事件，并在触发时运行一些JavaScript代码 。
通过v-on指令可以绑定Vue实例选项参数methods中的方法作为事
件的处理代码,“v-on:” 后参数接受所有的原生事件名称。
<button v-on:click='事件处理方法'>按钮</div>

2.事件修饰符
在JavaScript的事件处理程序中- -般调用event.preventDefault()方
取消事件的默认动作，以及调用event.stopPropagation()方法阻止事件冒治
Vue为v-on指令提供了多个事件修饰符，而事件修饰符都是由点开
的指令后缀来表示的，并且事件修饰符可串联使用。主要修饰符有以下5利
(1).stop: 等同于调用event.stopPropagation()方法。
(2).prevent:等同于调用event.preventDefault() 方法。
(3).capture:使用capture模式添加事件监听器。
(4).self: 只有当事件是从监听元素本身触发时才触发回调。
(5).once:点击事件将只会触发一次。
 

 v-on指令
<style>
          #app {
          width:600px;
          margin:50px auto;
          }
          .box{
           box-shadow:0 0 5px 5px #888888;
           padding:20px 100px;
           border-radius:5px;
           margin-top:20px;
          }
  </style>
   
</head>
<body>
      <script src="Scripts/vue.min.js"></script>
      <link href="Content/ElementUI/element-ui.css" rel="stylesheet" />
      <script src="Scripts/ElementUI/element-ui.js"></script>

    <div id="app">
        <h1>加减乘除</h1>
        <p>
            <lable for="txtNum1">数字1：</lable>
            <input type="text" id="txtNum1" v-model="num1"/>
        </p>
        <p>
            <lable for="txtNum2">数字2：</lable>
            <input type="text" id="txtNum2" v-model="num2"/>
        </p>
        <p>
            <button v-on:click="doAdd(event)">加法</button>
            <button @click="doSub(event)">减法</button>
            <button @click="alert(vm.num1*vm.num2)">乘法</button>
            <button @click="doDiv">除法</button>
        </p>
        <p>
            <label for="txtResult">结果是：</label> 
            <input type="text" id="txtResult"  v-model="result"/>
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num1: 0,
                num2: 0,
                result:0
            },
            methods:{
                doAdd: function (e) {
                    this.result = parseInt(this.num1) + parseInt(this.num2)
                    console.log("加法",e);
                },
                doSub: function (e) {
                    this.result = parseInt(this.num1) - parseInt(this.num2)
                    console.log("减法", e);
                },
                doDiv: function () {
                    try {
                        this.result = parseInt(this.num1) / parseInt(this.num2)
                    } catch (ex) {
                        alert(ex.messages);
                    }
                }   
            }
        });
    </script>
</body>
事件修饰符
  <style>
          #app {
          width:600px;
          margin:50px auto;
          }
          .box{
          width:400px;
          height:200px;
          line-height:200px;
          border:solid 2px red;
          text-align:center;
          }
          button {
          height:150px;
          }
  </style>
   
</head>
<body>
      <script src="Scripts/vue.min.js"></script>
      <link href="Content/ElementUI/element-ui.css" rel="stylesheet" />
      <script src="Scripts/ElementUI/element-ui.js"></script>

    <div id="app">
        <div class="box" v-on:click="saySelf('div的click事件触发')" v-on:click.self="saySelf('div自己的click事件触发')">
            <button v-on:click="saySelf('button的click事件触发')">按钮事件并冒泡</button>
            <button v-on:click.stop="saySelf('button的click事件触发')">按钮事件不冒泡</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",    
            methods:{
                saySelf(e) {
                    console.log(e);
                }
            }
        });
    </script>
</body>

张飞飞啦啦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值