Vue 学习笔记

Vue.js简介

1. Vue.js是什么

Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。
与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

一句话总结:简单好用的前端框架.

参考:官网

2. Hello World

学习一个技术,最好的入门方法,一定是去官网找入门程序.

一进入官网就看到了起步.

跳转到这个页面.发现有样例可以下载.

下载后打开代码.

<!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

打开浏览器

我们再回头看代码.重点关注下面几行.

var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
  1. 创建了一个Vue对象.
  2. el的值和上面div的id对应.根据写法不难看出就是绑定到id为app的元素(element)上.
  3. data字段里有message,也不难看出和div内部的{{ message }}.而这个大括号的模板语法.在很多后端语言都有.

根据这个Hello World,我们可以看出.Vue确实看起来比较简单,好写.不像angular那样门槛叫高.一上来就比较复杂.

3. Go Further

通过Hello World程序,我们已经对Vue有了基本的了解.那接下来,我们改一改Vue的Hello World.
尝试多种不同数据类型的绑定.看看会展示成什么样子.

代码:

<!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    {{ message }} <br/>
    {{ messageId }} <br/>
    {{ messageArr }} <br/>
    {{ messageObj }} <br/>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!', // str
            messageId: 13, // int
            messageArr: ["Hello", "Vue", "From", "Arr"],
            messageObj: {
                id: 1,
                message: "Hello Vue From Obj"
            }
        }
    })
</script>
</body>
</html>

展示:

所有类型都进行了正确的展示.Ok,入门完成.

Vue指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM.

一句话: 增强Html的能力,类似JSTL

关于指令由于时间有限.大致浏览了一下官网.挑几个入门必备的来记录一下.剩下的遇到了再去查官网.

1. 条件指令 v-if

代码

<div id="app">
    <p v-if="yes">你可以看到这一条</p>
    <p v-if="no">你看不到这一条</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            yes: true,
            no : false,
        }
    })
</script>

浏览器展示

看看实际展示的Html源码

结论: v-if 根据条件来判断是否需要渲染这个元素

2. 循环指令 v-for

遍历数组

代码

<div id="app">

    <ul>
        <li v-for="(message,index) in messageArr">
            {{index}} - {{ message }}
        </li>
    </ul>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            messageArr : ["Hello", "Vue", "Js"],
        }
    })
</script>

浏览器展示

image.png

提醒: 传统的后端语言遍历都是(key,value).在Vue中是(value,key)

遍历对象

代码

<div id="app">
    <ul>
        <li v-for="(value, key) in person">
            {{ key }} - {{ value }}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            person: {id: 1, name : "peter", age : 12}
        }
    })
</script>

浏览器展示

和数组一样.没什么问题.

3. 双向数据绑定指令 v-model

个人理解.双向数据绑定的含义是指,模型数据改变会改变视图,而视图数据改变,也会改变模型数据.

代码

<div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="edit me">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ""
        }
    })
</script>

浏览器展示

4. 绑定事件 v-on

使用最简单的click and alter来测试功能

代码

<div id="app">
    <button v-on:click="doAlert('Hello Vue')">click me</button>
</div>

<script>
    var app = new Vue({
        el: '#app',
        methods : {
            doAlert: function (message) {
                alert(message);
            }
        }
    })
</script>

浏览器

绑定事件,也很简单.

官网对指令还有更多的介绍.可以去参考.一键跳转到文档

账户管理功能

根据前面学习的知识点,实现一个简单的账户管理功能.效果图如下

Github

代码一键直达

推荐阅读更多精彩内容