概念:vue是一个构建数据驱动的web界面的渐进式框架,它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
vue对比angular
1、vue在设计之初参考了很多angularjs的思想
2、vue相对比与angular比较简单
3、 vue相对比与angular比较小巧,运行速度快
4、 vue与angular数据绑定都可以用{{}}
5、vue指令用v-xxx angularjs用ng-xxx
6、vue数据放在data对象里面,angular数据绑定到$scope对象上
vue对比react
1、vue与react都使用 virtual DOM
2、vue与react都提供了组件化的视图组件
3、 vue与react将注意力集中保持在核心库,有丰富的插件库
4、react使用jsx渲染页面,vue使用更简单的模版
5、vue比react运行速度更快
计算属性 放在computed:{//函数} 效率高 methods设置效率低
vue基础语法:
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
Var vm=new Vue({})
基础属性:
el:获取执行vue的dom元素-初始化范围
data : 存储数据
methods :执行的方法
1)绑定数据
{{}} 或者 v-text=“” 只能绑定纯文本
绑定html angular中 ng-bind-html vue中 v-html
表达式 在{{}}中 ±*/ 直接可用 三木运算一样可用
2)事件绑定
v-on:click=“” 或者 @click=“”
绑定事件 --事件中有event对象 函数参数为 $event
操作数据 通过this操作
3)其他指令
v-for=“item in list” 循环 item循环到的数组值
v-for=“(item,key) in list” key循环到的下标index
v-model=“” 表单元素value 不可直接{{}}获取,需在vue初始化设置一下
v-if 布尔值 为true 代表节点消失
V-if 与 v-else-if v-else 可以构成判断
V-show布尔值 为true 代表节点设置了display:none属性
无v-hide (不要任意猜测)
V-once 一次渲染
行间样式设置

v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
data: {activeColor: 'red',fontSize: 30}

v-bind:style的对象语法十分直观——看着非常像 CSS,其实它是一个JavaScript对象
数组样式形式设置

v-bind:style=“[styleObjectA, styleObjectB]”data: {styleObjectA: {color: 'red'},styleObjectB: {fontSize: '30px'}}

类名设置
v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
Isa isb 值为true 添加相应类名
为false 不添加类名
对象形式设置

<div :class="classobj"></div>
classobj:{
    active:true,
    'class-a':true,
    'class-b':true
}

绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法
(src title class name等属性写法一样)
计算属性computed与methods的区别:
computed: 效率高
methods:设置效率低
bootstrap+vue实现todolist

<div id="vue_det">
    <input type="text" v-model = "ipt" />
    <button @click="tap()">添加</button>
    <table class="table">
        <tr v-for="(item,i) in this.arr ">
            <td>{{i}}</td>
            <td>{{item}}</td>
            <td @click="tap2(i)">删除</td>
        </tr>
    </table>
    <script>
        var vm = new Vue({
            el:'#vue_det',
            data:{
                ipt:"",
                arr:[],
            },
            methods:{
                tap(){
                    this.arr.push(this.ipt);
                    this.ipt='' ;
                },
                tap2(i){

this.arr.splice(i,1)
                }
            }

})
    </script>
</div>
实现金额结算:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
       单价:<input type="text" v-model="a">
        数量:<input type="text" v-model="b">
        运费:<span>{{yunfei}}</span>
        总价:<span>{{sum}}</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#box',
            data:{
                a:'',
                b:'',
                yunfei:10
            },
            computed:{
                sum(){
                  if(this.a*this.b<88){
                      this.yunfei=10;
                      return this.a*this.b+this.yunfei;
                  }else{
                      this.yunfei=0;
                      return this.a*this.b+this.yunfei;
                  }

}
            }
        })
    </script>
</body>
</html>

