Vue第一部分

2018-08-28 本文已影响0人珲_cysky2018

开始使用Vue

步骤：

1.导入Vue的包

2.创建一个Vue的实例。当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script> //导包
</head>
<body>
<div id="app">
    <p>{{ msg }}</p>
</div>//将来 new 的 Vue实例，会控制这个元素中的所有内容
<script>
    var vm = new Vue({
        el: "#app",//el:表示当我们new的这个Vue实例，要控制页面的哪一个区域
        data: {
            msg: '欢迎学习Vue'
        }//data 属性中，存放的是 el 中要用到的数据
    })//创建实例
</script>
</body>
</html>

通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了

v-cloak的学习

功能：使用 v-cloak 能够解决插值表达式闪烁的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <p v-cloak>+++{{ msg }}+++</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'v-cloak的使用'
        }
    })
</script>
</body>
</html>

v-text & v-html 学习

v-text 和插值表达式的区别：

v-text 默认没有闪烁的问题
v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素内容清空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <p v-text="msg">我是一个p元素</p> //会覆盖p元素原本的内容
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'v-text的使用'
        }
    })
</script>
</body>
</html>

v-text & v-html 的区别：

v-text 和 v-html 都会覆盖掉元素内已有的内容
v-text 不能识别标签
v-html可以识别标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <p v-text="msg2">我是一个p元素</p>
    <!--v-text的结果：<h4>我是一个H4标签</h4>-->
    <p v-html="msg2">我是一个p元素</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg2: '<h4>我是一个H4标签</h4>'
        }
    })
</script>
</body>
</html>

v-bind & v-on 的学习

v-bind 是Vue中，提供的用于绑定属性的指令

v-bind 可以缩写为:要绑定的属性

v-bind 中，可以写合法的JS表达式

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="click" :title="mytitle + '123'" @mouseover = 'show'>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mytitle: '转到百度网'
        },
        methods: {
            show: function(){
                alert("事件绑定的使用")
            }//这个 methods 属性中定义了当前Vue实例中所有可用的方法
        }
    })
</script>
</body>
</html>

v-on 是Vue中，提供的用于事件绑定的指令

v-on 可以缩写为:要绑定的方法

案例：跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="运行" @click='start'>
    <input type="button" value="结束" @click='stop'>
    <p>{{ msg }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪~ ~稳住，我们能赢！！',
            intervalId: null
        },
        methods: {

            start() {
                if (this.intervalId != null) return;
                this.intervalId = setInterval(() => {
                    var start = this.msg.substring(0, 1);
                    var end = this.msg.substring(1);
                    this.msg = end + start
                }, 400)
            },

            stop() {
                clearInterval(this.intervalId);
                this.intervalId = null
            }
        }
    })
</script>
</body>
</html>

注意：

vm实例中（ var vm = new Vue），如果想要获取 data 上的数据，或者想要调用 methods 中的方法，必须通过 this.数据属性名 或this.方法名 来访问，这里的this 就表示我们 new 出来的 VM 实例对象
VM实例，会监听自己身上data 中所有数据的改变，只要数据一发生改变，就会自动把最新的数据，从 data 上同步到页面中去

事件修饰符

.stop
- 阻止冒泡
.prevent
- 阻止默认行为
.capture
- 实现捕获触发事件机制
.self
- 实现只有点击当前元素，才会触发事件处理函数
- 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
.once 实现只触发一次事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <style>
        .inner {
            height: 50px;
            background-color: darkblue;
        }

        .outer {
            padding: 40px;
            background-color: red;
        }
    </style>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<!--.stop 阻止冒泡-->
<!--<div class="inner" id="app" @click='div1Handler'>-->
<!--<input type="button" value="click" @click.stop='btnHandler'>-->
<!--</div>-->

<!--.prevent 阻止默认行为-->
<!--<div id="app">-->
<!--<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，问百度</a>-->
<!--</div>-->

<!--.capture 实现捕获触发事件机制-->
<!--<div class="inner" id="app" @click.capture='div1Handler'>-->
<!--<input type="button" value="click" @click='btnHandler'>-->
<!--</div>-->

<!--self 只有点击当前元素才会触发事件处理函数-->
<!--<div  id="app" class="outer" @click="div2Handler">-->
    <!--<div class="inner" @click.self='div1Handler'>-->
        <!--<input type="button" value="click" @click='btnHandler'>-->
    <!--</div>-->
<!--</div>-->

