VUE②

我是个菜鸡.

于 2021-04-18 17:20:14 发布

阅读量113

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_45988242/article/details/115835170

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.事件处理

绑定监听

显示按钮innerHTML以及参数，event是默认带的参数

 <div id="demo">
        <h1>监听</h1>
        <button @click="test1('test1的参数')">我是test1</button>
        <button @click="test2">我是test2</button>
        <button @click="test3('test3的参数')">我是test3</button>
    </div>
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#demo',
            data:{

            },
            methods: {
                test1(msg){
                    alert(msg)
                },
                test2(){
                    //虽然test2没有参数 默认是($event)
                    alert('test2的中间文字是：'+event.target.innerHTML)
                },
                test3(msg){
                    //虽然test2没有参数 默认是($event)
                    alert('参数信息是'+msg+'****test3的中间文字是：'+event.target.innerHTML)
                },
            }
            
        })
    
    </script>

事件修饰符

停止事件冒泡

  <div style="width:200px; height:200px; background:red "@click="test5">
            <div style="width:100px; height:100px; background:black "@click.stop="test6">

            </div>

        </div>
           <script type="text/javascript">
        new Vue({
            el:'#demo',
            data:{

            },
            methods: {
                test1(msg){
                    alert(msg)
                },
                test2(){
                    //虽然test2没有参数 默认是($event)
                    alert('test2的中间文字是：'+event.target.innerHTML)
                },
                test3(msg){
                    //虽然test2没有参数 默认是($event)
                    alert('参数信息是'+msg+'****test3的中间文字是：'+event.target.innerHTML)
                },
                test5(){
                        alert('out')
                },
                test6(){
                    alert('inner')
                }
            }
            
        })
    
    </script>

在这里插入图片描述当我点击黑色区域会弹出两个alert 利用stop 只弹出inner
.stop

停止事件默认行为

点击后弹窗且不跳转到响应的网页

   <a href="http://www.baidu.com" @click="test7">去百度</a>
   <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
  test7(){
         alert('点击了去百度')
           }

按键修饰符

需求：输入后回车弹出输入内容

<script type="text/javascript">
        new Vue({
            el:'#demo',
            data:{

            },
            methods: {

                test1(msg){
                    alert(msg)
                },
                test2(){
                    //虽然test2没有参数 默认是($event)
                    alert('test2的中间文字是：'+event.target.innerHTML)
                },
                test3(msg){
                    //虽然test2没有参数 默认是($event)
                    alert('参数信息是'+msg+'****test3的中间文字是：'+event.target.innerHTML)
                },
                test5(){
                        alert('out')
                },
                test6(){
                    alert('inner')
                },
                test7(){
                    alert('点击了去百度')
                },
                test8(){
                    alert(event.target.value)
                }
            }
            
        })

 <h1>按键修饰符</h1>
        <input type="text" @keyup.13="test8">
        <input type="text" @keyup.enter="test8">

二.表单的自动收集

 <div id="demo">
        <form action="" @submit.prevent="handleSubmit">
            <span>用户名：</span>
            <input type="text" v-model="username"><br>
            <span>密码：</span>
            <input type="password" v-model="pwd"><br>
            <span>性别：</span>
            <input type="radio" id="female" v-model="sex" value="女">
            <label for="female">女</label><br>
            <input type="radio" id="male" v-model="sex" value="男">
            <label for="male">男</label><br>
            <span>爱好：</span>
            <input type="checkbox" id="basket" value="basket" v-model="likes">
            <label for="basket">篮球</label>
            <input type="checkbox" id="foot" value="foot" v-model="likes">
            <label for="foot">足球</label>
            <input type="checkbox" id="pingpang"  value="pingpang"  v-model="likes">
            <label for="pingpang">乒乓球</label>
            <br>
            <select v-model="cityId">
                <option value="">未选择</option>
                <!-- 我们往后台传的应该是 id 所以 得用:value 直接value它无法识别 -->
                <option :value="city.id" v-for="(city,index) in allCity" :key="index">{{city.name}}</option>
            </select>
            <input type="submit" value="注册">
        </form>

    </div>

