vue的模板语法(下篇)

简介: vue的模板语法(下篇)

一.事件处理

Vue通过由点(.)表示的指令后缀来调用修饰符,

 .stop

 .prevent

 .capture

 .self

 .once

如下:

阻止单击事件冒泡

         <a v-on:click.stop="doThis"></a>

提交事件不再重载页面

         <form v-on:submit.prevent="onSubmit"></form>

修饰符可以串联

         <a v-on:click.stop.prevent="doThat"></a>

只有修饰符

         <form v-on:submit.prevent></form>

添加事件侦听器时使用事件捕获模式

         <div v-on:click.capture="doThis">...</div>

只当事件在该元素本身(而不是子元素)触发时触发回调

         <div v-on:click.self="doThat">...</div>

click 事件只能点击一次

         <a v-on:click.once="doThis"></a>

来看一下单击冒泡事件:

       创建四个容器:
  <!-- 定义边界 -->
    <div id="contect">
      <div class="one"  @click="fun1">
        <div class="two"  @click="fun2">
          <div class="three"  @click="fun3">
            <div class="four" @click="fun4"></div>
          </div>
        </div>
      </div>
    </div>
给它们添加不同的颜色和大小:
<style type="text/css">
      .one{
        background-color: lightpink;
        height: 400px;
        width: 400px;
      }
      .two{
        background-color: cyan;
        height: 300px;
        width: 300px;
      }
      .three{
        background-color: fuchsia;
        height: 200px;
        width: 200px;
      }
      .four{
        background-color: lime;
        height: 100px;
        width: 100px;
      }
    </style>
最后写方法,点击事件:
<script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
          };
        },
        methods:{
          fun1(){
            alert("fun1")
          },
          fun2(){
            alert("fun2")
          },
          fun3(){
            alert("fun3")
          },
          fun4(){
            alert("fun4")
          }
        }
      })
    </script>

效果:

这就冒泡事件,如果要阻止,就要通过.stop来实现

效果:

       其他的也是一样的,大家可以试一试!!

二.表单的综合案例

       首先先造一些数据:
<script type="text/javascript">
      new Vue({
        el:"#contect",
        data(){
          return{
            name:"海绵宝宝",
            pwd:"123123",
            sexList:[{
              name:"公",id:1
            },{
              name:"母",id:2
            },{
              name:"未知",id:3
            }],
            sex:"1",
            hobby:[{
              name:"吹泡泡",id:1
            },{
              name:"抓水母",id:2
            },{
              name:"做蟹堡",id:3
            }],
              myHobby:[],
            address:[{
              name:"太平洋",id:1
            },{
              name:"大西洋",id:2
            },{
              name:"北冰洋",id:3
            },{
              name:"印度洋",id:4
            }],
            myAddr:null,
            sign:null,
            ok:false
          };
        }
      })
    </script>
接着搭建界面;
<!-- 定义边界 -->
    <div id="contect">
      姓名:<input name="name" v-model="name"/><br />
      密码:<input type="password" v-model="pwd"/><br />
      性别:<span v-for="s in sexList">
        <input type="radio" name="sex" v-model="sex" :value="s.id"/>{{s.name}}
      </span><br />
      地址:<select name="myAddr" v-model="myAddr" >
        <option v-for="a in address" :value="a.id">{{a.name}}</option>
      </select><br />
      爱好:<span v-for="h in hobby"  >
        <input type="checkbox"  v-model="myHobby" name="myHobby":value="h.id"/>{{h.name}}
      </span><br />
      个人简介:<textarea v-model="sign" cols="18" rows="4"></textarea> <br />
      同意:<input type="checkbox" v-model="ok"/><br />
    <button v-show="ok" @click="submit()"> 提交</button>
    </div>
   
 搭建好之后就来写方法,  保存json格式数据
methods:{
          submit(){
            var obj={};
            obj.name=this.name;
            obj.pwd=this.pwd;
            obj.sex=this.sex;
            obj.address=this.myAddr;
            obj.hobby=this.myHobby;
            obj.sign=this.sign;
            console.info(obj);
          }
        }

最后打印看结果:

三.组件通信⭐⭐

       3.1 自定义组件

       原本是没有<my-button>这个按钮属性
<div id="contect">
      <p>自定义组件</p>
      <my-button>我的按钮</my-button>
    </div>
       写方法实现:
<script type="text/javascript">
      new Vue({
        el:"#contect",
        components:{
          "my-button":{
            template:"<button>{{我的按钮}}</button>"
          }
        },
      })
    </script>

3.2 组件通信之父传子

--父组件向子组件传递数据(props)和子组件向父组件传递数据(事件)

在父组件中,可以通过在子组件标签上使用属性来传递数据。子组件可以通过在组件定义的选项中声明 props 来接收父组件传递的数据
加了一个属性,me
<!-- 定义边界 -->
    <div id="contect">
      <p>组件通信父传子</p>
      <my-button me="潇洒姿"></my-button>
    </div>
<script type="text/javascript">
      new Vue({
        el:"#contect",
        components:{
          "my-button":{
            props:["me"],
            template:"<button>{{me}}</button>"
          }
        }
      })
    </script>

3.3组件通信之子传父

      在子组件中,可以通过触发自定义事件来将数据传递给父组件。父组件可以通过在子组件标签上监听对应的事件来接收子组件传递的数据。

<div id="contect">
      <p>组件通信子传父</p>
      <my-button me="潇洒姿" @xxx="getParam"></my-button>
    </div>
<script type="text/javascript">
      new Vue({
        el:"#contect",
        components:{
          "my-button":{
            props:["me"],
            template:"<button @click='clickMe'>{{me}}</button>",
            methods:{
              clickMe(){
                let name="张三";
                let bname="我的高中暗恋故事";
                let price="无价";
                this.$emit("xxx",name,bname,price)
              }
            }
          }
        },
        methods:{
          getParam(a,b,c){
            console.info(a,b,c);
          }
          }
      })
    </script>

效果:

今天的分享就到这啦!!!

目录
打赏
0
0
0
0
3
分享
相关文章
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
78 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
114 8
Vue1.0常用语法
var vm = new Vue({   el: "选择器", 挂载到页面的那个元素里,即确定vue的作用范围 外部可通过vm.$el访问,得到的是一个原生dom元素,可进行对应操作   a: '', //自定义属性 外部可通过vm.$options访问   data: {
3597 0
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
161 1
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
85 1
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
116 58
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等