<!--once 只触发一次事件处理函数-->
<!--<div id="app">-->
    <!--<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，问百度</a>-->
<!--</div>-->
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            div1Handler() {
                console.log('这是触发了inner div 的点击事件')
            },
            btnHandler() {
                console.log('这是触发了btn按钮的点击事件')
            },
            linkClick() {
                console.log('这是触发了连接的点击事件')
            },
            div2Handler(){
                console.log('这是触发了outer div 的点击事件')
            }
        }

    })
</script>
</body>
</html>

v-model 的学习

v-bind 只能实现数据的单向绑定，无法实现数据的双向绑定

使用 v-model 指令，可以实现表单元素和Model 中数据的双向数据绑定

注意：v-model 只能用在表单元素中（input(radio,text,address,url...),select,textarea,checkbox....）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" style='width: 100%' v-model="msg">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'v-model 能够实现数据的双向绑定'
        }
    })
</script>
</body>
</html>

案例：简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">
    <select 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="clac">
            <input type="text" v-model="result">
            </div>
            <script>
        var vm = new Vue({
            el: '#app',
        data: {
            n1: 0,
            n2: 0,
            result: 0,
            opt: '+'
        },
        methods: {
            clac(){
                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>
</body>
</html>

vue中样式操作——class

直接传递一个数组，这里的 class 需要使用 v-bind 做数据绑定
在数组中使用三元表达式
在数组中使用对象来代替三元表达式，提高代码的可读性
在为class 使用 v-bind 绑定对象的时候，对象的属性使类名，对象的属性可带引号，也可不带引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <!--原始操作方式：-->
    <!--<h1 class="red thin">这是一个h1大标题</h1>-->

    <!--第一种方式：直接传递一个数组-->
    <!--<h1 :class="['thin','italic']">这是一个h1大标题</h1>-->

    <!--第二种方式：在数组中使用三元表达式-->
    <!--<h1 :class="['thin','italic',flag?'red':'']">这是一个h1大标题</h1>-->

    <!--第三种方式：在数组中使用 对象来代替三元表达式，提高代码的可读性-->
    <!--<h1 :class="['thin','italic',{'red':flag}]">这是一个h1大标题</h1>-->

    <!--第四种方式：为 class 使用 v-bind 绑定对象-->
    <h1 :class="classObj">这是一个h1大标题</h1>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                classObj: {'red': true, 'thin': false, 'italic': true, 'active': true}
            }
        })
    </script>
</body>
</html>

vue中样式操作——style

注意：使用 v-bind 绑定对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <h1 :style="[styleObj1,styleObj2]">我是H1大标题</h1>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObj1: {'color': 'red', 'font-weight': 200},
            styleObj2: {'font-style': 'italic'}
        }
    })
</script>
</body>
</html>

v-for循环

普通数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <p v-for="(item,i) in list">
        索引值：{{ i }}-----每一项：{{ item }}
    </p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3, 4, 5, 6]
        }
    })
</script>
</html>

对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <p v-for="(user,i) in list">
        ID:{{ user.id }} ---- 名字：{{ user.name }} ---- 索引：{{ i }}
    </p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                {id: 1, name: '张三'},
                {id: 2, name: '李四'},
                {id: 3, name: '王麻子'},
                {id: 4, name: '三楞子'},
                {id: 5, name: '四傻子'},
            ]
        }
    })
</script>
</body>
</html>

对象

注意：在遍历对象身上的键值对的时候，除了有 val key ,在第三个位置还有一个索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <p v-for="(val,key,i) in user">
        键是：{{ key }} --- 值是：{{ val }} --- 索引：{{ i }}
    </p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            user: {
                id: 1,
                name: '托尼·屎大颗',
                gender: 'male'
            }
        }
    })
</script>
</body>
</html>

迭代数字

注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <p v-for="count in 10">
        这是第{{ count }}次循环
    </p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
    })
</script>
</body>
</html>

v-if & v-show 的使用

共同点：都可以动态控制dom元素显示/隐藏

两者的区别：

v-if
- 显示/隐藏是将dom元素整个添加或删除
- 有较高的切换性能消耗
- 如果元素可能永远不会被显示出来，推荐使用v-if
v-show
- 隐藏则是为该元素添加display:none dom元素还存在
- 有价高的初始渲染消耗
- 如果元素涉及到频繁的切换，推荐使用v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cysky</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false
        }

    })
</script>
</body>
</html>