Vue框架（一）

以你之姓@ 2021-09-14 07:58 275阅读 0赞

MV\*系列的框架  
目前最流行的MV\*框架:vue react angular  
github:[https://github.com/][https_github.com],是一个项目托管平台，从它上面的一些数据可以客观的取体现当先时髦的技术

vue：尤雨溪，个人团队维护的一个库 weex  
react: facebook维护的一套库，React Native  
angular：google维护的一套库 ionic  
1.x:核心是用JS开发的  
2.x:核心是用TS开发的—TypeScript

app:web app、hybrid app、native app  
移动端布局：盒子模型、弹性盒子  
移动端的数据交互：尽量少操作DOM  
hybrid app(混合开发)：cordova(apache)。。。,目的是为了解决原生App的不能跨平台的问题  
中文文档:[http://cordova.axuer.com/][http_cordova.axuer.com]  
native app(原生开发)：ios开的 android开发  
React Native：通过js去调用原生app技术的api来做开发。学习一次多处使用，并不意味着一次开发多平台运行

为什么会出现mv\*的框架  
为了解决当下市场对应用程序开发的需求，传统的网站不能满足当下市场的用户体验需求

--------------------

vue2.x是目前前端领域所有MV\*框架里面性能最好的框架  
vue.js vue的主框架  
中文:[https://cn.vuejs.org/][https_cn.vuejs.org]  
所有的MV\*系列的框都尽量不操作DOM

一 vue概述  
二 常用的属性  
el:  
data:  
methods:  
三 模板语法:\{ \{绑定的数据\}\}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap.css"> </head> <body> <div id="app"> <div> <h1>{ { msg}}</h1> <h1>{ { json.name}}</h1> </div> <p>{ { arr[0]}}</p> <button type="button" class="btn btn-success btn-lg" @click="getInfo">点我试试</button> <button type="button" class="btn btn-danger btn-lg" @click="sendInfo('hello kugou')">点我试试</button> </div> </body> <script src="lib/vue.js"></script> <script> new Vue({ el:'#app',//将当前的vue的实例挂载到id为app的元素上面，效果就是我这个div里面的所有东西都归当前这个实例管理 data:{ //data里面放置我们所需要的数据源 msg:'hello kitty!!!', arr:[111,222], json:{ 'name':'护花使者' } }, //如果函数不用传参数，在事件里面直接写函数名 //如果函数需要传参数，在事件里面直接传实参 methods:{ getInfo:function(){ alert(1111); }, sendInfo:function(v){ alert(v); } } }) </script> </html>

四 常用指令  
指令：扩展了HTML的语法，在Vue中将前缀为v-这种属性称之为指令，其作用就是为DOM元素调用方法、定义行为绑定数据等  
不管是指令也好还是模板语法，里面都是放置表达式  
v-show=”boolean”：让当前所绑定元素显示或者隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap.css"> </head> <body> <div id="app" class="container"> <div> <h1 v-show="false">{ { msg}}</h1> <h1>{ { json.name}}</h1> <h1 v-text="5>7?'呵呵哒':'么么哒'"></h1> <h1 v-text="'eheda'"></h1> <h1 v-text="123"></h1> </div> <p>{ { arr[0]}}</p> <button type="button" class="btn btn-success btn-lg" @click="getInfo">点我试试</button> <button type="button" class="btn btn-danger btn-lg" @click="sendInfo('hello kugou')">点我试试</button> </div> </body> <script src="lib/vue.js"></script> <script> //所有指令都是以v-开头，如果在需要的情况下要操作DOM，就只能使用指令 //指令后面的双引号里面写表达式：表达式---》常量表达式、复合表达式 //var bool=5>7?'呵呵哒':'么么哒' new Vue({ el:'#app', data:{ msg:'hello kitty!!!', arr:[111,222], json:{ 'name':'呵呵' } }, methods:{ getInfo:function(){ alert(1111); }, sendInfo:function(v){ alert(v); } } }) // eval('console.log("heheda")'); </script> </html>

v-text=”数据值”: v-text=”’么么哒’”  
v-html=”数据值”: v-html=”’么么哒’”  
\{ \{数据值\}\} ：\{ \{‘么么哒’\}\}  
**v-text,,,v-html,,,\{ \{\}\}的不同**

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap.css"> <style> [v-cloak]{ display:none; } </style> </head> <body> <div id="app" class="container"> <div v-cloak> <h1 class="text-success">{ { msg}}</h1> <h1 class="text-success">{ { json.name}}</h1> <h1 class="text-success">{ {5>7?'呵呵哒':'么么哒'}}</h1> <h1 class="text-success">{ { html}}</h1> <h2 class="text-danger" v-text="5>7?'呵呵哒':'么么哒'" ></h2> <h2 class="text-danger" v-text="msg" ></h2> <h3 class="text-warning" v-text="html"></h3> <h3 class="text-warning" v-html="5>7?'呵呵哒':'么么哒'"></h3> <h3 class="text-warning" v-html="msg"></h3> <h3 class="text-warning" v-html="html"></h3> <button type="button" class="btn btn-success" v-on:click="test1">点我1</button> </div> </div> </body> <script src="lib/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'hello kitty!!!', arr:[111,222], json:{ 'name':'护花使者' }, html:'<i>此凯子非彼凯子</i>' }, methods:{ test1:function(){ alert(1111); } } }) </script> </html>

