美文网首页
Vue第一部分

Vue第一部分

作者: 珲_cysky2018 | 来源:发表于2018-08-28 22:36 被阅读0次

开始使用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>

相关文章

网友评论

      本文标题：Vue第一部分

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Vue第一部分|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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