vue:
    读音:    v-u-e
    view

vue到底是什么?
        一个mvvm框架(库)、和angular类似
        比较容易上手、小巧
    mvc:
        mvp
        mvvm
        mv*
        mvx
    官网:http://cn.vuejs.org/    
    手册: http://cn.vuejs.org/api/

vue和angular区别?
    vue——简单、易学
        指令以 v-xxx
        一片html代码配合上json,在new出来vue实例
        个人维护项目

适合: 移动端项目,小巧

vue的发展势头很猛,github上start数量已经超越angular
    angular——上手难
        指令以 ng-xxx
        所有属性和方法都挂到$scope身上
        angular由google维护
        
        合适: pc端项目

共同点: 不兼容低版本IE
-------------------------------------------
vue基本雏形:
    angular展示一条基本数据:
        var app=angular.module('app',[]);

app.controller('xxx',function($scope){    //C
            $scope.msg='welcome'
        })

html:
        div ng-controller="xxx"
            {{msg}}
    vue:
        html:
            <div id="box">
                {{msg}}
            </div>

var c=new Vue({
                el:'#box',    //选择器  class tagName
                data:{
                    msg:'welcome vue'
                }
            });
常用指令:
    angular:
         ng-model   ng-controller
         ng-repeat
         ng-click
         ng-show

$scope.show=function(){}
    指令: 扩展html标签功能,属性

v-model    一般表单元素(input)    双向数据绑定

循环:
        v-for="name in arr"
            {{$index}}

v-for="name in json"
            {{$index}}    {{$key}}
    
        v-for="(k,v) in json"
    事件:
        v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
            el:'#box',
            data:{ //数据
                arr:['apple','banana','orange','pear'],
                json:{a:'apple',b:'banana',c:'orange'}
            },
            methods:{
                show:function(){    //方法
                    alert(1);
                }
            }
        });
    显示隐藏:
        v-show=“true/false”
bootstrap+vue简易留言板(todolist):
    
    bootstrap: css框架    跟jqueryMobile一样
        只需要给标签 赋予class,角色
        依赖jquery

确认删除?和确认删除全部么?
-----------------------------------------
事件:
    v-on:click/mouseover......
    
    简写的:
    @click=""        推荐

事件对象:
        @click="show($event)"
    事件冒泡:
        阻止冒泡:  
            a). ev.cancelBubble=true;
            b). @click.stop    推荐
    默认行为(默认事件):
        阻止默认行为:
            a). ev.preventDefault();
            b). @contextmenu.prevent    推荐
    键盘:
        @keydown    $event    ev.keyCode
        @keyup

常用键:
            回车
                a). @keyup.13
                b). @keyup.enter
            上、下、左、右
                @keyup/keydown.left
                @keyup/keydown.right
                @keyup/keydown.up
                @keyup/keydown.down
            .....
-----------------------------------------
属性:
    v-bind:src=""
        width/height/title....
    
    简写:
    :src=""    推荐

<img src="{{url}}" alt="">    效果能出来,但是会报一个404错误
    <img v-bind:src="url" alt="">    效果可以出来,不会发404请求
-----------------------------------------
class和style:
    :class=""    v-bind:class=""
    :style=""    v-bind:style=""

:class="[red]"    red是数据
    :class="[red,b,c,d]"
    
    :class="{red:a, blue:false}"

:class="json"
        
        data:{
            json:{red:a, blue:false}
        }
    --------------------------
    style:
    :style="[c]"
    :style="[c,d]"
        注意:  复合样式,采用驼峰命名法
    :style="json"
-----------------------------------------
模板:
    {{msg}}        数据更新模板变化
    {{*msg}}    数据只绑定一次
    
    {{{msg}}}    HTML转意输出
-----------------------------------------
过滤器:-> 过滤模板数据
    系统提供一些过滤器:
    
    {{msg| filterA}}
    {{msg| filterA | filterB}}

uppercase    eg:    {{'welcome'| uppercase}}
    lowercase
    capitalize

currency    钱

{{msg| filterA 参数}}

....
-----------------------------------------
交互:
    $http    (ajax)

如果vue想做交互

引入: vue-resouce