对vue与angular和react的对比相关推荐

  1. 前端框架Vue、angular、React的优点和缺点,以及应用场景

    学习web前端开发中,会有很多的框架,那么目前流行的框架有哪些,以及他们的优缺点和应用场景有哪些呢? 一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界 ...

  2. Vue、Angular、React深入介绍,项目实例,前端框架之最

    简介         Vue评价:"简单却不失优雅,小巧而不乏大匠".  2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,"vue.js兼 ...

  3. Vue与Angular以及React的区别

    1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令:都支持过滤器:内置过滤器和自定义过滤器:都支持双向数据绑定:都不支持低端浏览器. 不同点: AngularJS的学习成本高, ...

  4. Vue为什么能逆袭 Angular和React成为主流前端框架?

    作者 | Maja Nowak  译者 | 苏本如  责编 | 屠敏 来源:CSDN https://www.monterail.com/blog/reasons-why-vuejs-is-popul ...

  5. 2021 年 Angular vs. React vs. Vue 前端框架对比

    2021 年 Angular vs. React vs. Vue 前端框架对比 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架 ...

  6. 【React、Vue 、 Angular 共分天下,2018首将会是谁?】

    要论 2017 年最主流的三个 Web 前端结构,应莫过于 Angular.Vue 和 React 了.然而在实际运用中,这三个结构却不尽相同,对于规模不大的前端项目来说,Vue 因其极易上手会被列出 ...

  7. 【译】前端框架技术选型 React vs. Vue (vs. Angular)

    这是该系列文章的第2部分:"Fundbox的前端技术选型".第1部分介绍了Fundbox的技术现状以及我们重新设计它的动机.第2部分介绍了选择新框架背后的考虑:是迁移到React, ...

  8. JavaScript 年度调查报告:React、Vue 和 Angular 三分天下,谁将在 2018 年独占鳌头?

    点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 要论 2017 年最主流的三个 Web 前端框架,应莫过于 Angular.Vue 和 Re ...

  9. 2017html5框架排名,2017年最主流前端框架比较:Angular、React 和 Vue

    如果你是一名前端开发人员,或者是想要学习web前端开发技术的小伙伴,必须要了解的这三款最主流的前端框架.不仅可以帮助你拿到高薪,也能够提升你的编程思想. 目前前端开发技术主要可以分成四个方面: 1.前 ...

最新文章

  1. MySQL 数据格式化
  2. Linux 每日一练习!!反单引号·(键盘上数字1左边)··
  3. 将微服务部署到 Azure Kubernetes 服务 (AKS) 实践
  4. jep290涉及jdk版本_JDK 14 / JEP 305模式匹配“ Smart Casts”实例
  5. 【渝粤教育】电大中专建设工程法规1作业 题库
  6. 前端学习(2225):react之类定义组件
  7. 两个分布的特征映射_跨语言分布表示学习方法概述
  8. 简单java游戏代码_Java经典小游戏——贪吃蛇简单实现(附源码)
  9. android按钮放图片不显示文字,Android 自定义标签 Imagebutton实现ImageButton里放置文字...
  10. 从阿里外包月薪5K到转岗正式员工月薪15K,这100多天的心酸只有自己知道...
  11. premiere小tips(参考于干的教程)
  12. tp中如何调用科大讯飞的语音转写
  13. Android中摇一摇的实现
  14. 匿名吐槽有风险,脉脉又被告了
  15. 简述raid 0 1 5 10的区别
  16. Excel数据分析常用函数④——日期函数(now,today,datedif,weekday,weeknum,text)
  17. 【QGIS插件安装】buildseg: QGIS plugin for building extraction
  18. Android使用RecyclerView实现仿微信联系人列表
  19. Windows桌面任务栏上面无线网显示不见了如何解决
  20. Unity3D-实战-01坦克大战-day03箱式对撞机、钢体、2D渲染层级问题、重力问题(出现坠落现象)、旋转问题、左右上下冲突问题、抖动问题

热门文章

  1. csu1671 经营小卖部(DP 完全背包 好题)
  2. 计算机网络密码凭据,电脑无法上网时总是提示需要输入网络密码如何解决
  3. 2022 年中回顾|一文看懂预训练模型最新进展
  4. java校内报纸实验报告_第六周Java实验报告四
  5. 【ABAP】销售订单修改税率
  6. pytorch之models
  7. 苹果6s为什么连接不上服务器未响应,iPhone6s/6s plus连接iTunes没反应怎么办?苹果手机无法连接iTunes的解决方法...
  8. python一只青蛙一次可以_Python面试题系列之11 变态青蛙跳
  9. 债务人无力偿还,债权人可否直接起诉“次债务人”
  10. 天天向上的力量python代码解释_python天天向上的力量