vue初步认识

最新推荐文章于 2024-12-10 15:03:26 发布

cfcp

最新推荐文章于 2024-12-10 15:03:26 发布

阅读量288

点赞数 1

分类专栏：学习笔记文章标签：框架 vue

本文链接：https://blog.youkuaiyun.com/qq_33562825/article/details/59200845

版权

学习笔记专栏收录该内容

13 篇文章

订阅专栏

vue到底是什么？

一个mvvm框架（库），和angular类似比较容易上手、小巧
vue和angular的区别？

->1.vue简单、易学    
 指令以v-xxx开头    
 一片html代码配合json,再new出来vue实例  
 由个人维护    
 适合移动端项目      
 vue发展势头很猛 github上star数量已经超越angular
->2.angular上手难           
指令以ng-xxx开头        
所有属性和方法都挂到$scope身上     
由谷歌维护        
更适合PC端项目

共同点不兼容低版本IE

代码对比

->angular angular展示一条数据

var app = angular.module(‘app’,[]);
app.controller(‘mainController’.function( $scope){$ scope.msg = ‘welcome’; })

html:

 <body ng-app = 'app'></body>>
   <div ng-controller = 'mainController'>
          <div>{{msg}}</div>
   </div>>

->vue

    window.onload = function(){
            var viewmodel = new Vue({
                el:'#box',//告诉你的数据需要展示到那个容器中
                data:{//data中显示你要展示的数据
                    msg:'welcome vue'
                }
            });
        }

<div id="box">
        {{msg}}
    </div>

指令：扩展html标签功能

angular常用指令: ng-model(一般放在表单中) ng-repeat vue常用指令：v-model
循环：v-for=’value in arr’ 或 v-for=’(k,v) in json’ 事件：v-on:click=show();

vue事件深入

->事件时可以简写的 v-on:click=”可以简写成@click=”

事件对象：
@click=’show($event,参数)’ 若果改变传参位置则在methods中也要改变
阻止事件冒泡：

a、传入$event 方法中通过e.cancelBubble=true方法
b、@click.stop=”

阻止默认行为：

a、e.preventDefaul
b、@contextmenu.prevent=’ ’

键盘事件：

a、e.keyCode
b、@keydown.键盘码=’show()’
c、@keydown、left(right、top、down) =’show()’

vue属性

v-bind:src=” 可以简写成 :src=”

vue模板

{{msg}}数据更新模板变化
{{*msg}}数据只绑定一次
{{{msg}}html转义输出

过滤器->过滤模板数据

系统提供一些过滤器
uppercase、 lowercase 、capitalize 、currency {{msg|filter}}
{{12|currency ‘￥’}}可以显示￥12.00 而angular还需要引入一个国际包

交互

*angular中注入$http
如果vue想做交互，必须引入官方提供的另一个库
vue-resouce
交互的方式：
get

                        this.$http.get('get.php',{
                            a:1,
                            b:2
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });

post

                        this.$http.post('post.php',{
                            a:1,
                            b:20
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        })

jsonp*

                           this.$http.jsonp('https://sug.so.360.cn/suggest?  callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=s',{
                            word:'s'
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        })