vue模板语法下集->事件处理器,表单的综合案例,组件通信

简介: vue模板语法下集->事件处理器,表单的综合案例,组件通信
  • 事件处理器
  • 表单的综合案例
  • 组件通信

1.事件处理器

实现功能:原来每点击一下最里面颜色外层,有几层会弹出几下,加上@click.stop后不管第几层只会弹一下;原本点击几下"点我"后台就会显示点了几下,加上@click.once后不管点击几下,后台只显示一次

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>事件处理</title>
    <style type="text/css">
      .one{
        background-color: red;
        height: 400px;
        width: 400px;
      }
      .two{
        background-color: blue;
        height: 300px;
        width: 300px;
      }
      .three{
        background-color: yellow;
        height: 200px;
        width: 200px;
      }
      .four{
        background-color: pink;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="one" @click.stop="fun1">
        <div class="two" @click.stop="fun2">
          <div class="three" @click.stop="fun3">
            <div class="four" @click.stop="fun4"></div>
          </div>
        </div>
      </div>
      <input :value="msg"/>
      <button @click.once="clickMe">点我</button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return{
            msg:'hello 小兵',
          };
        },
        methods:{
          fun1(){
            alert("fun1");
          },
          fun2(){
            alert("fun2");
          },
          fun3(){
            alert("fun3");
          },
          fun4(){
            alert("fun4")
          },
          clickMe(){
            console.log(this.msg)
          }
        }
      });
    </script>
  </body>
</html>

2.表单的综合案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>表单综合案例</title>
  </head>
  <body>
    <div id="app">
      姓名:<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 adress" :value="a.id">{{a.name}}</option>
      </select><br>
      爱好:<div v-for="h in hobby" >
        <input type="checkbox" name="myLike" v-model="myLike" :value="h.id"/>{{h.name}}
      </div> <br />
      个人简介:<textarea v-model="sign" cols="10" rows="5"></textarea><br>
            同意:<input type="checkbox" v-model="ok"/><br>
      <button v-show="ok" @click="dosub">提交</button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return{
            name:'小兵',
            pwd:'123456',
            sexList:[{
              name:'男',id:1
            },{
              name:'女',id:2
            },{
              name:'未知',id:3
            }],
            sex:1,
            hobby:[{
              name:'保健',id:1
            },{
              name:'理发',id:2
            },{
              name:'洗头',id:3
            },{
              name:'养生',id:4
            }],
                myLike:[],
            adress:[{
                  name:'湖南',id:1
              },{
                name:'陕西',id:2
              },{
                name:'江西',id:3
              },{
                name:'哈尔滨',id:4
            }],
            myAddr:null,
            sign:null,
            ok:false
          };
        },
        methods:{
          dosub(){
            var obj={};
            obj.name=this.name;
            obj.pwd=this.pwd;
            obj.sex=this.sex;
            obj.adress=this.adress;
            obj.love=this.myLove;
            obj.sign=this.sign;
            console.log(obj);
          }
        }
      });
    </script>
  </body>
</html>

3.组件通信

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>组件传参父传子</title>
  </head>
  <body>
    <div id="app">
      <p>自定义组件</p>
      <my-button>xx</my-button>
      <p>组件通信父传子</p>
      <my-button ma='ss'></my-button>
      <p>组件通信父传子2</p>
      <my-button ma='ss' n="10"></my-button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        components:{
          'my-button':{
            props:['ma'],
            template:'<button @click="clickMe">被{{ma}}点击了{{n}}次</button>',
            data:function(){
              return{
                n:1
              }
              },
              methods:{
                clickMe(){
                  this.n++;
                }
                } 
              },
        },
        data(){
          return{
            msg:'hello 小兵'
          };
        },
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>组件传参子传父</title>
  </head>
  <body>
    <div id="app">
      <p>组件通信子传父</p>
      <my-button ma='ss' @xxx="getParam"></my-button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        components:{
          'my-button':{
            props:['ma'],
            template:'<button @click="clickMe">被{{ma}}点击了</button>',
            data:function(){
              return{
                n:1
              }
              },
              methods:{
                clickMe(){
                  let name='溜冰';
                  let bname='芊芊来了';
                  let price='免费';
                  this.$emit('xxx',name,bname,price)
                }
                } 
              },
        },
        data(){
          return{
            msg:'hello 小兵',
          }
        },
          methods:{
              getParam(a,b,c){
                console.log(a,b,c);
              }
          }   
      });
    </script>
  </body>
</html>

目录
相关文章
|
1天前
|
JavaScript
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
6 0
|
1天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
4 0
|
1天前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
4 0
|
1天前
|
JavaScript 前端开发
vue 实现在线预览PDFpdf文件
vue 实现在线预览PDFpdf文件
7 0
|
1天前
|
JavaScript
vue下拉列表
vue下拉列表
5 0
vue下拉列表
|
1天前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
|
2天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
4 0
|
3天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
5 0
|
4天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
4天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
12 0