个人 Vue.js 学习日记（一）

时间 2019-11-08

原文原文链接

前言

我是一名很普通的.net程序员，作了几些年的winform的开发，有过一点点的asp.net经验，前端近瞎；恰巧公司最近须要开发一个很小的网站，那么便借此机会顺便学习一下web应用方面的知识吧。html

Why Vue.js

那么是什么缘由让我选择了Vue呢？如今的我并不知道Vue其余的优点，只知道他作到了双向绑定，这很方便，那么就是他吧！前端

起步

首先，我来到了Vue的官方网址https://cn.vuejs.org/；看了视频，其意思是说Vue是响应式的，大约是JS里的值在发生变化后，页面上对应的显示也会变化，因为我没有经历过那么没有Vue的年代，因此我惟一的感受就是 - 这东西貌似很方便 = =...；不皮了，点击起步！vue

门槛

官方友情提示：HTML、CSS 和 JavaScript 的中级知识，我好像不达标？简单的HTML，CSS，JS我仍是能看懂的！先往下看吧。程序员

引用

两种方式web

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或vue-cli

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

这里提到新手不推荐用vue-cli，这个我还真达标了！不过什么是vue-cli？简单查了下，大体是这样中文名叫脚手架工具，英文名叫vue-cli，做用是配合已有模版快速搭建项目，吐槽一下，英文名看不懂就算了，这个中文名其实也看不懂...什么叫脚手架？？？过过过！npm

Hello World先锋Demo官

好，看到代码了，先跟着敲一遍再说。
工具：VS2013浏览器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

输出app

Hello Vue!

...没有得到哪怕一丝丝成就感。asp.net

你问我为啥把引用放下面而再也不Head里？那你确定跟我是一个级别的程序员，啊哈哈哈~由于有大佬说这样不影响上面HTML的加载速度。

经过观察，大体能够看出来，首先你的有一个div，而且他要有一个id，而后两对大括号{{}}是显示下面var app这个Vue对象的data中的一个属性message的值。el视频中也提到了，对应<div id="app">中的app，而后这个div和这个var app俩人就配对成功了！

官方提到：经过浏览器的JS控制台修改app.message值，会看到变化

友情提示：在谷歌浏览器，按F12，切换到Console，输入app.message='大哥别杀我！'回车，他变了，没了。

真的，你不知道我经历了什么！

绑定元素Demo

先敲，先敲...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br/>
        <span v-bind:title="message">
            鼠标悬停几秒听说有看头？
        </span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

没有智能感知，代码也不停报错，不过编译不会报错，运行也能够看到结果，老样子用F12修改app.message的值，效果好像与上一个Demo是同样的。

说明：v-bind是指令，指令带前缀v-，v-bind将message的值绑定:给title，v-bind:title="message"

显示隐藏元素Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br />
        <span v-bind:title="message">
            鼠标悬停几秒听说有看头？
        </span>
        <br />
        <p v-if="seen">Now you see me - 我伦</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString(),
                seen: true
            }
        })
    </script>
</body>
</html>

友情提示：data中用,分割多个属性，姑且就叫属性吧。
老样子F12 - Console - app.seen=false，结果是我伦不见了。
因此说v-if用来控制元素是否显示的吧。

v-for

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br />
        <span v-bind:title="message">
            鼠标悬停几秒听说有看头？
        </span>
        <br />
        <p v-if="seen">Now you see me - 我伦</p>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString(),
                seen: true,
                todos: [
                    { text: '第一个' },
                    { text: '第2个' },
                    { text: '第三个' }
                ]
            }
        })
    </script>
</body>
</html>

结果：

Hello Vue!2018/5/1 下午10:44:59 
鼠标悬停几秒听说有看头？ 
Now you see me - 我伦

第一个
第2个
第三个

在控制台输入：app.todos.push({ text: '新项目' })

结果：

Hello Vue!2018/5/1 下午10:44:59 
鼠标悬停几秒听说有看头？ 
Now you see me - 我伦

第一个
第2个
第三个
新项目

多了一个新项目

感受官方在不停地炫耀这个值同步改变的功能。

目测是个click事件的Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br />
        <span v-bind:title="message">
            鼠标悬停几秒听说有看头？
        </span>
        <br />
        <p v-if="seen">Now you see me - 我伦</p>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <button v-on:click="reverseMessage">啥叫逆转消息？？？</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString(),
                seen: true,
                todos: [
                    { text: '第一个' },
                    { text: '第2个' },
                    { text: '第三个' }
                ]
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

今天先到这里吧。

个人 Vue.js 学习日记 （一）

前言