在这里插入图片描述

这里用到：value传回id 
  <option :value="city.id" v-for="(city,index) in allCity" :key="index">{{city.name}}</option>

三. 动画

添加进入/离开过渡

官方文档：在这里插入图片描述

<style>
      .xxx-enter-active, .xxx-leave-active 
      {
            transition: opacity .5s;
      }
      .xxx-enter, .xxx-leave-to 
       {
         opacity: 0;
        }
    </style>
    

<div id="demo">
      <button @click="isShow=!isShow">点我</button>
      <transition name="xxx" mode="">
        <p v-show="isShow">hello</p>
      </transition>   
</div>
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript">
     new Vue({
        el:'#demo',
        data () {
            return {
                isShow:true
            }
        }
    })
    </script>

在这里插入图片描述点了会产生渐入渐出的效果

CSS过渡

CSS过渡
在这里插入图片描述

 .move-enter-active
         {
            transition: all .3s;
         }
         .move-leave-active
         {
            transition: all 2s;
         }
         .move-enter, .move-leave-to 
       {
         opacity: 0;
         transform: translateX(20px);
        }
 <div id="test">
    <button @click="isShow=!isShow">move</button>
    <transition name="move" mode="">
      <p v-show="isShow">move→</p>
    </transition>
     new Vue({
        el:'#test',
        data () {
            return {
                isShow:true
            }
        }
    })

在这里插入图片描述

四.过滤器

过滤器语法{{date | dateString}}与{{date | dateString(‘YYYY-MM-DD’)}}

这并不是动态的哦！
在这里插入图片描述
moment.js官网文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div id="demo">
        <h2>显示日期</h2>
        <p>{{date}}</p>
        <!-- 过滤器语法 -->
        <p>完整时间：{{date | dateString}}</p>
        <p>年月日：{{date | dateString('YYYY-MM-DD')}}</p>
        <p>时分秒：{{date | dateString('HH:mm:ss')}}</p>
    </div>
    <script  type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.min.js"></script>
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript">
        Vue.filter('dateString',function(value,format){
            return moment(value).format(format||'YYYY-MM-DD HH:mm:ss')
        })
        new Vue({       
            el:'#demo',
            data:{
               date:new Date()
            }
        })
    </script>
</body>
</html>

五. 指令

							-----------
							常用内置指令
							-----------
1) v:text : 更新元素的 textContent
2) v-html : 更新元素的 innerHTML
3) v-if : 如果为 true, 当前标签才会输出到页面
4) v-else: 如果为 false, 当前标签才会输出到页面
5) v-show : 通过控制 display 样式来控制显示/隐藏
6) v-for : 遍历数组/对象
7) v-on : 绑定事件监听, 一般简写为@
8) v-bind : 强制绑定解析表达式, 可以省略 v-bind
9) v-model : 双向数据绑定
10) ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
11) v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

ref 与 refs

 <div id="demo">
        <p ref="content">what????</p>
        <button @click="hint">提示</button>
    </div>
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript">
       
        new Vue({       
            el:'#demo',
            data:{
               date:new Date()
            },
            methods: {
                hint(){
                    alert(this.$refs.content.textContent)
                }
            }
        })
    </script>

消除这种现象

在这里插入图片描述

 <style>
    /* 属性选择器~ */
  [v-cloak]
  {
    display: none;
  }
    </style>
    <p v-cloak>{{date}}</p>

在这里插入图片描述

六. 使用vue-cli创建模板项目

创建vue项目

在这里插入图片描述

七. 基于脚手架编写项目

组件就是局部功能模块

我是个菜鸡.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE②

目录一.事件处理绑定监听显示按钮innerHTML以及参数，event是默认带的参数事件修饰符停止事件冒泡停止事件默认行为按键修饰符一.事件处理绑定监听显示按钮innerHTML以及参数，event是默认带的参数 <div id="demo"> <h1>监听</h1> <button @click="test1('test1的参数')">我是test1</button> <button
复制链接

扫一扫