v-loak:避免在客户端显示编程符号  
如果在一个大的容器里面展示非常多的数据的话就用模板语法，同时加上v-cloak  
如果在单个的元素里面展示数据的话，可以采用v-text  
v-on:事件名:用来绑定事件的 简写：@事件名 推荐  
v-bind:属性名:用来绑定html属性 简写：**重点内容**  
**v-bind**

例2

**：src属性**

这两种写法都行
    :src="item.imgurl"
    :src="'D/photo'+item.imgurl"

**v-model**

**v-for**

五 vue数据化驱动以及MVC的理解  
vue的核心思想:数据化驱动、组件化开发  
数据化驱动:所有业务逻辑都是通过操作数据来体现

M:model —数据模型（管理数据）  
V:view —视图 （展示数据）  
C:controller —控制器 （调度业务逻辑）  
js:通过豆瓣api的那个案例  
model 回调函数里面的那个data  
view 创建的DOM节点  
controller 事件、行为

MVVM:  
M:model  
v:view  
VM:ViewModel,调度业务逻辑  
**computed属性**  
1）

2）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap.css"> </head> <body> <div id="app" class="container text-center"> <button class="btn btn-danger" @click="changeA">点我试试</button> <h1 class="bg-warning">{ { a}}</h1> <h1 class="bg-success">{ { b}}</h1> </div> </body> <script src="lib/vue.js"></script> <script> //a:100 //b: new Vue({ el:'#app', data:{ a:100, //b依赖a //b:0 }, //凡是以后有一个数据需要依赖数据源，那么我们就可以写在计算属性里面 computed:{ b:function(){ return this.a; } }, methods:{ changeA:function(){ this.a++; //this.b=this.a; } } }) var obj={ name:'小黑' }; var temp; Object.defineProperty(obj,'name',{ set:function(v){ console.log('我被设置了'); console.log(v); temp=v; }, get:function(){ console.log('我被获取了'); return temp; } }) obj.name='小黑1'; console.log(obj.name); </script> </html>

