vue.js基础

使用vue,js第一步先是安装(http://cn.vuejs.org/)
在官方文档中就可以直接下载并用

vue介绍

vue是一套构建用户界面的 渐进式框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

最基本的实现方法：

      

          {{message}}        //输出的纯文本用双大括号括着
      
              //hello

如果要输出真正的 HTML ，你需要使用v-html指令：

      

        
 //name为HTML代码，直接可以输出不需要双大括号
      
      

注意，你不能使用 v-html来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。*

条件与循环

    

        
{{message}}       //v-if 语句的形式，通过look的布尔值决定是否执行
        
    
    

Paste_Image.png

还可以在控制台上增添新的 message值

     vm.items.push({message:"better"})   

Paste_Image.png

事件

v-on事件

     

        Hello   v-on进行连接click点击函数
    
    

Paste_Image.png

Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。如：

    

        {{message}}
        {{name}}
        

        
    
    

Paste_Image.png

v-bind指令绑定class

    
    

        {{message}}
    
       //注意的是v-if不能直接写在根元素上 

template方法