Vue学习笔记(一)

Contents

1 Vue学习笔记

Vue学习笔记

作者：黄志成

博客：地址

数据绑定 & 第一个应用

直接上代码。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <!-- {{}}双大括号是最基本的文本插值方法,它会自动将我们双向绑定数据实时显示出来. -->
        <h1>您好,{{name}}。</h1>
        <input type="text" v-model="name" placeholder="请输入您的名字"></input>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    // 通过构造函数直接创建一个Vue的根实例,并启动Vue应用,变量app就代表的这个实例
    var app = new Vue({
        // el是指定一个页面已存在的元素来挂载Vue实例
        el: "#app",
        // 声明应用需要双向绑定的数据.建议所有使用的数据都在data里先声明,这样不会吧数据散落在业务逻辑里.
        data: {
            name: "黄志成"
        }
    });
</script>
</html>

效果如下：

h1标签的内容根据input输入框的内容变化而变。

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            name: "黄志成"
        }
    });

    app.name = "http://www.webhuang.cn";
</script>

可以随意修改data里的数据。刷新下页面就会显示

您好,http://webhuang.cn。

{{}}内还可以做简单的运算,三元表达式

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{{number/100}}</h1>
        <h1>{{isOK ? '确定' : '取消'}}</h1>
        <h1>{{text.split(',').reverse().join(',')}}</h1>

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            number: 100,
            isOK: false,
            text: '123,456'
        }
    });

</script>
</html>

结果是：

1
取消
456,123

下面来看一下过滤器 vue.js支持在{{}}中添加一个管道符 “|” 对数据进行过滤

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{{ text | formatData }}</h1>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            text: "abcAIsdaHzcAm",
        },
        filters: {
            formatData: function (value) {
                return value.toUpperCase();
            }
        },
    });

</script>
</html>

页面显示

ABCAISDAHZCAM

指令与事件

指令是vue模板中最常用的一项功能,它带有前缀 v- .下面展示几个用法

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1 v-if="isShow">{{ text | formatData }}</h1>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            text: "abcAIsdaHzcAm",
            isShow: false
        },
        filters: {
            formatData: function (value) {
                return value.toUpperCase();
            }
        },
    });

</script>
</html>

当 isShow 为 true 的时候 h1标签则插入为false的时候则被移除。

v-bind 的基础用途是动态更新HTML上的元素比如 id class href src 等等

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1 v-if="isShow">{{ text | formatData }}</h1>
        <a v-bind:href="aUrl">这是个链接</a>
        <img v-bind:src="imgUrl">
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            text: "abcAIsdaHzcAm",
            isShow: true,
            aUrl: "http://www.webhuang.cn",
            imgUrl: "http://www.webhuang.cn/wp-content/themes/JieStyle-Two/images/avatar.jpg"
        },
        filters: {
            formatData: function (value) {
                return value.toUpperCase();
            }
        },
    });

</script>
</html>

当然还有 v-on ，它用来绑定事件监听.例如下面:

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1 v-if="isShow">{{ text | formatData }}</h1>
        <button v-on:click="hiddenH1">移除上面的内容</button>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            text: "abcAIsdaHzcAm",
            isShow: true,
        },
        filters: {
            formatData: function (value) {
                return value.toUpperCase();
            }
        },
        methods: {
            hiddenH1: function() {
                this.isShow = false;
            }
        }
    });

</script>
</html>

点击一下按钮。上面的h1标签就会被移除.

最后 v-bind 和 v-on 提供了语法糖

<a :href="aUrl">这是个链接</a>
<button @click="hiddenH1">移除上面的内容</button>

计算属性

模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,计算属性就是用来解决该问题的。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{{ reversedTetx }}</h1>
        <input type="text" v-model="text"></input>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            text: '123,456'
        },
        computed: {
            reversedTetx: function () {
                return this.text.split(',').reverse().join(',');
            }
        }
    });

</script>
</html>

所有计算属性都以函数的形式写在Vue的实例内的computed选项内，最终返回计算后的结果。

如果计算属性依赖的数据变动了,计算属性就会重新执行,视图也会更新。这个比较适合在购物车场景中使用。

这里也可以通过 methods 也可以实现这个功能。使用方法还可以传参,更加方便.但是两者有个更大的区别就是,计算属性是基于它依赖的缓存,一个计算属性所依赖的数据发生变化,它才会重新取值.而使用methods,只要重新渲染就会被重新调用。当遍历大数组和做大量计算时,应该使用计算属性.除非你不希望得到缓存.

下面给出一个例子.

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{{ getDateForComputed }}</h1>
        <h1>Text:{{ text }}</h1>
        <input type="text" v-model="text"></input>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            text: '123,456'
        },
        computed: {
            getDateForComputed: function () {
                return Date.now();
            }
        },
        methods: {
            getDateForMethods: function() {
                return Date.now();
            }
        }
    });

</script>
</html>

v-bind 及class 与 style绑定

给v-bind:class 设置一个对象,可以动态切换class

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
    <style type="text/css">
        .active {
            width:200px;
            height: 100px;
            background-color: red; 
        }
        .error {
            border: 3px solid green;
        }
        .static {
            border-radius : 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="static" :class="{ 'active': isActive, 'error': isError }">

        </div>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isError: true
        }
    });

</script>
</html>

类名 active 和 error 依赖数据isActive和isError. 当其为true的时候 div会拥有其类名,对象中也支持多个属性，另外 :class 和class 可以同存.

<!-- 同样还支持数组的形式. -->
<div id="app">
    <div class="static" :class="['active','error']">

    </div>
</div>

<!-- 数组中也可以使用对象属性. -->
<div id="app">
    <div class="static" :class="[{active: isActive},'error']">

    </div>
</div>

使用 v-bind:style (:style) 可以给元素绑定内联样式,方法与:class类似,也有对象和数组语法.

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <div :style="{ 'color': color, 'fontSize': fontSize }">
            Hcheng's Vue course
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            color: 'red',
            fontSize: '19px'
        }
    });
</script>
</html>

一般情况，直接一大串样式不利于阅读和维护,所以一般写在data 或者 computed 里。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <div :style="[styleA,styleB]">
            Hcheng's Vue course
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            styleA: {
                color: 'red',
            },
            styleB: {
                fontSize: '22px',
            }
        }
    });
</script>
</html>

今天的Vue学习就到这里了.之前对vue只是简单的使用.现在将更加深入了解应用层.

写于: 2018年07月22日22:22:43

Web-Huang

Vue学习笔记(一)

Vue学习笔记

数据绑定 & 第一个应用

指令与事件

计算属性

v-bind 及class 与 style绑定

评论

发表评论点击这里取消回复。

Web-Huang

Vue学习笔记(一)

Vue学习笔记

数据绑定 & 第一个应用

指令与事件

计算属性

v-bind 及class 与 style绑定

评论

发表评论 点击这里取消回复。

友情链接

发表评论点击这里取消回复。