vue入门 vue与react和Angular的关系和区别
一、为什么学习vue.js
vue.js兼具angular.js和react的优点，并且剔除了他们的缺点
官网：http://cn.vuejs.org/
手册：http://cn.vuejs.org/v2/api/
二、vue.js是什么
Vue是一个"MVVM框架（库）"，和angular类似，相比angular小巧，比较容易上手
Vue是一个构建用户界面点的渐进式框架，与其他重量级框架不同的是，vue采用自底向上增量开发的设计
vue的核心库"只关注视图层"，并且"非常容易学习"，非常容易与其他库或者已有的项目整合，另一方面，vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页面应用
vue的目标是通过尽可能简单的API实现"响应的数据绑定"和"组合的视图组件"
三、MVC/MVP/MVVM的区别
复杂的软件必须有清晰合理的架构，否则无法开发和维护
MVC、MVP和MVVM否是用来解决界面呈现和逻辑代码分离而出现的模式
通俗的讲：就是方便大多数人开发和维护出现的代码分离模式
课外拓展：http://www.cnblogs.com/lori/p/3501764.html
四、MVC
视图（view）:用户界面
控制器（controller）：业务逻辑
模型（Model）:数据处理
五、MVP
MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负 责显示。作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会从直接Model中读取数据而不是通过 Controller。
六、MVVM
MVVM在概念上是真正将页面与数据逻辑分离的模式，在开发方式上，它是真正将前台代码开发者（JS+HTML）与后台代码开发者分离的模式（asp,asp.net,php,jsp）
双向绑定：view的变动，自动反映在viewModel,反之亦然
七、vue对比其他框架
1、vue-angular
1）、vue在设计之初参考了很多angular的思想
2）、vue相比于angular来说更加的简单
3)、vue相当于angular要变得小巧很多，运行速度比angular快
4）、vue和angular绑定都可以用{{}}
5）、vue指令用v-xxx，angular用ng-xxx
6）、vue中数据放在data对象里面，angular数据绑定在$scope上面
7）、vue有组件化概念，angular中没有
2、vue-react
他们都有：
1）、react和vue都是用虚拟DOM Virtual DOM
2)、React和Vue都提供了响应式（Reactive）和组件化（Componsable）的视图组件
3）、React和vue都将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库
4）、React使用JSX渲染页面，Vue使用简单的模板
5）、Vue比react运行更快
八、初始vuejs
1）、下载vuejs的生产版本
下载地址：http://cn.vuejs.org/v2/guide/installation.html
2）、实例化一个Vue对象
var vm = new Vue({
// 选项
})
3)、在页面中div#box
4)、修改配置选项
var vw = new Vue({
el:"#box",//选择元素
data:{//定义数据
msg:"这里是Vue",
name："vue"
}
})
5)、循环数据：传入数组，对象，使用v-for来进行循环遍历数据
list:[1,2,4]
<li v-for="item in list">{{item}}</li>
list1:[{
name:"张三",
age:30
},
{
name:"李四",
age:30
},{
name:"王五",
age:30
}]
<li v-for="item in list1">
{{item.name}}/{{item.age}}
</li>
6）、方法事件
所有的方法都配置于methods选项中
methods:{//放置方法，访问data中的数据，可以直接使用this访问，执行通过v-on来访问,也可以使用简写的形式@click来执行方法
getName:function(){
alert(this.name)
},
run:function(){
alert("这是run方法");
}
}
<div v-on:click="getName()">执行getName方法</div>
<br />
<div @click="run()">执行run方法</div>
7）、双向的数据绑定
<input type="text" v-model="name" />
{{name}}
8)、使用jquery实现todolist
a)引入bootstrap
b)绑定事件
添加数据使用append
删除事件使用remove
9）、使用vue实现todolist
a)引入bootstrap.css,编辑界面
b)实例化vue.js
data:{
info:""//输入框的值
list:[]//数据列表，循环数据使用v-for，因为需要涉及到删除功能，所以需要遍历的时候将索引值也传递进去(item,key) in list
}，
methods:{
addData:function(){//可以传值
this.list.push(this.info)
console.log(this.info)
},
deleteData:function(key){
this.list.splice(key,1)
}
}
<tr v-for="(item,key) in list">
<td>{{item}}</td>
<td><button type="button" class="btn btn-danger " @click="deleteData(key)">删除</button></td>
</tr>
九
1）文本绑定
v-text指令
<span v-text="name"></span> 相当于angularjs中的ng-bind
給data中添加：test:"<strong>你会解析吗</strong>",
如果使用{{test}}则会直接显示出所有的代码，不会解析
如果使用<span v-text="test"></span> 则会直接显示出所有的代码，不会解析
我们可以使用v-html来解析代码
<span v-html="test"></span>
2）绑定属性
data中添加一个id:"这是一个id"
<div v-bind:id="id">添加属性</div>
这里需要注意不要加{{}} 跟angular中的ng-src等属性一样
简写形式
<div :id="id">添加属性</div> url:"https://www.baidu.com/img/bd_logo1.png" <img :src="url"/>
3）事件
复习todolist
事件对象,注意将$event传入方法中
<button data-id="1638" data-user="wxx" @click="requestData($event)">事件对象</button>
requestData:function(event){
console.log(event)
}
数据在srcElement中的dataset中
4）表达式
data:{number:200}
{{number+200}}
data:{ok:true}
{{ok:"是"："否"}}
data:{msg:"倒序输出该字段"}
{{msg.split("").reverse().join("")}}
5)、计算属性--输入提示---autocomplete(表单属性)
computed:{
c:function(){
return this.a + 6;
},
reverseMsg:function(){
return this.message.split("").reverse().join("");
}
}
c={{c}}
<br />
msg={{reverseMsg}}
注意，当message改变之后，会重新计算并且改变视图，写一个按钮来执行改变message为"改变了message"
案例
data中
search:"",
searchList:["appale","pear","banner","orange"],
cumputed
<input type="text" v-model="search"/>
<p v-for="item in searchList">{{item}}</p>
添加计算属性
listSearch:function(){
var arr = [];
var that = this;
this.searchList.forEach(function(val){
if(val.indexOf(that.search)!=-1){
arr.push(val);
}
})
return arr;
}
更改循环条件为
<p v-for="item in listSearch">{{item}}</p>
6）监听数据变化 watch
// vm.$watch(vm) vm.msg 拿到 vue上面data绑定的数据
/*注意监听文本框改变的时候 这里直接写data上面绑定的值*/
<input type="text" v-model='msg'>
data:{
msg:'我是一个数据'
}
vm.$watch('msg',function(newValue,oldValue){
console.log(newValue+'-------'+oldValue);
})
第二种写法
data:{
msg:'我是一个数据'
},
watch:{
msg:function(newValue,oldValue){
console.log(newValue+'-------'+oldValue);
}
}
7）计算属性和方法的对比
案例：翻转字符串----多次调用
//计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
//总结:计算属性比方法的效率更高
8）计算属性和watch对比
Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。思考下面例子：
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
{{fullName}}
watch: {
firstName:function(val){
this.fullName=val+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+val;
}
}
9）计算属性实现
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
10）class语法
.static{
width: 200px;
height: 200px;
}
.class-a{
width: 200px;
height: 200px;
background: orange;
}
.class-b{
background: blue;
}
<div class="static" :class="{ 'class-a': isA, 'class-b': isB }">
v-bind-class111
</div>
<br>
<div :class="classObject">classObject</div>
// 可以传给 v-bind:class 一个对象，以动态地切换class。注意 v-bind:class 指令可以与普通的 class 特性共存。
var vm = new Vue({
el: '#demo', //div .class
data: {
isA: true,
isB: false,
classObject: {
active: true,
'class-a': true
}
}
})
11)style语法
//v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Style 对象语法</div>
data: {
activeColor: 'red',
fontSize: 30
}
12）style数组
<div v-bind:style="[styleObjectA, styleObjectB]">Style 数组语法</div>
data: {
styleObjectA: {
color: 'red'
},
styleObjectB: {
fontSize: '30px'
}
}
13）v-if---dom操作
v-else
v-show--显示隐藏
<h1 v-if="ok">这是一个h1</h1>
<h1 v-show="ok">这是一个h1</h1>
<div v-if="Math.random()>0.5">
大于0.5
</div>
<div v-else>
小于0.5
</div>
data: {
ok:true
}
14、循环的使用
多层循环
可以使用in 也可以使用of
15、 过滤器
Vue.filter('reverseMsg',function(value){
return value.split('').reverse().join('');
});
Vue.filter('toDou',function(value,n1,n2){
console.log(value+'--'+n1+'--'+n2);
if(n1>n2){
return 123;
}else{
return 456;
}
})
data:{
msg:'我是代码搬砖工',
num:'123'
}
{{msg}}
{{msg | reverseMsg}}
{{num}}
{{num | toDou(12,14)}}
16）、ajax请求
axios：http://blog.csdn.net/liaoxiaojuan233/article/details/54176798
fetch:https://segmentfault.com/a/1190000003810652
// 1. 应用fetch或axios 获取数据
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(url)
.then(function (response) {
console.log(response.data.result);
_that.list=response.data.result;
})
.catch(function (error) {
console.log(error);
});
//2. https://github.com/pagekit/vue-resource
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
//第二个参数如果返回数据为callback时可以不设置
this.$http.jsonp(api,{
jsonp:'cb'//如果接口为不为callback,为cb时，修改此参数，例如https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php
}).then(function(data){
console.log(data.body);
that.list=data.body.s;
},function(){
})
vue入门 vue与react和Angular的关系和区别的更多相关文章
- Vue入门 — Vue + vuetifyjs应用实践
分享一个以前学vue时自己练手的一个小项目,项目使用vue-cli3创建,UI库用的是vuetifyjs,vuetifyjs官网:https://vuetifyjs.com/ 数据来源是网上随便找的一 ...
- vue、react、angular三大框架对比 && 与jQuery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
- vue、react、angular三大框架对比
前端的三大框架当属vue.react以及angular了,个人比较偏向react,它的社区比较繁荣,有很多丰富的组件 .angular的话感觉编译时间有点长,等待很恼火. vue与react vue和 ...
- Vue入门---常用指令详解
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
- React vs. Angular vs. Vue
原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...
- 8分钟为你详解React、Angular、Vue三大前端技术
[引言] 当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题.本文就对于当下主流的前端开发技术React.Vue.Angular这三个框架做个相对详尽的探究,目的是为了 ...
- Vue-起步篇：Vue与React、 Angular的区别
毋庸置疑,Vue.React. Angular这三个是现在比较火的前端框架.这几个框架都各有所长,选择学习哪种就得看个人喜好或者实际项目了.相比之下, Vue 是轻量级且容易学习掌握的. 1.Vue和 ...
- vue.js react.js angular.js三者比较
react和vue有许多相似之处,他们都有:1.使用虚拟DOM2.提供了响应式(reactive)和组件化(composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管 ...
- Vue.js vs React vs Angular 深度对比[转]
这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想要回答的. 客观来说,作为核 ...
随机推荐
- 搜索框（SearchView）的功能与用法
SearchView是搜索框组件,它可以让用户在文本框内输入汉字,并允许通过监听器监控用户输入,当用户用户输入完成后提交搜索按钮时,也通过监听器执行实际的搜索. 使用SearchView时可以使用如下 ...
- 解决xtrabackup command not found no mysqld group 问题
现象:手动执行xtrabackup没问题,环境变量检查过也没问题.放到执行计划中 会报错: sh: xtrabackup_56: command not found innobackupex: Err ...
- localStorage的黑科技-js和css缓存机制
一.发现黑科技的起因 今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上.然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术. 呵呵,以下勾起了我侦探的欲 ...
- 搭建spring工程配置数据源连接池
Spring作为一个优秀的开源框架,越来越为大家所熟知,前段时间用搭了个spring工程来管理数据库连接池,没有借助Eclipse纯手工搭建,网上此类文章不多,这里给大家分享一下,也作为一个手记. 工 ...
- 玩转微信小程序
原文链接 2007 年 1 月 9 号,苹果一代在功能机盛行的年代中出世. 2017 年 1 月 9 号,微信小程序在重型app风靡的压力下上线. 苹果的出世掀起了互联网一波又一波的浪潮,而微信小程序 ...
- 如何一步一步用DDD设计一个电商网站（十二）—— 提交并生成订单
阅读目录 前言 解决数据一致性的方案 回到DDD 设计 实现 结语 一.前言 之前的十一篇把用户购买商品并提交订单整个流程上的中间环节都过了一遍.现在来到了这最后一个环节,提交订单.单从业务上看,这个 ...
- 关于Node.js后端架构的一点后知后觉
前言 上周有幸和淘宝前端团队的七念老师做了一些NodeJS方面上的交流(实际情况其实是他电话面试了我╮(╯-╰)╭),我们主要聊到了我参与维护的一个线上NodeJS服务,关于它的现状和当下的不足.他向 ...
- .NET Core 最小化发布
.NET Core 应用最小化独立部署发布,.NET Core 默认应用独立发布,大概占用50m左右的空间,不同的系统大小有所区别. .NET Core 的发布之前我也有所介绍,.NET Core 跨 ...
- 最近一年多我总结的常用mate标签-常用mate标签
昨天开始上班 ,今天晚上不是太忙 ,来写篇博客了 meta元素共有三个可选属性(http-equiv.name和scheme)和一个必选属性(content),content定义与 http-equ ...
- 数据库SQL,NoSQL之小感悟
遇到1000万数据表 最近遇到一个问题,就是单表数据过的存储及查询问题.举个例子:1000万的数据存在一个表中,字段4-5个样子,日常 开发中难免要做过滤.排序.分页.如果把这几个放在一起即要过滤又要 ...