对vue与angular和react的对比

最新推荐文章于 2024-06-17 03:49:42 发布

vues

最新推荐文章于 2024-06-17 03:49:42 发布

阅读量1.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/hbwang_716/article/details/100998856

版权

vue 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

概念：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>

vues

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
对vue与angular和react的对比

概念：vue是一个构建数据驱动的web界面的渐进式框架，它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件vue对比angular1、vue在设计之初参考了很多angularjs的思想2、vue相对比与angular比较简单3、 vue相对比与angular比较小巧，运行速度快4、 vue与angular数据绑定都可以用｛｛｝｝5、vue指令用v－xxx angular...
复制链接

扫一扫