Vue第一天（基本指令跑马灯案例计算器案例事件修饰符双向绑定样式）-CSDN博客

本文链接：https://blog.csdn.net/weixin_43949788/article/details/89375994

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>

指令：

v-cloak （能够解决插值表达式闪烁问题）

<style>
    [v-cloak]{
        display: none;
    }
</style>
<div id="app">
    <p v-cloak>{{ title }}</p>
</div>

v-text ( 功能与插值表达式相同，优点：没有闪烁问题，缺点：会覆盖元素中原本的内容)
```
<p v-text=“title”></p>
```
v-html (能够解析文本里面的HTML标签)
```
<p v-html="msg"></p>
```

v-bind（用于绑定属性的指令）(简写形式 : )

 <input type="button" value="按钮"  v-bind:title="mytitle">
 <input type="button" value="按钮"  :title="mytitle">

v-on ( 绑定事件 ) （简写形式 @ ）

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

练习

跑马灯

<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

事件修饰符

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

prevent ( 阻止默认行为 )

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

mark

capture （捕获触发事件机制）（从外向里）

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

mark

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

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

mark

once （只触发一次事件）

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

v-model

案例（计算器）

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

代码优化（投机取巧，正式开发中尽量少用）（使用 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

Vue中使用样式

使用class样式

第一种方式：直接传递一个数组

    <style>
        .red{
            color: red;
        }

        .thin{
            font-weight: 200;
        }

        .italic{
            font-style: italic;
        }
    </style>
<div id="app">
       <h1 :class="['red','thin','italic']">这是h1</h1>
</div>

在数组中使用三元表达式

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

直接使用对象（true和false可用变量来代替）

<div id="app">
        <h1 :class="{red:true,thin:true,italic:false}">这是h1</h1>
</div>

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>

使用内联样式

直接使用

 <h1 :style="{color:'red','font-weight':200}">这是h1</h1>

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>

运用数组

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

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

索引值：

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

mark

循环对象数组

<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

遍历对象

<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

迭代数字

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

mark

Vue指令之 v-if 和 v-show

基本使用

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