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

前言

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

Why Vue.js

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

起步

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

门槛

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

引用

两种方式

或

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

Hello World先锋Demo官

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




    
    


    
        {{message}}

输出

Hello Vue!

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

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

通过观察，大致可以看出来，首先你的有一个div，并且他要有一个id，然后两对大括号{{}}是显示下面var app这个Vue对象的data中的一个属性message的值。el视频中也提到了，对应

中的app，然后这个div和这个var app俩人就配对成功了！

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

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

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

绑定元素Demo

先敲，先敲...




    
    


    
        {{message}}
        

        
            鼠标悬停几秒据说有看头？

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

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

显示隐藏元素Demo




    
    


    
        {{message}}
        

        
            鼠标悬停几秒据说有看头？
        
        

        Now you see me - 我伦

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

v-for




    
    


    
        {{message}}
        

        
            鼠标悬停几秒据说有看头？
        
        

        Now you see me - 我伦
        
            
                {{todo.text}}

结果：

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




    
    


    
        {{message}}
        

        
            鼠标悬停几秒据说有看头？
        
        

        Now you see me - 我伦
        
            
                {{todo.text}}

今天先到这里吧。

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

前言