vue入门以及一些常用指令

2019-06-27  本文已影响0人  北街九条狗
入门练习
<div id="app">
    <p>{{msg}}</p>
    <!-- v-moddel只能绑定表单控件,实现双向绑定 -->
    <input type="text" v-model="msg">
</div>
<script src="./js/vue.js"></script>
<script>
    //创建vue实例 --mvvm中的vm viewmodel
   var vm=new Vue({
        el : '#app',//挂载元素,当前vue实例控制区域
        data:{//当前vue实例的数据,--mvvm中的m
            msg:'hello Vue!!!'
        }
    })
</script>

常用指令

v-cloak 处理数据渲染时,因网速过慢,导致用户看家类似{{msg}}的数据
<div id="app">
    <p v-cloak>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            'msg':'测试信息'
        }
    })
</script>
v-text:是将数据当做文本来解析,与差值表达式{{}}效果一样
v-html:是将数据当做html解析,数据中的标签会被识别
<div id="app">
    <p v-text="msg"></p>
    <p v-html="msg"></p>
</div>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
           'msg':'测试信息'
        }
    })
</script>
v-bind 绑定标签属性,用时需后面加上 :然后接属性名( v-bind:tytle="title" )也可以简写为 :tytle="title"
<div id="app">
    <p v-html="msg" v-bind:tytle="title"></p>
</div>
   <script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"测试信息",
            title:'绑定参数'
        }
    })
</script>
v-on绑定事件用法如:(v-on:click单击事件,可以简写为 @click)
<div id="app">
    <button v-on:click="shoenum">按钮</button>
    <button @click="shoenum2">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            shoenum (){
                console.log(1);
            },
            shoenum2 (){
                console.log(2);
            }
        }
    })
 </script>
跑马灯练习
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-html="msg"></p>
        <button @click="lang">浪起来</button>
        <button @click="ting()">别浪</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "猥琐发育别浪~~~~~"
            },
            methods: {
                lang() {
                    // 防止定时器冲突
                    if(this.intervalId!=null){
                        return;
                    }
                    //操作msg
                    //   console.log(this.msg);
                    // 蓝不打表达式
                    this.intervalId = setInterval(()=> {
                        var fist = this.msg.substring(0, 1);
                        var rest = this.msg.substring(1);
                        this.msg = rest+fist;
                        console.log(this.msg);
                    }, 1000)
                
                },
                ting(){
                   clearInterval(this.intervalId);
                   this.intervalId=null;
                }
            },
        })
    </script>
</body>
</html>
事件修饰符:
prevent取消默认事件stop 阻止事件冒泡capture 捕获事件处理事件由外向内(当有capture时stop就不起作用了)self 会使标签必须是直接点击才能触发once 只生效一次
<!-- <div id="app" @click.capture="showBoxInfo"> -->
    <!-- self 直接点击当前元素才触发-->
    <div id="app" @click.self="showBoxInfo">
        <!-- prevent 阻止默认事件 -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">GO Baidu</a>
        <!-- stop 阻止事件冒泡 -->
        <button @click.stop="showBtnInfo">阻止冒泡</button>
        <!-- once只生效一次 -->
        <button @click.once="showBtnInfo">self</button>
    </div>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            showInfo() {
                console.log("测试信息");
            },
            showbuInfo() {
                console.log("按钮信息");
            },
            showboxInfo() {
                console.log("打印box信息");
            }
        },
    })
</script>
v-model双向绑定
    <div id="app">
        <input type="text" v-model="num">
        <p >共{{num}}人</p>
        <input type="checkbox" name="" id="" :checked="fa">
        <button @click="toggle">切换</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num:0,
                fa:true
            },
            methods: {
                toggle(){
                    this.fa=!this.fa
                }
            },
        })
    </script>
练习:建议计算机
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="fist">
        <select name="" id="" v-model="c">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="x">x</option>
            <option value="÷">÷</option>
        </select>
        <input type="text" v-model="er">
        <p><button @click="dentyu">等于</button></p>
        <input type="text" v-model="deng">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                fist:'',
                er:'',
                deng:'',
                c: '+'
            },
            methods: {
                dentyu(){
                    console.log(1); 
                    if(this.c=='+'){
                        this.deng= parseFloat(this.fist)+parseFloat(this.er)
                    }
                    if(this.c=='-'){
                        this.deng= parseFloat(this.fist)-parseFloat(this.er)
                    }
                    if(this.c=='x'){
                        this.deng= parseFloat(this.fist)*parseFloat(this.er)
                    }
                    if(this.c=='÷'){
                        this.deng= parseFloat(this.fist)/parseFloat(this.er)
                    }
                   
                }
            },
        })
    </script>
</body>

</html>
上一篇 下一篇

猜你喜欢

热点阅读