vue学习（2）

最新推荐文章于 2024-05-30 11:27:58 发布

____@

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量308

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_60179418/article/details/123212998

版权

事件处理

绑定监听

三种绑定事件的方法：

v-on:xxx="fun"

@xxx="fun"

@xxx="fun(参数)"

默认事件形参：event 隐含属性对象：$event

事件修饰符

.prevent：阻止事件的默认行为 event.preventDefault()

.stop：停止事件冒泡 event.stopPropagation()

按键修饰符

xxx.keyCode：操作的是某个keycode值的键

xxx.enter：操作的是回车键

其中"xxx"指的是某个与按键有关的事件

<body>
    <div id="app">
        <h2>绑定监听</h2>
        <button @click="test1_1">test1_1</button>   <!--无参数，函数自动传递event-->
        <button @click="test1_2(123,$event)">test1_2</button>   <!--//有参数，需要手动添加event-->
        <h2>事件修饰符</h2>
        <div style="width: 200px; height: 200px; background-color: antiquewhite;" @click="test2_1">
            <div style="width: 100px; height: 100px; background-color: aqua;" @click.stop="test2_2"></div>
        </div>
        <a href="https://www.baidu.com" @click.prevent="test2_3">百度</a>
        <h2>按键修饰符</h2>
        <input type="text" @keyup.13="test3_1">
        <input type="text" @keyup.enter="test3_1">
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods: {
            test1_1(event){
                alert(event.target.innerHTML);
            },
            test1_2(number,event){
                alert(number+' '+event.target.innerHTML);
            },

            test2_1(){
                alert("out");
            },
            test2_2(){
                alert("inner");
            },
            test2_3(){
                alert("baidu");
            },

            test3_1(event){
                alert(event.target.value);
            }

        },
    });
</script>

表单数据的自动收集

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_表单输入绑定</title>
</head>
<body>
<!--
1. 使用v-model(双向数据绑定)自动收集数据
  text/textarea
  checkbox
  radio
  select
-->
<div id="demo">
  <form action="/xxx" @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" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <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>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介绍: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  });
</script>
</body>
</html>

Vue实例的生命周期

初始化显示

beforeCreate()
created()
beforeMount()
mounted()

更新状态

beforeUpdate()
updated()

销毁vue实例：vm.$destroy()

beforeDestroy()
destroyed()

常用的生命周期方法

mounted()：初始化显示之后立即调用。用于发送ajax请求，启动定时器等异步任务

beforeDestroy()：死亡前立即调用。做收尾工作，如清除定时器等

<body>
    <div id="app">
        <button @click="destroyVM">Destroy vm</button>
        <p v-show="isShow">星辰</p>
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            isShow:true,
        },
        //初始化阶段
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {     //初始化显示之后立即调用（1次）
            console.log('mounted');
            this.timer=setInterval(()=>{   //若使用普通函数，this所指的不是vm。故使用箭头函数
                this.isShow=!this.isShow;
            },1000)
        },
        //更新阶段
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('Update');
        },
        beforeDestroy() {   //死亡前调用（1次）
            console.log('beforeDestroy');
            clearInterval(this.timer);
        },
        destroyed() {
            console.log('destroyed');
        },
        methods: {
            destroyVM(){
                this.$destroy();
            }
        },
    });
</script>

过渡&动画

vue动画的理解

1）操作css的transition或animation

2）vue会给目标元素添加 / 移除特定的class

3）过渡的相关类名

xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter，xxx-leave-to：指定隐藏时的transition

    <style>
        /* 显示/隐藏的过渡效果 */
        .xxx-enter-active{
            transition: all .5s;
        }
        .xxx-leave-active{
            transition: all 1.5s;
        }
        /* 隐藏时的样式 */
        .xxx-enter,.xxx-leave-to{
            opacity: 0;
            transform: translateX(50px);
        }        
    </style>
</head>
<body>
    <div id="app">
        <button @click="isShow=!isShow">button</button>
        <transition name="xxx">
            <p v-show="isShow">星辰</p>
        </transition>
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            isShow:true,
        },

    });
</script>

