Vue第一天(基本指令 跑马灯案例 计算器案例 事件修饰符 双向绑定 样式)

Vue第一天

基本指令
跑马灯案例
计算器案例
事件修饰符
双向绑定
样式
这是我第5遍学习Vue了(可能是因为感觉自己达不到游刃有余的感觉吧,也可能是以前学的不系统,要学就得学扎实了。)

  • 创建一个实例

    <script src="../../vue.min.js"></script>
    <div id="app">
        <p>{{ title }}</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                title: '欢迎学习Vue!'
            }
        })
    </script>
    

    指令:

  1. v-cloak ( 能够解决 插值表达式闪烁问题 )

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app">
        <p v-cloak>{{ title }}</p>
    </div>
    
  2. v-text ( 功能与插值表达式相同,优点:没有闪烁问题 ,缺点:会覆盖元素中原本的内容)

    <p v-text=“title”></p>
    
  3. v-html (能够解析文本里面的HTML标签)

    <p v-html="msg"></p>
    
  4. v-bind( 用于绑定属性的指令 )(简写形式 : )

     <input type="button" value="按钮"  v-bind:title="mytitle">
     <input type="button" value="按钮"  :title="mytitle">
    
  5. v-on ( 绑定事件 ) (简写形式 @ )

<input type="button" value="按钮"    v-on:click="alert('hello')">
<input type="button" value="按钮"    @click="alert('hello')">

练习

  1. 跑马灯
<div id="app">
    <p>{{msg}}</p>
    <input type="button" value="开始" @click="start">
    <input type="button" value="停止" @click="stop">
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育,别浪~~~~',
            timer: null
        },
        methods: {
            start() {
                if (this.timer != null) return;
                this.timer = setInterval(() => {
                    let start = this.msg.substring(0, 1)
                    let end = this.msg.substring(1)
                    this.msg = end + start
                }, 200)
            },
            stop() {
                clearInterval(this.timer)
                this.timer = null
            }
        }
    })
</script>

mark

事件修饰符

  1. stop ( 阻止冒泡 )

    <div id="app">
        <div class="inner" @click="DivClick">
            <input type="button" value="点击" @click.stop="BtnClick">
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                DivClick() {
                    console.log('触发了inner点击事件')
                },
                BtnClick() {
                    console.log('触发了按钮点击事件')
                }
            }
        })
    </script>
    

    mark

  2. prevent ( 阻止默认行为 )

    <a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>

mark

  1. capture (捕获触发事件机制)(从外向里 )
<div class="inner" @click.capture="DivClick">
    <input type="button" value="点击" @click="BtnClick">
</div>

mark

  1. self ( 只有点击当前元素才能触发事件)

    <div class="inner" @click.self="DivClick">
        <input type="button" value="点击" @click="BtnClick">
    </div>
    

    mark

  2. once (只触发一次事件)

    <a href="http://www.baidu.com" @click.prevent.once="linkClick">去百度</a>
    

v-model

  • 案例(计算器)
  1. <div id="app">
        <input type="text" v-model="n1">
        <select name="" id="" v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="btnClick">
        <input type="text" v-model="result">
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+'
            },
            methods: {
                btnClick() {
                     switch (this.opt) {
                        case '+':
                            this.result = parseInt(this.n1) + parseInt(this.n2)
                            break
                        case '-':
                            this.result = parseInt(this.n1) - parseInt(this.n2)
                            break
                        case '*':
                            this.result = parseInt(this.n1) * parseInt(this.n2)
                            break
                        case '/':
                            this.result = parseInt(this.n1) / parseInt(this.n2)
                            break
                    }
                }
            }
        })
    </script>
    
  2. 代码优化(投机取巧,正式开发中尽量少用)(使用 eval,eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码)

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+'
            },
            methods: {
                btnClick() {
                    // switch (this.opt) {
                    //     case '+':
                    //         this.result = parseInt(this.n1) + parseInt(this.n2)
                    //         break
                    //     case '-':
                    //         this.result = parseInt(this.n1) - parseInt(this.n2)
                    //         break
                    //     case '*':
                    //         this.result = parseInt(this.n1) * parseInt(this.n2)
                    //         break
                    //     case '/':
                    //         this.result = parseInt(this.n1) / parseInt(this.n2)
                    //         break
                    // }
                    let codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
                    this.result = eval(codeStr)
                }
            }
        })
    </script>
    

