vue学习（一） vue和angular大比较

1.vue和angular的异同？

 

vue

• 上手容易
• 指令以 v-xxx
• html+json,然后再new Vue()实例化对象
• 个人维护项目
• 适合移动端

angular

• 上手难
• 指令以 ng-xxx
• 列表内容
• 所有属性和方法都挂载到$scope上
• 由google维护
• 适合web端

2.vue和angular的雏形差异

    vue:

	
		
		
	
	
		

			{{msg}}
		
		
		
	

    angularJs

	
		
		
	
	
		
		

			{{msg}}
		
		
		
	

vue：直接实例化对象，再将带有数据的对象挂载到相应DOM节点即可。

angular : 中间多了一层controller，所有操作在相应controller的$scope中进行(纯属个人理解)。

2.vue事件

       常见事件     v-on:click/mouseover...   简写 @click

       事件对象     @click = "show($event)"

       事件冒泡    a) ev.cancelBubble = true;    b) @click.stop 

       默认事件     @contextmenu 

                  阻止默认行为  a) ev.preventDefault();     b) @contextmenu.prevent

       键盘事件   @keydown  @keyup   $event ev.keycode  回车(keycode = 13)

 3.属性              

     写法： v-bind:src=""，简写 :src=""  不用这个可能会报一个404错误  

    class和style  

            class用法   1.  :class="[a,b]"   a,b为data中的数据   2. :class="{a:true,b:false}"   3.:class="json"  data:{json:{a:true,b:false}}}

            style用法   同class

 4.模板    

        {{msg}}实时更新

        {{*msg}}数据只绑定一次

        {{{msg}}} html转义输出

 5.过滤器 

         内置过滤器     uppercase lowercase capitalize currency(美元)

         语法 : {{msg | filterA}}  {{'welcome' | filterA | filterB}}   过滤器传参   {{msg | filterA 参数}}

6.交互

引入vue-resource

//get 请求
this.$http.get(url,param).then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
});

//post请求
this.$http.post(url,param,{
    emulateJSON:true
},then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
})
)

//jsonp
this.$http.jsonp(url,param,{
jsonp : 'cb'     //callback函数命名为cb,默认名称为callback
},then(function(res){
{
    emulateJSON:true
},then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
})
)

//jsonp
this.$http.jsonp(url,param,{
jsonp : 'cb'     //callback函数命名为cb,默认名称为callback
},then(function(res){ alert(res.data);
},function(res){
    alert(res.status);
})                              
)  

//另外一种写法  $http默认为get
this.$http({
    url : '',
    data :'',
    method : 'get/post/jsonp'
}).then(function(res){
     
})

7.生命周期
 

	
		
		
	
	
		

			{{msg}}
		
		
		
	

 

8.计算属性的使用

	
		
		
	
	
		

			{{a}}{{b}}
		
		
		
	

9.实例常用方法

vm.$mount("#box") -- >手动挂载vue

vm.$options.自定义属性 --> 获取自定义属性

vm.$destroy --> 销毁对象

vm.$log() --> 查看现在数据的状态

10.过滤器（略，涉及过滤器已经都有替换写法.）

    
    
    
    
    
    
    


    

        
        

            

                {{val}}
            
        
    
    

11.代码复用和抽象-->组件 对普通DOM元素进行底层操作-->自定义指令

12.前端包管理器bower的使用，vue使用动画(结合animate.css使用，略)

13.vue组件及之间的传值

	
		
		
	
	
		

			
			
			
			
			
			
			
			{{postFontSize}}
			
			
		
		
		
		
		
	

14.插槽(内容分发？略)

15.vue路由的使用(和组件搭配使用,)

16.vue-loader

.vue文件格式(该文件由vue-loader读取)






webpack简单的目录结构
    |-index.html
    |-main.js    入口文件
    |-App.vue    vue文件
    |-package.json 工程文件（依赖，名称） npm init --yes生成
    |-webpack.config.js webpack配置文件

webpack准备工作
    cnpm install webpack
    cnpm install webpack-dev-server   带服务器
  
    App.vue ->变成正常代码  vue-loader   //--save-dev 下载后写入package.json里
    cnpm install vue-loader --save-dev
    cnpm install vue-html-loader --save-dev  
    vue-html-loader,css-loader,vue-style-loader
    vue-hot-reload-api           //改完刷新后验证代码

    babel-loader
    babel-core
    babel-plugin-transform-runtime
    babel-preset-es2015
    babel-runtime

核心 
    vue

页面加载流程
main.js 将组件挂在到body(index.html中)上-->涉及App.vue(涉及各组件用，算是核心文件吧)


//如何运行一个webpack打包的项目
    step1.在该项目下运行 npm install   or  cnpm install
    step2.npm run dev
          --> package.json
            "scripts": {
                "dev": "webpack-dev-server --inline --hot --port 8082"
              }
             EADDRINUS 端口被占用


vue-router配合vue-loader使用
   1.下载vue-router npm install vue-router
   2.import VueRouter from 'vue-router'
   3.Vue.use(VueRouter);   
   4.var router = new VueRouter();
    router.map({路由规则});    
   5.开启
     router.start(App,'#app);


npm run build  -->本质 webpack -p

17.vue-cli的使用

含有很多种基本模板
    webpack
    webpack-simple
    
    browserify
    browserify-simple 

基本使用流程
1.npm install vue-cli -g  安装vue命令环境
    验证是否安装   vue --version
2.生成项目模板
    vue init <模板名> 本地文件夹名称
3.进入生成目录里面
    npm install
4.npm run dev


报npm版本过低的错误时，删除下载模块重试几次或者用cnpm下载就行.

18.vue2.0 transition的使用