我的 Vue.js 学习日记 （一）

2024年1月17日 125次阅读 来源: bei6

前言

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

Why Vue.js

那么是什么原因让我选择了Vue呢？现在的我并不知道Vue其他的优势，只知道他做到了双向绑定，这很方便，那么就是他吧！

起步

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

门槛

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

引用

两种方式

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

或

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

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

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>

输出

Hello Vue!

…没有获得哪怕一丝丝成就感。

你问我为啥把引用放下面而不再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>

今天先到这里吧。

    原文作者：bei6
    原文地址: https://segmentfault.com/a/1190000014683721
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