vue.js框架
一、什么是vue.js?
1.它是一套用于构建用户界面的框架，只关注视图，不仅易于上手，还便于与第三方库或既有项目整合。（vue有配套的第三方类库，可以整合起来做大型项目的开发)，在vue中有一个核心的概念，就是不用再操作DOM元素，让程序员有更多的时间去关注业务逻辑。
2.框架和库的区别
框架：是一套完整的解决方案，对项目的侵入性太大，如果需要更换框架，则需要重新构架整个项目。
库（插件）：提供某一个小功能，对项目的入侵性较小，如果某个库无法完成某些需求，则很容易切换到其他库。
3.Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。它的作者是：尤雨溪
二、vue对比angularjs
1、vue在设计之初参考了很多angularjs的思想
2、vue相对比与angular比较简单
3、 vue相对比与angular比较小巧，运行速度快
4、 vue与angular数据绑定都可以用｛｛｝｝
5、vue指令用v－xxx angularjs用ng－xxx6、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设置效率低
为什么要用计算属性
1.在模板中表达式非常便利，但是它们实际上只用于简单的操作。所有计算属性的函数都需要返回值
2.模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。
这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。 在 Vue.js 中，你可以通过 computed 选项定义计算属性
3.作用：用于计算一些复杂逻辑，最终带有返回值的函数，用于在HTML里面作展示的，用计算属性来定义、声明
计算金额
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<div>单价:<input type="text" v-model="ipt"/></div>
<div>数量:<input type="text" v-model="ipt1"/></div>
<div>运费：{{yunfei}}</div>
<div>金额：{{cheng}}</div>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#out",
data:{
ipt:"",
ipt1:"",
yunfei:10
},
computed:{
cheng(){
if(this.ipt*this.ipt1>88){
this.yunfei=0;
}else{
this.yunfei=10;
}
return this.ipt*this.ipt1+this.yunfei
}
}
})
</script>
</html>
第二个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="ipt"/>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
ipt:'',
arr:["苹果","香蕉","香水","菠萝","菠菜"]
},
computed:{
list(){
var arr1=[];
this.arr.map(function(item){
if(item.indexOf(this.ipt)!=-1){
arr1.push(item);
}
}.bind(this))
return arr1;
}
}
})
</script>
</html>
五、监听
1.全局写法
第一种写法vm.$watch(‘’,function( newvalue,oldvalue){ }
2.内部写法
)第二种写法 直接在vue初始化中通过watch｛msg:function(newvalue,oldvalue){}｝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>监听</h1>
<input type="text" v-model="ipt"/>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#out",
data:{
ipt:''
},
watch:{
'ipt':function(a,b){
console.log(a)
}
}
})
//监听的第一种写法
vm.$watch('ipt',function(a,b){//第一个参数指坚挺的数据最后变更以后得到最终的那个值，第二个参数指本次变更之前的上一次的旧值
console.log(a);
console.log(b);
})
</script>
</html>
六、过滤器
Vue.filter(‘过滤器名字’,function(value){ return //具体操作
})
Vue2.0自定义过滤器,vue1.0提供内置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>监听</h1>
<input type="text" v-model="ipt"/>
<hr />
<h1>过滤器</h1>
<p>{{num | cun}}</p>
<hr />
<ul>
<li v-for="item in arr">{{item.status | ha}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.filter('cun',function(value){
return '$'+value
})
Vue.filter('ha',function(value){
if(value==0){
return "qq";
}else if(value==1){
return "ww";
}else if(value==2){
return "ee";
}else if(value==3){
return "rr";
}
})
var vm=new Vue({
el:"#out",
data:{
ipt:'',
num:10,
arr:[
{name:'衣服',status:0},
{name:'帽子',status:1},
{name:'鞋子',status:2},
{name:'裤子',status:3}
]
},
watch:{
'ipt':function(a,b){
console.log(a)
}
}
})
//监听的第一种写法
vm.$watch('ipt',function(a,b){//第一个参数指坚挺的数据最后变更以后得到最终的那个值，第二个参数指本次变更之前的上一次的旧值
console.log(a);
console.log(b);
})
</script>
</html>
七、vue里提供的ajax交互
获取数据
-
应用fetch或axios 获取数据 axios 是vue2.0
-
axios是vue全家桶技术之一，fetch是独立的一个交互方法，它在任何一个框架，任何一个项目里面都可以单独去使用，跟vue没有关系,目前主流前后交互的方法
-
vue全家桶：vue、axios、vue-router、vuex
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <!--<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>--> <script src="https://cdn.bootcss.com/fetch/3.0.0/fetch.min.js"></script> </head> <body> <div id="out"> <h1>axios</h1> <button @click="tap()">获取数据</button> <!--<ul> <li v-for="item in arr">{{item.pname}}</li> </ul> --> </div> </body> <script type="text/javascript"> var vm=new Vue({ el:"#out", data:{ arr:[] }, methods:{ tap(){ var _this=this; // axios({ // methods:"get", // url:'http://jx.xuzhixiang.top/ap/api/detail.php', // params:{id:7615}//传参 // }).then(function(data){ // console.log(data.data) // //_this.arr=data.data.data // }).catch(function(err){ // console.log(err) // }) fetch('http://jx.xuzhixiang.top/ap/api/productlist.php') .then(function(data){ //console.log(data) return data.json() }) .then(function(data){ console.log(data) }) } } }) </script> </html>以上都是vue2.0的交互方法
如果接口里面是jsonp类型的数据，就要用fetch-jsonp
fetch提供了一个插件叫fetchjsonp
-
下面是1.0
提供的核心方法是vue-resource，专门处理类似于百度接口这种类型的数据
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
网友评论