一遍关于vue基础语法下篇

简介: 一遍关于vue基础语法下篇

一.事件处理器

事件修饰符

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

  •  .stop
  •  .prevent
  •  .capture
  •  .self
  •  .once

按键修饰符

 Vue允许为v-on在监听键盘事件时添加按键修饰符:

全部的按键别名:

  •  .enter
  •  .tab
  •  .delete (捕获 "删除" 和 "退格" 键)
  •  .esc
  •  .space
  •  .up
  •  .down
  •  .left
  •  .right
  •  .ctrl
  •  .alt
  •  .shift
  •  .meta      
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <title>处理事件</title>
  <style>
        .red{
          width: 400px;
          height: 400px;
          background-color: red;
        }
        .orange{
          width: 300px;
          height: 300px;
          background-color: orange;
        }
        .blue{
          width: 200px;
          height: 200px;
          background-color: blue;
        }
        .aqua{
          width: 100px;
          height: 100px;
          background-color: aqua
        }
      </style>
</head>
<body>
  <div id="app">
    <div class="red" @click="red">
        <div class="orange" @click.stop="orange">
          <div class="blue" @click.stop="blue">
            <div class="aqua" @click.stop="aqua">
            </div>
            </div>
        </div>
        </div>
        <button @click.once="dosub">点击</button>
        <input value="msg" />
    </div>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data() {
      return{
        msg:'呵呵呵呵呵呵!!!'
      };
       },
     methods: {
            red() {
              alert("red");
            },
            orange() {
              alert("orange");
            },
            blue() {
              alert("blue");
            },
            aqua() {
              alert("aqua");
            },
          dosub(){
            console.log(this.msg);
          }
      }
    })
  </script>
</body>
</html>

演示效果:

二.表单

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <title>表单</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li>
          <label>姓名:</label><input v-model="uname" /><br />
          <label>密码:</label><input v-model="upwd" type="password" /><br />
          <!-- 将用户的输入值转为 Number 类型 -->
          <label>年龄:</label><input v-model.number="age" /><br />
          <label>性别:</label>
          <input type="radio" v-model="sex" name="sex" value="1" />男
          <input type="radio" v-model="sex" name="sex" value="0" />女<br />
          <label>爱好:</label>
          <div v-for="h in hobby">
            <input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
          </div>
          <label>籍贯:</label>
          <select v-model="type">
            <option value="-1">===请选择===</option>
            <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
          </select><br />
          <label>备注:</label>
          <textarea v-bind:value="mark"></textarea><br />
          同意<input type="checkbox" v-model="flag" />
          <input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
        </li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data() {
        return {
          uname: null,
          upwd: null,
          age: 10,
          sex: 1,
          hobby: [{
            id: 1,
            name: '喝茶'
          }, {
            id: 2,
            name: '养身'
          }, {
            id: 3,
            name: '娱乐'
          }],
          hobbies: [],
          types: [{
            id: 1,
            name: '湖南'
          }, {
            id: 2,
            name: '湖北'
          }, {
            id: 3,
            name: '广东'
          }],
          type: null,
          mark: '个人喜好',
          flag: false
        }
      },
      computed: {
        show: function() {
          return !this.flag;
        }
      },
      methods: {
        doSubmit: function() {
          console.log('doSubmit')
          var obj = {
            uname: this.uname,
            upwd: this.upwd,
            age:this.age+10,
            sex: this.sex,
            hobbies:this.hobbies,
            type: this.type,
            mark: this.mark,
          }
          console.log(obj);
        }
      }
    })
  </script>
</html>

演示效果:

三.组件通信父转子

. vue组件


 组件简介


     组件(Component)是Vue最强大的功能之一


     组件可以扩展HTML元素,封装可重用的代码


     组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树


 全局和局部组件


     全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。


     局部组件: new Vue({el:'#d1',components:{...}})


     注册后,我们可以使用以下方式来调用组件:


     <tagName></tagName>


 props


     props是父组件用来传递数据的一个自定义属性。


     父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 "prop"  

演示效果:

四.组件通信子转父

自定义事件


  监听事件:$on(eventName)


  触发事件:$emit(eventName)


  注1:Vue自定义事件是为组件间通信设计  


       vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定


 


       父Vue实例->Vue实例,通过prop传递数据


       子Vue实例->父Vue实例,通过事件传递数据


  注2:事件名


       不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称


       建议使用“短横线分隔命名”,例如:three-click

演示效果:

好啦,今天的分享就到这了,希望能够帮到你呢!😊😊

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

热门文章

最新文章