Vue基础

Infi-chu:

http://www.cnblogs.com/Infi-chu/

一、什么是Vue
1.Vue.js是一个构建数据驱动的Web界面的渐进式框架
2.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
3.核心是一个响应的数据绑定系统

二、基本使用
eg.


   
   
   
   
   


   
   

{{content}}

【注】
1.开发包
vue.js
2.生产包
vue.min.js

三、基本语法
eg.


   
   
   
   


   

       
       
       
        计数器:{{count}}
        {{linkdata}}
       

{{content}}

   

四、条件渲染
eg.


   
   
   
   


   

       
       
       
       
       
       
       
       
       
       
   

【注】
1.v-show用法和v-if大致一样，但是不支持v-else，他和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的
2.在vue中使用v-show，原来的css代码不能设置display属性，会导致冲突

五、列表渲染
1.js部分

2.普通列表

{{item}}

3.列表下标

角标{{index}}==数值{{item}}

4.有且仅有一个对象

{{item}}

属性值{{obj}}-----属性名{{key}}

5.对象列表

属性值1:{{obj.name}}==属性值2:{{obj.age}}

六、表单输入绑定（双向绑定数据）
可以用 v-model 指令在表单\ 及 \ <select> 元素上创建双向数据绑定<br>eg.<br><!-- 01.单行文本框 --><br>        <input type="text" v-model='content'><br>        <p>{{content}}</p><br><br><!-- 02.多行文本框 --><br>        <textarea v-model='content'>
       

{{content}}

        男
        女
       

{{content}}

        吃饭
        睡觉
        打豆豆
       

{{like}}

     


       
            北京
            上海
            广州
            深圳
       
       

{{address}}

【注】js部分见五