Vue2.0简讲！_vue封装fetch

入门

1.1、响应式渲染

1.1.0、Vue创建

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

https://cdn.jsdelivr.net/npm/vue@2

下载Vue2.0.js

<script>
    new Vue(){
        el: "#选择器",".选择器"....,
        data:{
          数据{变量,数组,对象....}  
        },有           
        methods:{
            方法区
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11

1.1.1、指令(7)

1.1.2、class与style

绑定HTML Class

对象语法

<div :class="classObj">动态切换class-1-对象</div>
1

classObj:{
    aa:true,
    bb:true,
    cc:false,
},
1
2
3
4
5

// vue2 解决方案, Vue.set(对象,属性,值) 
==F12== Vue.set(vm.classObj,"dd",true) //新增 dd calss属性
1
2

数组语法

<div :class="classArr">动态切换class-2-数组</div>
1

classArr:["aa","bb"],
1

==F12== vm.classArr.push('dd') //新增 dd class属性
==F12== vm.classArr.shift()	   //删除第一个 calss 属性	
==F12== vm.classArr.splice(1,1)//删除下标为1的calss属性,删除一个
1
2
3

绑定内联样式

对象语法

<div :style="styleObj">动态切换style-1-对象</div>
1

styleObj:{
    backgroundColor:'red',
},
1
2
3

==F12== Vue.set(vm.styleObj,'fontSize','30px') 
//新增 fontSize样式
1
2

数组语法

<div :style="styleArr">动态切换style-2-数组</div>
1

styleArr:[{backgroundColor: 'yellow'}],
1

==F12== vm.styleArr.push({fontSize:'30px'}) 
//新增fontSize样式
1
2

1.1.3、条件渲染

v-if else-if

    <div id="box">
<!--        <div v-if="isCreated">111111111</div>-->
<!--        <div v-else>222222222</div>-->
        <h2>所有订单</h2>
        <ul>
            <li v-for="item in dataList">
               {{item.title}} <!-- -{{item.state}}-->
                <span v-if="item.state===0">-未支付</span>
                <span v-else-if="item.state===1">-代发货</span>
                <span v-else-if="item.state===2">-已发货</span>
                <span v-else>-已签收</span>
            </li>
        </ul>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
    var vm = new Vue({
        el: "#box",
        data:{
            isCreated:false,
            dataList:[
                {
                    title:'动感小苦茶',
                    state:0 ,//'未支付'
                },
                {
                    title:'动感大苦茶',
                    state:1 ,//'代发货'
                },
                {
                    title:'情趣小苦茶',
                    state:2 ,//'已发货'
                },
                {
                    title:'情趣大苦茶',
                    state:3 ,//'已完成'
                },
            ],
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

template v-if

<div id="box">
    <template v-if="isCreated">
        <div>111111</div>
        <div>222222</div>
        <div>333333</div>
    </template>
</div>
1
2
3
4
5
6
7

<script>
    new Vue({
        el: "#box",
        data:{
            isCreated : true
        }


        /*
        * template是一个包裹元素,不会真正创建在页面上.
        * */
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

1.1.4、列表渲染

v-for

key

• 跟踪每个节点的身份，从而重用和重新排序现有元素
• 理想的 key 值是每项都有的且唯一的 id。data.id

Vue为什么要设置key值(底层)

数组更新检测

• 使用以下方法操作数组，可以检测变动
  • push() pop() shift() unshift() splice() sort() reverse()
  • filter(), concat() 和 slice() ,map(),新数组替换旧数组
• 不能检测以下变动的数组
  • vm.items[indexOfItem] = newValue
• 解决
  1. Vue.set(example1.items, indexOfItem, newValue)
  2. splice

检测数组的变动(底层)

列表渲染Vue2

<div id="box">
    <!--数组遍历-->
    <ul>
        <li v-for="(temp,index) of dataList" :key="temp.id">
            {{temp}}-{{index}}
        </li>
    </ul>
    <!--对象遍历-->
    <ul>
        <li v-for="(temp,key) in obj ">
            {{key}}-{{temp}}
        </li>
    </ul>
    <!--数字遍历-->
    <ul>
        <li v-for="temp in 10">
            {{temp}}
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
    new Vue({
        el: "#box",
        data:{
            dataList:["111","222","333"],
            obj:{
                name: "Draven",
                age: 18,
                location: "love"
            },
        },

    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

列表渲染Vue3

<div id="box">
    <!--数组遍历-->
    <ul>
        <li v-for="(temp,index) of dataList" :key="temp.id">
            {{temp}}-{{index}}
        </li>
    </ul>
    <!--对象遍历-->
    <ul>
        <li v-for="(temp,key) in obj ">
            {{key}}-{{temp}}
        </li>
    </ul>
    <!--数字遍历-->
    <ul>
        <li v-for="temp in 10">
            {{temp}}
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
    Vue.createApp({
        data(){
            return {
                dataList:["111","222","333"],
                obj:{
                    name: "Draven",
                    age: 18,
                    location: "love"
                },
            }
        }
    }).mount("#box")
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

过滤应用(模糊查询)

<div id="box">
    <input type="text" @input="handleInput()" v-model="myText">
    <ul>
        <li v-for="temp in test()" :key="temp">
            {{temp}}
        </li>
    </ul>
<!--    {{ test() }}-->
</div>
1
2
3
4
5
6
7
8
9

<script>
    new Vue({
        el: "#box",
        data:{
            myText:"",
            dataList:["aaa","bbb","ccc","ddd","eee","ace","add","aee","dee","cbe","cde","dfa"]
        },
        methods:{
            test(){
                return this.dataList.filter(temp=> temp.includes(this.myText));
            },
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.1.5、事件处理器

• 监听事件

  • 直接触发代码

  • <button @click="count++">add-3-表达式</button>
    1

• 方法事件处理器

  • 写函数名 handleClick

  • <button @click="handleAdd2">add-2-函数名</button>
    
    handleAdd2(evp){
        this.count++
        console.log(evp.target)
    },
    1
    2
    3
    4
    5
    6

• 内联处理器方法

  • 执行函数表达式 handleClick($event)==($event 事件对象)==

  • <button @click="handleAdd1($event,1,2,3)">add-1-函数表达式</button>
    
    handleAdd1(evt,a,b,c){
        this.count++
        console.log(evt.target,a,b,c)
    },
    1
    2
    3
    4
    5
    6

事件修饰符

• https://cn.vuejs.org/v2/guide/events.html

- `.stop`
- `.prevent`
- `.capture`
- `.self`
- `.once`
- `.passive`
1
2
3
4
5
6

• <!-- 阻止单击事件继续传播(事件冒泡泡) -->
  <a v-on:click.stop="doThis"></a>
  
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  
  <!-- 修饰符可以串联 -->
  <a v-on:click.stop.prevent="doThat"></a>
  
  <!-- 只有修饰符,阻止默认提交行为 -->
  <form v-on:submit.prevent></form>
  
  <!-- 添加事件监听器时使用事件捕获模式 -->
  <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
  <div v-on:click.capture="doThis">...</div>
  
  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  <!-- 即事件不是从内部元素触发的 -->
  <div v-on:click.self="doThat">...</div>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

• <ul @click.self="handleUlClick">
      <!--禁止事件冒泡-->
      <li @click.stop="handleLiClick">1111</li>
      <li @click="handleLiClick">2222</li>
      <!--只可触发一次-->
      <li @click.once="handleLiClick">3333</li>
      <!--阻止a链接的默认行为-->
      <a href="http://www.baidu.com" @click.prevent>跳转</a>
  </ul>
  1
  2
  3
  4
  5
  6
  7
  8
  9

按键修饰符

• https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
1
2

系统修饰键

• .ctrl
• .alt
• .shift
• .meta
• .exact

​ 注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
1
2
3
4
5
6
7
8

鼠标按钮修饰符

• .left
• .right
• .middle

1.1.6、计算属性

computed-同步

• 计算属性(防止模板过重,难以维护),负责逻辑放在计算属性中来写
• 方法
  • 事件绑定，逻辑计算。可以不用return，没有缓存
• 计算属性(重视结果)﹒
  • 解决模板过重问题，必须有return· ，只求结果缓存，同步。

//计算的属性
computed:{
    myComputedName(){ 
        console.log("计算属性")
        return this.myName.substring(0,1).toUpperCase() + this.myName.substring(1);
    }
}
1
2
3
4
5
6
7

watch-异步

• watch(重视过程)，监听一个值的改变。不用返回值﹐异步同步

		watch:{
    // es5 filter
    myText(newVal){
        console.log("改变了",newVal)
        //模拟ajax异步延时状态
        setTimeout(()=>{
            this.dataList = this.original.filter(temp=> temp.includes(newVal))
        },2000)
    }
},
1
2
3
4
5
6
7
8
9
10

1.2、fetch&axios

1.2.0、fetch-get

handleFetch(){
    //json文件路径,或数据来源
    fetch("./json/test.json")
    	//返回json数据
        .then(res=>res.json())
    	//输出json数据对象
        .then(res=>{
        console.log(res)
        })
    	//如果是psot请求,返回err报错信息
        .catch(err=>{
            console.log(err)
        })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.2.1、fetch-post

handleFetch({
    //路径
    fetch("**")
    	//请求方式: post
    	method:'post',
        //设置请求头
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        //form编码格式数据 key=value
        body: "name=kerwin&age=100"    
})
    .then(res=>res.json())
    .then(res=>{
    	log(res);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.2.2、后端要求传入json格式

handleFetch({
    //路径
    fetch(url地址)
    	//请求方式: post
    	method:'post',
        //设置请求头
        headers: {
            "Content-Type": "application/json"
        },
        //固定格式 json字符串编码	 
        body: JSON.stringify({
            name:"kerin",
            age:100
        })    
})
    .then(res=>res.json())
    .then(res=>{
    	log(res);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.2.3、fetch-猫眼数据案例

https://m.maizuo.com/v5/#/films/nowPlaying

• F12->Network->筛选Fetch/XHR接口->Name选项卡中的数据接口->Response中的代码复制在json文件中

<button @click="handleFetch">ajax-fetch</button>
<ul>
    <li v-for="(data,index) in dataList" :key="data.filmId">
        <img :src="data.poster" alt="">
        {{data.name}}
        主演:
        <span v-for="item in data.actors ">{{item.name}} </span>
    </li>
</ul>
1
2
3
4
5
6
7
8
9

new Vue({
    el:"#box",
    data:{
        dataList:[],
    },
    methods:{
        handleFetch(){
            fetch("./json/maoyan.json")
                .then(res=>res.json())
                .then(res=>{
                // console.log(res.data.films)
                    this.dataList=res.data.films
                })
                .catch(err=>{
                    console.log(err)
                })
        },
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.2.4、axios-get

• axios数据第三方

• 要使用必须引入js文件

<div id="box">
    <button @click="handleFetch">ajax-fetch</button>
    <ul>
        <li v-for="(data,index) in dataList" :key="data.filmId">
            <img :src="data.poster" alt="">
            {{data.name}}
            主演:
            <span v-for="item in data.actors ">{{item.name}} </span>
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11

new Vue({
    el:"#box",
    data:{
        dataList:[],
    },
    methods:{
        handleFetch(){
          axios.get("./json/maoyan.json").then(res=>{
              // console.log(res.data.data.films)
              this.dataList=res.data.data.films
          })
        },
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.2.5、axios-post

• axios自动检测传入的是json对象还是字符串
• 从而选择传输方式

axios.post("****","name=Draven"&age="18")
1

axios.post("****",{name:"Draven",age:18})
1

1.2.6、猫眼数据–案例

json数据在1-沙漠风暴->03-fetch&axios->json->maizuo.json

• 因为访问的img路径是个接口
• 所以要进行处理使用
• 这里可以借鉴学习,后端拦截img访问请求
• 在前端进行宽高数条件处理后方可访问

<div id="box">
    <button @click="handleAjax">click-ajax</button>
    <ul>
        <li v-for="item in dataList" :key="item.id">
            <img :src="handleImg(item.img)" alt="">
            {{item.nm}}
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9

new Vue({
    el:"#box",
    data:{
        dataList:[]
    },
    methods:{
        handleAjax(){
            axios.get("./json/maizuo.json").then(res=>{
                console.log(res.data.movieList)
                this.dataList=res.data.movieList
            })
        },
        handleImg(src){
            // return src.replace("w.h/","")+"@1l_1e_1c_128w_128h"
            return src.replace("w.h","128.128")
        },
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

过滤器

• Vue3.0 不可以使用

<img :src="item.img | imgFilter" alt="">
//
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/257300