美文网首页
九:vue.js基础(2)

九:vue.js基础(2)

作者: YANG_c08b | 来源:发表于2018-12-27 19:35 被阅读0次

1.表单输入绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</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="gender">
        <label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="gender">
        <label for="male">男</label><br>

        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basket" v-model="hobby">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="hobby">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="hobby">
        <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="index">{{city.name}}</option>
        </select><br>
        <span>介绍: </span>
        <textarea rows="10" v-model="desc"></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: '',
            gender: '女',
            hobby: ['foot'],
            allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SH'}, {id: 3, name: 'GD'}],
            cityId: '1',
            desc: ''
        },
        methods:{
            handleSubmit(){
                console.log(this.username, this.pwd);
            }
        }
    })
</script>
</body>
</html>

2.Vue实例_生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新显示：this.xxx = value
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="test">
    <button @click="destroyVM">destroy vm</button>
    <p v-show="isShow">Vue实例的生命周期</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            isShow: true
        },
        // 1、初始化阶段
        beforeCreate(){
            console.log('beforeCreate()');
        },
        created(){
            console.log('created()');
        },
        beforeMount(){
            console.log('beforeMount()');
        },
        mounted(){// 初始化显示之后立即调用（1次）
            console.log('mounted()');
            this.intervalId = setInterval(() => {
                console.log('-------->');
                this.isShow = !this.isShow;// 更新数据
            }, 1000);
        },
        // 2、更新阶段
        beforeUpdate(){
            console.log('beforeUpdate()');
        },
        updated(){
            console.log('updated()');
        },
        // 3、死亡阶段
        beforeDestroy(){// 死亡之前调用（1次）
            console.log('beforeDestroy()');
            // 清除定时器
            clearInterval(this.intervalId);
        },
        destroyed(){
            console.log('destroyed()');
        },
        methods: {
            destroyVM(){
                // 干掉VM
                this.$destroy();
            }
        }
    })
</script>
</body>
</html>

3.过渡.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style type="text/css">
        /*显示/隐藏的过渡效果*/
        .xxx-enter-active, .xxx-leave-active{
            transition: opacity 1s;
        }
        /*隐藏时的样式*/
        .xxx-enter, .xxx-leave-to{
            opacity: 0;
        }
        /*显示的过渡效果*/
        .move-enter-active{
            transition: all 1s;
        }
        /*隐藏的过渡效果*/
        .move-leave-active{
            transition: all 3s;
        }
        /*隐藏时的样式*/
        .move-enter, .move-leave-to{
            opacity: 0;
            transform: translateX(20px);
        }
    </style>
</head>
<body>
<!--
1. vue动画的理解
  操作css的trasition或animation
  vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
  1). 在目标元素外包裹<transition name="xxx">
  2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
  xxx-enter-active: 指定显示的transition
  xxx-leave-active: 指定隐藏的transition
  xxx-enter: 指定隐藏时的样式
-->

<div id="demo">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="xxx">
        <p v-show="isShow">hello</p>
    </transition>
</div>

<div id="demo2">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="move">
        <p v-show="isShow">hello</p>
    </transition>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        /*data: {
        },*/
        data(){
            return {
                isShow: true
            }
        }
    });
    new Vue({
        el: '#demo2',
        data(){
            return {
                isShow: true
            }
        }
    });
</script>
</body>
</html>

4.动画


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>

    <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <br>
        <transition name="bounce">
            <p v-if="show" style="display: inline-block;">Lorem ipsum.</p>
        </transition>
    </div>

<script type="text/javascript" src="js/vue.js"></script>
<script>
    new Vue({
        el: '#example-2',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

5.过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
<!--
1. 理解过滤器
  功能: 对要显示的数据进行特定格式化后再显示
  注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
  1). 定义过滤器
    Vue.filter(filterName, function(value[,arg1,arg2,...]){
      // 进行一定的数据处理
      return newValue
    })
  2). 使用过滤器
    <div>{{myData | filterName}}</div>
    <div>{{myData | filterName(arg)}}</div>
-->
<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
    <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="js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
    // 自定义过滤器
    /*
    Vue.filter('dateString', function(value, format){
        return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');
    })
    */
    //ES6语法
    Vue.filter('dateString', function(value, format='YYYY-MM-DD HH:mm:ss'){
        return moment(value).format(format);
    })
    new Vue({
        el: '#test',
        data: {
            date: new Date()
        }
    })
</script>
</body>
</html>

6.内置指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置指令</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--
常用内置指令
  v:text : 更新元素的 textContent
  v-html : 更新元素的 innerHTML
  v-if : 如果为true, 当前标签才会输出到页面
  v-else: 如果为false, 当前标签才会输出到页面
  v-show : 通过控制display样式来控制显示/隐藏
  v-for : 遍历数组/对象
  v-on : 绑定事件监听, 一般简写为@
  v-bind : 强制绑定解析表达式, 可以省略v-bind
  v-model : 双向数据绑定
  ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
-->
<div id="example">
    <p ref="content">吃得苦中苦，你也就是个能吃苦的人。</p>
    <button @click="hint">提示</button>
    <!-- <p v-text="msg"></p> -->
    <p v-cloak>{{msg}}</p>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    alert('---');
    new Vue({
        el: '#example',
        data: {
            msg: '一个人如果没有梦想，跟无忧无虑有什么区别呢？'
        },
        methods: {
            hint(){
                alert(this.$refs.content.textContent);
            }
        }
    })
</script>
</body>
</html>

7.自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>

<!--
1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toupperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'
-->
<!--
需求: 自定义2个指令
  1. 功能类似于v-text, 但转换为全大写  v-upper-text
  2. 功能类似于v-text, 但转换为全小写  v-lower-text
-->

<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>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // 定义全局指令
    // el：指令属性所在的标签对象
    // binding：包含指令相关信息数据的对象
    Vue.directive('upper-text', function(el, binding){
        console.log(el, binding);
        el.textContent = binding.value.toUpperCase();
    });
    new Vue({
        el: '#test1',
        data: {
            msg1: 'NBA I Love This Game!'
        },
        directives:{// 注册局部指令：只在当前vm管理范围内有效
            'lower-text'(el, binding){
                el.textContent = binding.value.toLowerCase();
            }
        }
    })
    new Vue({
        el: '#test2',
        data: {
            msg2: 'Just Do It!'
        }
    })
</script>
</body>
</html>

相关文章

网友评论

      本文标题：九:vue.js基础(2)

      本文链接：https://www.haomeiwen.com/subject/sppdlqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|九:vue.js基础(2)|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！