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

头像
youbei
    阅读 6 分钟
    6

    前言

    我是一名很普通的.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>

    今天先到这里吧。

    vue.js
    youbei
    318 声望70 粉丝
    下一篇 »
    我的 Vue.js 学习日记 （二）

    引用和评论

    推荐阅读
    头像
    Go API 开发基础

    youbei阅读 2.3k

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    2024最全ECharts 实战大全（速记版+资源）

    程序员海军赞 9阅读 2.5k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 6.4k

    头像
    Vue使用mixins

    一念赞 4阅读 2.8k

    头像
    startViewTransition的简单示例

    热饭班长赞 1阅读 3.7k

    0 条评论
    得票最新