**$watch**

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap.css"> </head> <body> <div id="app" class="container"> <button class="btn btn-warning" @click="getInfo">点我试试</button> <button class="btn btn-warning" @click="changeJson">点我试试</button> <h1>{ { datas}}</h1> <h1>{ { json.name}}</h1> </div> </body> <script src="lib/vue.js"></script> <script> var app=new Vue({ data:{ datas:11111, json:{ name:'小黑', title:'你好他也好' } }, methods:{ getInfo:function(){ this.datas++; }, changeJson:function(){ this.json.name="呵呵哒" } } }).$mount('#app'); //$watch监听器 观察属性,不能滥用，很影响性能 // app.$watch('datas',function(newV,oldV){ // console.log('我被改变了'); // console.log(newV,oldV); // }); app.$watch('json',function(newV,oldV){ console.log('我被改变了'); },{ //深度检查：主要用在监听对象和数组 deep:true }); var obj1={ name:'小黑', age:20 }; var obj2=obj1; obj1.name="小花"; console.log(obj2===obj1);//true var obj1={ name:'小黑', age:20 }; var obj2={ name:'小黑', age:20 }; console.log(obj2===obj1);//false </script> </html>

**watch**

**Vue实例其他方法**  
**$el:返回当前挂载对象**  
**$options：可以拿到自定义的键值对,返回一个包含自定义属性的集合**  
**vm.$data===>返回当前实例data里面的数据**  
**vm.$mount===>手动挂载Vue程序**  
new Vue(\{  
data:\{a:111\}  
\}).$mount(‘\#box’);  
**$watch===>监听数据**  
vm.$watch(‘msg’, function () \{  
console.log(‘变化了’);  
\},\{deep:true\})//深度监听

vm.$watch(‘msg.eating’, function () \{  
console.log(‘变化了’);  
\})//浅度监听

**绑定键盘事件**

**六 事件对象**  
**阻止冒泡，阻止默认事件**  
**事件冒泡，子元素先触发，父元素其后**  
**事件捕获，父元素先触发，子元素其后**  
**Vue中阻止冒泡@事件名.stop=”函数名”**  
**阻止默认事件方式@事件名.prevent=”函数名”**  
1）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="lib/bootstrap.css">
        <style> .outer{ width: 200px; height: 200px; background-color: #f38; } .inner{ width: 100px; height: 100px; background-color: #f38f38; } </style>
    </head>
    <body>
        <div id="app" class="container">
            <button class="btn btn-warning" @click="getInfo">点击我试试</button>
            <div class="outer" @click="outerFun">
                <div class="inner" @click="innerFun"></div>
            </div>
        </div>
    </body>
    <script src="lib/vue.js"></script>
    <script> new Vue({ el:'#app', data:{ style1:'div1', style2:'div2' }, methods:{ getInfo:function(e){ e.stopPropagation(); console.log(e); }, outerFun:function(){ alert('outer') }, innerFun:function(e){ e.stopPropagation(); alert('inner') } } }) // //event // dom.onclick=function(e){ // //获取事件对象的兼容性写法 // e=e||window.event; // //阻止事件冒泡 // //window.event? window.event.cancelBubble=true:e.stopPropagation() // e.stopPropagation(); // window.event.cancelBubble=true; // //阻止默认事件 // e.preventDefault(); // window.event.returnValue=false; // //window.event?window.event.returnValue=false:e.preventDefault() // } </script>
    </html>

2）

**七、自定义过滤器**  
1）全局定义的方式

2）局部

3）

**八 自定义指令**  
指令：扩展了HTML的语法，通过自定义指令可以操作DOM  
Vue.directive(‘red’, function (el) \{  
el.style.width=’200px’;  
el.style.height=’200px’;  
el.style.backgroundColor=’red’;  
\});

<div id="box">
            <p v-red>welcome vue</p>
        </div>

九 常用实例属性

十 ajax  
原生js里面的ajax：（异步JavaScript和xml（json））  
异步：一次可以做多件事  
同步：一件事一件事做，做完一件事再做下一件事  
同步用在”急切”需要数据的场景

var xhr=new XMLHttpRequest();
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
     xhr.open(url,'post');
     设置请求头，告诉服务端客户端发送过来的是什么编码
     xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
     xhr.send('id='+inputId+'&name='+inputName);
     xhr.onreadystatechange=function(){ 
       if(xhr.readyState===4 status===200){
          var res=xhr.responseText;
          res=JSON.parse(res);
       }
     }

//json对象转换成json字符串(序列化)  
JSON.stringify();

jQuery的ajax是通过原生js的XMLHttpRequst高度封装成的  
jsonp:通过script标签来封装的，XMLHttpRequst leval 1—-不支持跨域  
**$.get();**  
**$.post();**  
**$.jsonp();**  
**$.ajax();**

$.ajax({
      method:'post',
      url:'xxxxxx',
      data:'id='+inputId+'&name='+inputName,
      dataType:'json',
      success:function(data){ 
        console.log(data);
      },
      error:function(err){ 
        console.log(err);
      }
    })

**vue中的ajax：vue-resource(单独的轻量级的插件)**  
方法1

this.$http.get(url, [options]).then(successCallback, errorCallback);

例1

this.$http.post(url, [options]).then(successCallback, errorCallback);

this.$http.jsonp(url, [options]).then(successCallback, errorCallback);

this.$http(options).then(successCallback, errorCallback);

this.$http.post(
      'demo.json',
      {
        id:25,
        name:'zhangsan'
      },
      {
        emulateJSON：true
      }
    ).then(function(data){ 
      console.log(data);
    },function(err){ 
      console.log(err)
    })

[https://127.0.0.1:8080/project/demo.json?id=25&name=zhangsan][https_127.0.0.1_8080_project_demo.json_id_25_name_zhangsan]

方法2

this.$http({
      method:'POST',
      url:'https://127.0.0.1:8080/project/demo.php',
      params:{
        id:this.id,
        name:this.name
      },
      emulateJSON:true
    }).then(
      function(data){ 
        console.log(data);
      },function(err){ 
        console.log(err);
      }
    )

例2

不管你是提交数据还是获取数据都会经历请求和响应

**另一种数据交互方法**  
axios:[https://www.kancloud.cn/yunye/axios/234845][https_www.kancloud.cn_yunye_axios_234845]

**生命周期**  
beforeCreate 组件实例刚刚被创建,属性都没有  
created 实例已经创建完成,属性已经绑定  
beforeMount 模板编译之前  
mounted 模板编译之后  
beforeUpdate 组件更新之前  
updated 组件更新完毕  
beforeDestroy 组件销毁前  
destroyed 组件销毁后

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap.css"> </head> <body> <div id="app" class="container text-center"> <button class="btn btn-warning" @click="change">更新</button> <button class="btn btn-warning" @click="destroy">销毁</button> <h1>{ { msg}}</h1> </div> </body> <script src="lib/vue.js"></script> <script src="lib/vue-resource.min.js"></script> <script> var app=new Vue({ el: '#app', data:{ msg:100 }, methods:{ change:function(){ this.msg++; }, destroy:function(){ this.$destroy(); } }, beforeCreate:function(){ console.log('实例刚刚被创建'); }, created:function(){ console.log('实例属性可以使用了');//***** }, beforeMount:function(){ console.log('实例被挂载之前') }, mounted:function(){ console.log('挂载成功，并且模板里面数据编译成功');//***** }, beforeUpdate:function(){ console.log('数据更新之前') }, updated:function(){ console.log('数据更新完成') }, beforeDestroy:function(){ console.log('实例销毁之前') }, destroyed:function(){ console.log('实例销毁成功'); } }); </script> </html>

[https_github.com]: https://github.com/
[http_cordova.axuer.com]: http://cordova.axuer.com/
[https_cn.vuejs.org]: https://cn.vuejs.org/
[https_127.0.0.1_8080_project_demo.json_id_25_name_zhangsan]: https://127.0.0.1:8080/project/demo.json?id=25&name=zhangsan
[https_www.kancloud.cn_yunye_axios_234845]: https://www.kancloud.cn/yunye/axios/234845