animation动画（注意：其动画效果是对其块元素进行操作的）

    <style>
        /* 显示/隐藏的过渡效果 */
        .xxx-enter-active{
            animation: xxx-in .5s;
        }
        .xxx-leave-active{
            animation: xxx-in .5s reverse;
        }
        @keyframes xxx-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }
        #app>p{
            display: inline-block;   
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isShow=!isShow">button</button>
        <transition name="xxx">
            <p v-show="isShow">星辰</p>
        </transition>
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            isShow:true,
        },

    });
</script>

基本过渡动画的编码

1）在目标元素外包裹<transition name="xxx"></transition>

2）定义class样式

指定过渡样式：transition
指定隐藏时的样式：opacity/其他

过滤器

功能：对要显示的数据进行特定格式化后再显示

注意：并没有改变原本的数据，可是产生新的对应的数据

定义过滤器

Vue.filter(filterName,function(value[,arg1,arg2,……]){

//进行一定的数据处理

return newValue;

})

使用过滤器

<div>{{myData | filterName}}</div>

<div>{{myData | filterName(arg)}}</div>

moment.js

指令

v:text：更新元素的textContent
v-html：更新元素的innerHTML
v-if：如果为true，当前标签才会输出页面
v-else：如果为false，当前标签才会输出到页面
v-show：通过控制display样式来控制显示 / 隐藏
v-for：遍历数组 / 对象
v-on：绑定事件监听，一般写为@
v-bind：强制绑定解析表达式，一般写为 :
v-model：双向数据绑定
ref：指定唯一标识，vue对象通过$els属性访问这个元素对象
v-cloak：防止闪现，与css配合：[v-cloak]{display:none}

自定义指令

el：指令属性所在的标签对象

binding：包含指令相关信息数据的对象

注册全局指令

Vue.directive( 'my-directive' , function( el, binding){

el.innerHTML = binding.value.toUpperCase()

})

注册局部指令

directives :{

'my-directive' :{

bind ( el, binding){

el.innerHTML = binding.value.toUpperCase()

}

}

}

使用指令：v-my-directive='xxx'

<body>
    <div id="test1">
        <p v-upper-text="msg1"></p>
        <p v-lower-text="msg1"></p>
    </div>

    <div id="test2">
        <p v-upper-text="msg2"></p>
        <p v-lower-text="msg2"></p>
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    Vue.directive('upper-text',function(el,binding){
        el.innerHTML=binding.value.toUpperCase();
    });

    new Vue({
        el:'#test1',
        data:{
            msg1:'TailWind'
        },
        directives:{    //注册局部指令，只在当前vm管理范围内有效
            'lower-text'(el,binding){
                el.innerHTML=binding.value.toLowerCase();
            }
        }
    });
    
    new Vue({
        el:'#test2',
        data:{
            msg2:'WindGrin'
        },
    });
</script>

插件

Vue插件是一个包含install方法的对象

通过install方法给Vue或Vue实例添加方法，定义全局指令等

插件JS：

/**
* 自定义 Vue 插件
*/
(function () {
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
            alert('Vue 函数对象方法执行')
        }
        // 2. 添加全局资源
        Vue.directive('my-directive', function (el, binding) {
            el.innerHTML = "MyPlugin my-directive " + binding.value
        })
        // 3. 添加实例方法
        Vue.prototype.$myMethod = function () {
            alert('vue 实例对象方法执行')
        }
})

页面使用插件：

<div id="demo">
<!--使用自定义指令-->
    <p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
//使用自定义插件
    Vue.use(MyPlugin)
    var vm = new Vue({
        el: '#demo',
        data: {
        msg: 'atguigu'
        }
    })
    //调用自定义的静态方法
    Vue.myGlobalMethod()
    //调用自定义的对象方法
    vm.$myMethod()
</script>

____@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习（2）

事件处理绑定监听三种绑定事件的方法：v-on:xxx="fun"@xxx="fun"@xxx="fun(参数)"默认事件形参：event 隐含属性对象：$event事件修饰符.prevent：阻止事件的默认行为 event.preventDefault().stop：停止事件冒泡 event.stopPropagation()按键修饰符xxx.keyCode：操作的是某个keycode值的键xxx.enter：操作的是回车键其中"xxx"指的...
复制链接

扫一扫