Hello Vue

目录

1.什么是Vue?

2.第一个Vue

 3.Vue基本语法

4.Vue绑定事件

5.双向绑定

6.组件

---

1.什么是Vue?

Vue 是一套用于构建用户界面的渐进式JavaScript框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(html+css+js)与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用

css预处理器: 

css预处理器定义了一门新的语言,其基本思想是,用一门专门的编程语言为css增加一些编程特性,将css作为目标生成文件,然后开发者就只需要用这种语言对css进行目标编码工作,通俗来说就是"用一门专门的编程语言进行web页面样式设计,在通过编译器转换为正常的css文件,以供项目使用".

常用的css预处理器:

SASS:基于Ruby,通过服务端处理,功能强大.解析效率高。需要学习Ruby语言,上手难度高于LESS。LESS:基于Node.js,通过客户端处理,使用简单,功能比SASS简单,解析效率也低于SASS但是在实际开发中却足够了.

NPM：管理工具,类似于Maven！

2.第一个Vue

    
    





    {{message}}

 这里出现了View和Model那Vm在那哪里呢? 

Vue是双向绑定的,并且监听,如果js的值发生了变化那么引用这个值的View层也会发生变化如:

 回车后:

 3.Vue基本语法

我们已经成功的完成了第一个vue程序,而vue却远远不止这些,如果不想使用{{}}来调用js中的属性则可以使用这种方式:

    
    





    
    
        鼠标悬停几秒
    

所看到的 v-bind：被称为指令,指令带有前缀v- 以此来表示他是vue的特殊特性,在这里表示他们会渲染DOM的特殊表示行为,如果在js中进行更改,那么页面上的message也会同时更改！

如for循环指令:

    
    
    




    
        {{item.message}}--{{index}}
    

if标签指令:

    
    



    聪明
    及格了
    继续加油!

4.Vue绑定事件

    
    




    
        
        点击我
    

5.双向绑定

    
    




    
    输入的内容:{{massage}}

6.组件

组件可以使我们自定义的标签合法化如:

组件无法之间进行绑定！需要props进行接收值来绑定接收！