vue

vue是啥啊？

一个mvvm框架（库），和angular类似。
比较小巧，容易上手。

官网：https://cn.vuejs.org/

vue和angular区别：

• vue——简单易学
  指令以v-xxx
  一片html代码配合json，再new出来vue实例
  个人维护项目（尤雨溪）
  适合移动端项目，小巧

• angular——上手难
  指令以ng-xxx
  所有属性和方法都挂到$scope身上
  angular由Google维护
  适合：pc端项目

共同点：不兼容低版本IE
vue基本雏形：

//angular展示一条基本数据
var app = angular.module('app',[]);
app.controller('ctrl',['$scope',function($scope){
             $scope.msg="welcom"
}])

html:
{{msg}}

    
        
        
        
    
    
        
        
        

            
{{message}}
            click
        
    
    

常用指令：
指令是什么：扩展html标签的功能，属性。
v-model 一般应用在表单元素（input） 双向数据绑定
循环：v-for="name in arr" {{name}} {{$index}}——下标
v-for="name in obj" {{name}} {{$index}}——下标 {{$key}}——属性名

事件：
v-on:click="函数"

使用bootstrap+vue实现简易留言板（todolist）

bootstrap：css框架 跟jQueryMobile一样
只需要给标签赋予class，角色
依赖jQuery

    
        
        
        
        
        
        
    
    
        

            

                

                    用户名：
                    
                
                

                    年龄：
                    
                
                

                    
                    
                
            
            

            

                
用户信息表
                

                    
序号
                    
名字
                    
年龄
                    
操作
                
                

                    
{{index + 1}}
                    
{{item.name}}
                    
{{item.age}}
                    

                        删除
                    
                
                
                

                    

                        删除全部
                    
                
                

                    
 
                        
暂无数据...
                    
                
            
            
            

                

                    

                        

                            
                                ×
                            
                            
 确认删除吗？
                        
                        

                            取消
                            确认