get:
        获取一个普通文本数据:
        this.$http.get('aa.txt').then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
        给服务发送数据:√
        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:
        https://sug.so.360.cn/suggest?callback=suggest_so&word=a

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
            wd:'a'
        },{
            jsonp:'cb'    //callback名字,默认名字就是"callback"
        }).then(function(res){
            alert(res.data.s);
        },function(res){
            alert(res.status);
        });
        
https://www.baidu.com/s?wd=s

作业:
        1. 简易留言-> 确认删除? 确认删除全部
        2. 用vue get 写个例子    weibo

vue 和ng的区别的更多相关文章

  1. vue和angular的区别:

    相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...

  2. angular和vue还有jquery的区别

    angularjs简单介绍和特点 首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每 ...

  3. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  4. vue和jQuery的区别

    从jquery到vue或者说是到mvvm的转变是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去 vue和jquey对比 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取 ...

  5. Vue和React的区别,以及如何选择?

    简介 React:React是一个用于创建可重用且有吸引力的UI组件的库.它非常适合代表经常变化的数据的组件. Vue:Vue.js是一个开源JavaScript框架,能够开发单页面应用程序.它还可以 ...

  6. bootstrap与vue,react的区别

    链接(与Vue区别):https://www.php.cn/faq/423095.html 链接(BootStrap, React, Vue的比较):https://www.jianshu.com/p ...

  7. vue watch 和 computed 区别与使用

    目录 computed 和 watch 的说明 与 区别 computed 计算属性说明: watch 监听属性说明: watch 和 computed 的区别是: 使用 参考官方文档 compute ...

  8. 浅析angular,react,vue.js jQuery使用区别

    前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...

  9. Flume OG 与 Flume NG 的区别

    1.Flume OG:Flume original generation 即Flume 0.9.x版本    Flume NG:Flume next generation ,即Flume 1.x版本 ...

随机推荐

  1. LaTeX绘图宏包 Pgfplots package

    Pgfplots package The pgfplots package is a powerful tool, based on tikz, dedicated to create scienti ...

  2. IDE的文件和代码模板

    设置IDE的的模板,可以在创建文件的时候,自动产生模板内容,模板里可以 模板头设置: # -*- coding: utf- -*- """ --------------- ...

  3. 高性能Mysql主从架构的复制原理及配置

    1. 复制概述 1.1 mysql支持的复制类型 1.2 复制解决的问题 1.3 复制如何工作 2. 2 复制配置 2.1创建复制帐号 2.2拷贝数据 2.3配置master 2.4配置slave 2 ...

  4. JS中常用坐标offset、scroll、client的区别

    在IE中scrollWidth:获取对象的滚动宽度scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop ...

  5. 高性能HTML

    避免使用Iframe Iframe也叫内联frame,可以把一个HTML文档嵌入到另一个文档中.使用iframe的好处是被嵌入的文档可以完全独立于其父文档,凭借此特点我们通常可以使浏览器模拟多线程,需 ...

  6. Python 爬虫 之 阅读呼叫转移(三)

    尽管上一篇博客中我们能够连续地阅读章节了,可是.难道每一次看小说都执行一下我们的 Python 程序?连记录看到哪里都不行,每次都是又一次来过?当然不能这样,改! 如今这么多小说阅读器,我们仅仅须要把 ...

  7. linux apache服务器优化建议整理(很实用)

    转载:http://www.cnblogs.com/zhongbin/archive/2013/06/11/3131865.html 1.apache服务器的time_wait过多 fin_wait1 ...

  8. URL转发

    原理:iframe 代码: <?php if($_SERVER['HTTP_HOST']=="i.mansions.com.cn"){ $html = <<< ...

  9. KineticJS教程(3)

    KineticJS教程(3) 作者: ysm  3.图形对象 3.1.Shape Kinetic提供了一个Shape对象用于在层上绘制图形,我们可以通过Kinetic.Shape()构造方法返回一个S ...

  10. ObjectMapper处理从远程获取的Object对象 (http://bbs.csdn.net/topics/390337813?page=1)这个网址也有讲解

    微服务中从其他服务获取过来的对象,如果从Object强转为自定义的类型会报错,利用ObjectMapper转换. ObjectMapper mapper = new ObjectMapper(); D ...