zoukankan      html  css  js  c++  java
  • 绑定属性的指令-v-bind 缩写:属性="data里边定义的名字" 点击事件v-on:click="" 缩写@click="方法名"

     将鼠标放到按钮上,显示提示,---原始固定语法--
     <input type="button" value="按钮"  title="mytitle"> 
    提示:这里data虽然定义了变量mytitle的内容,但是不会显示,只显示mytitle
    应该为变量--是一个可以传递的属性值
    <input type="button" value="按钮"   v-bind:title="mytitle"> 
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈,我是一个大大的H1, 我大,我骄傲</h1>',
            mytitle: '这是一个自己定义的title'
          },
          methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function () {
              alert('Hello')
            }
          }
        })
    

      

     <!-- v-bind: 是 Vue中,提供的用于绑定属性的指令 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '123'">
        <!-- 注意: v-bind: 指令可以被简写为 :要绑定的属性 -->
        <!-- v-bind 中,可以写合法的JS表达式 -->
    
        <!-- Vue 中提供了 v-on: 事件绑定机制 -->
        <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->
    
    
        <input type="button" value="按钮" @click="show">

    鼠标移到按钮上的事件--v-on:mouseover

    原生操作dom事件-

     /* document.getElementById('btn').onclick = function(){
          alert('Hello')
        } */

      

    <!--v-bind   Vue提供的属性绑定机制   缩写是 : -->
    <!--v-on     Vue提供的事件绑定机制   缩写是 @ -->
  • 相关阅读:
    caffe BUG
    Ubuntu安装低版本gcc
    OpenCV的CV :: findHomography运行时错误
    opencv中使用 SURF算法匹配的遇到的问题
    C++ 类中特殊的成员变量(常变量、引用、静态)的初始化方法 --转
    SIFI与surf
    opencv复习
    opencv老版本的IplImage使用
    python学习笔记-对象持久化保存与恢复
    Styles and Themes
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11579645.html
Copyright © 2011-2022 走看看