mark

mark

Vue中使用样式

使用class样式

  1. 第一种方式:直接传递一个数组

        <style>
            .red{
                color: red;
            }
    
            .thin{
                font-weight: 200;
            }
    
            .italic{
                font-style: italic;
            }
        </style>
    <div id="app">
           <h1 :class="['red','thin','italic']">这是h1</h1>
    </div>
    
  2. 在数组中使用三元表达式

    <div id="app">
           <h1 :class="['red','thin',flag?'italic':'']">这是h1</h1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
               flag:true
            }
        })
    </script>
    

    或者:

    <div id="app">
           <h1 :class="['red','thin',{'italic':flag}]">这是h1</h1>
    </div>
    
    
  3. 直接使用对象(true和false可用变量来代替)

    <div id="app">
            <h1 :class="{red:true,thin:true,italic:false}">这是h1</h1>
    </div>
    
    
  4. data里面定义

    <div id="app">
           <h1 :class="classObj">这是h1</h1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                classObj:{red:true,thin:true,italic:true}
            }
        })
    </script>
    
    

使用内联样式

  1. 直接使用

     <h1 :style="{color:'red','font-weight':200}">这是h1</h1>
    
    
  2. data里面调用

    <div id="app">
           <h1 :style="styleObj">这是h1</h1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                styleObj:{color:'red','font-weight':200}
            }
        })
    </script>
    
    
  3. 运用数组

    <div id="app">
           <h1 :style="[styleObj1,styleObj2]">这是h1</h1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                styleObj1:{color:'red','font-weight':200},
                styleObj2:{'font-style':'italic'}
            }
        })
    </script>
    
    

Vue指令之 V-for 和 key属性

  1. v-for 简单实用

    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
               list:[1,2,3,4,5,6]
            }
        })
    </script>
    
    

    mark

  2. 索引值:

<div id="app">
    <ul>
        <li v-for="(item,index) in list">{{item}}---{{index}}</li>
    </ul>
</div>

mark

  1. 循环对象数组

    <div id="app">
        <ul>
            <li v-for="(item,index) in list">{{item.id}}---{{item.name}}---{{index}}		</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: 1,
                        name: '张三'
                    },
                    {
                        id: 2,
                        name: '李四'
                    },
                    {
                        id: 3,
                        name: '王五'
                    },
                    {
                        id: 4,
                        name: '隔壁老王'
                    }
                ]
            }
        })
    </script>
    
    

mark

  1. 遍历对象

    <div id="app">
        <ul>
            <li v-for="(val,key,index) in user">{{key}}--{{val}}---{{index}}</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                user:
                    {
                        id: 1,
                        name: '张三',
                        hobby:'打篮球',
                        sex:'男'
                    }
            }
        })
    </script>
    
    

    mark

  2. 迭代数字

    <div id="app">
       <p v-for="count in 5">这是第 {{count}} 次循环</p>
    </div>
    
    

    mark

Vue指令之 v-if 和 v-show

  1. 基本使用
<div id="app">
    <h3 v-if="flag">这是v-if控制的元素</h3>
    <h3 v-show="flag">这是v-show控制的元素</h3>
    <button @click="flag=!flag">点击</button>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
           flag:true
        }
    })
</script>

mark

mark

总结

  1. MVC 和 MVVM 的区别
  2. 学习了Vue中最基本的代码结构
  3. 基本指令
  4. 事件修饰符
  5. v-for 要会使用 key 属性
  6. v-model 只能应用于表单元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值