2022-09-23 第六小组张宁杰 Vue

Vue实例的作用范围是什么？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素？

可以使用其他的双标签，不能使用HTML=和BODY

data:数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

Vue指令

内容绑定，事件绑定

1.v-text:设置标签的文本值(textContent),默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

<div id="app">
        <h2 v-text="message+'。'">长春</h2>
        <h2 v-text="info+'。'">长春</h2>
        <h2>{{message+'。'}}长春</h2>
</div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:"我是大好人!!!",
                info:"我才是好人！"
            }
        })
    </script>

2.v-html:设置元素的innerHTML，内容中有html结构会被解析为标签，v-text指令无论内容是什么，只会解析为文本，v-html，解析文本使用v-text，需要解析html结构使用v-html

<div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
</div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                content:"<a href='http://www.baidu.com'>百度一下</a>"
            }
        })
    </script>

3.v-on:为元素绑定事件，事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                food:"锅包肉好好吃6"
            },
            methods:{
                doIt:function(){
                    alert("干他就完了！");
                },
                changeFood:function(){
                    //console.log(this.food);
                    this.food+="67788"
                }
            },
        })
    </script>

显示切换，属性绑定

1.v-show:根据表达值的真假，切换元素的显示和隐藏。原理是修改元素的display，实现显示隐藏。指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏。数据改变之后，对应元素的显示状态会同步更新

	<div id="app">
        <input type="button" value="切换显示状态" @click="changeFlag">
        <input type="button" value="累加年龄" @click="addAge">
        <img src="img/02.png" alt="" v-show="flag">
        <img src="img/03.png" alt="" v-show="age>=20">
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                flag:false,
                age:18
            },
            methods:{
                changeFlag:function(){
                    this.flag=!this.flag
                },
                addAge:function(){
                    this.age++
                }
            }
        })
    </script>

2.v-if:根据表达式值的真假，切换元素的显示和隐藏（本质是操纵dom元素），表达式的值为true,元素存在于dom树中，为false，从dom树中移除。频繁切换用v-show,反之用v-if

	<div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="flag">我是测试样例</p>
        <p v-show="flag">我是测试样例 v-show</p>
        <input type="button" value="增加温度" @click="addTemp">
        <h2 v-if="temp>35">热死了</h2>
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                flag:false,
                temp:30
            },
            methods:{
                toggleIsShow:function(){
                    this.flag=!this.flag
                },
                addTemp:function(){
                    this.temp++
                }
            }
        })
    </script>

3.v-bind:设置元素的属性（src,title,class），完整的写法是v-bind:属性名，简写的话可以直接省略v-bind，只保留:属性名。需要动态的增删class建议使用对象的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" 
        :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" 
        :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                imgSrc:"img/02.png",
                imgTitle:"犯大吴疆土者，盛必击而破之！",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive=!this.isActive;
                }
            }
        })
    </script>
</body>
</html>

图片切换案例

列表数据使用数组保存
v-bind指令可以设置元素属性，比如src
v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="change">
        <div>
            <img :src="imgArr[index]" alt="">
            <br>
            <!-- 防止a标签跳转 #会页面跳动-->
            <!-- 一定要注意"=="和"="的区别 -->
            <a href="javascript:void(0)"  @click="prev" v-show="index!=0">
                <img src="img/prev.png" alt="">
            </a>
            <a href="javascript:void(0)"  @click="next" v-show="index<imgArr.length-1">
                <img src="img/next.png" alt="">
            </a>
        </div>
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#change",
            data:{
                imgArr:["img/02.png","img/03.png","img/04.png","img/06.png"],
                index:0
            },
            methods:{
                prev:function(){
                    this.index--
                },
                next:function(){
                    this.index++
                }
            }
        })
    </script>
</body>
</html>

列表循环，表单元素绑定

1.v-for：根据数据生成列表结构，数组经常和v-for使用，语法是(item,index) in 数据，item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的

<div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index}}v-for测试{{item}}</li>
        </ul>
        <h2 v-for="item in foods" :title="item.name">{{item.name}}</h2>
        <input type="button" @click="add" value="增加菜名">
        <input type="button" @click="rem" value="减少菜名">
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","杭州"],
                foods:[
                    {name:"锅包肉"},{name:"回锅肉"}
                ]
            },
            methods:{
                add:function(){
                    this.foods.push({name:"鱼香肉丝"})
                },
                rem:function(){
                    this.foods.shift()
                }
            }
        })
    </script>

2.v-on补充:传递自定义参数，事件修饰符。事件绑定的方法写成函数调用的形式，可以传入自定义参数。定义方法时需要定义形参来接收传入的实参。事件的后面跟上，.修饰符可以对事件进行限制，.enter可以限制触发的按键为回车。事件修饰符有多种

<div id="app">
        <input type="button" value="点击" @click="doIt(666,'777')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                doIt:function(p1,p2){
                    alert("干就完了")
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("你吃饭了吗？")
                }
            }
        })
    </script>

3.v-model：获取和设置表单元素的值（双向数据绑定），绑定的数据会和表单元素值相关联，绑定的数据和表单元素的值一一关联

	<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2 v-text="message"></h2>
    </div>
    <script src="vue/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:"我是一个有钱人"
            },
            methods:{
                getM:function(){
                    alert(this.message)
                },
                setM:function(){
                    this.message="拉倒吧你，穷得叮当响"
                }
            }
        })
    </script>

记事本案例

结构
1. 新增
  
  v-for指令的作用：根据数组生成列表结构
  
  v-model指令的作用：双向绑定，把表单中的内容和vue中的数据关联起来
  
  v-on指令的作用：绑定事件，此案例我们使用.enter触发事件
  
  通过审查元素快速定位，可以快速找到我们要修改的位置
2. 删除
  
  数据改变，和数据绑定的元素同步改变
  
  事件可以接收自定义的参数
  
  splice方法的作用，根据下标删除指定元素
3. 统计
  
  基于数据的开发方式，页面是数据的展示，所有和数据相关的内容我们只需要找到对应的数据就可以
  
  v-text指令的作用：设置文本，可以使用{{}}(差值表达式)
4. 清空
  
  基于数据的开发方式，页面是数据的展示，我们要做的就是清空展示，即清空数组
5. 隐藏

小结

列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制，比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>记事本</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>记事本</h1>
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{{ index+1 }}.</span>
            <label>{{ item }}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" >
      <span class="todo-count" v-if="list.length!=0">
        <strong>{{list.length}}</strong> items left
      </span>
      <button class="clear-completed" @click="clear" v-show="list.length!=0">
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="vue/vue.js"></script>
  <script>
    let app = new Vue({
      el: "#todoapp",
      data: {
        list: ["写代码", "吃饭饭", "睡觉觉"],
        inputValue: "好好学习,天天向上"
      },
      methods: {
        add: function () {
          this.list.push(this.inputValue);
        },
        remove:function(index){
          console.log("删除");
          console.log(index);
          this.list.splice(index,1);
        },
        clear:function(){
          this.list=[]
        }
      },
    })
  </script>
</body>

</html>

Vue结合网络数据开发应用

axios
- 功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

使用axios注意事项
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或者失败时触发
- 通过回调函数的形参可以获取响应内容，或错误信息
- https://github.com/axios/axios

axios+vue

axios如何结合vue开发网络应用
axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可

和本地应用的最大区别就是改变了数据来源

<div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script src="dev/axios.min.js"></script>
    <script src="dev/vue.js"></script>
    <script>
        /*
            接口:随机笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
       let app = new Vue({
        el:"#app",
        data:{
            joke:"有趣的笑话"
        },
        methods:{
            getJoke:function(){
                console.log(this.joke);
                let that = this;
                axios.get("https://autumnfish.cn/api/joke").then
                (function(response){
                    //console.log(response.data);
                    that.joke = response.data;
                    console.log(this.joke);
                },function(err){})
            }
        }
       })
    </script>

天知道天气预报案例（如果标签渲染不到页面上，换浏览器运行即可）

回车查询

按下回车(v-on .enter)
查询数据(axios 接口 v-model)
渲染数据(v-for 数组 that)

回车查询注意事项

应用的逻辑代码建议和页面分离，使用单独的js文件编写
axios回调函数中this指向改变了，需要额外保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构

点击查询

自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以使用this关键字点出其他的方法
index.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>天知道</title>
  <link rel="stylesheet" href="css2/reset.css" />
  <link rel="stylesheet" href="css2/index.css" />
</head>

<body>
  <div class="wrap" id="app">
    <div class="search_form">
      <div class="logo"><img src="img/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input type="text" @keyup.enter="searchWeather" v-model="city" class="input_txt" placeholder="请输入查询的天气"/>
        <button class="input_sub">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:; "@click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('广州')">广州</a>
        <a href="javascript:;" @click="changeCity('深州')">深圳</a>
      </div>
    </div>
    <ul class="weather_list">
      <li v-for="item in weatherList">
        <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
        <div class="info_temp">
          <b>{{ item.low }}</b>
          ~
          <b>{{ item.high }}</b>
        </div>
        <div class="info_date"><span>{{ item.date }}</span></div>
      </li>
    </ul>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 自己的js -->
  <script src="dev/main.js"></script>
</body>

</html>

main.js

/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
 let app = new Vue({
    el:"#app",
    data:{
        city:'',
        weatherList:[]
    },
    methods:{
        searchWeather:function () {
            //console.log('天气查询');
            //console.log(this.city);
            //调用接口
            //保存this
            let that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='
            +this.city)
            .then(function(response){
                console.log(response.data.data.forecast);
                that.weatherList = response.data.data.forecast
            })
            .catch(function(err){})
        },
        changeCity:function(city){
            this.city = city,
            this.searchWeather();
        }
    }
 })

posted @ 2022-09-23 08:38 贵妃就是贵妃阅读(25) 评论(1) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 2022-09-03 第六小组张宁杰 ajax&axios

· 2022-09-04 第六小组张宁杰 cookie&session&filter&监听器

· vue基础

· 【Vue】Vue入门知识

· Vue基础

公告

昵称：贵妃就是贵妃
园龄： 2年7个月
粉丝： 5
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

Java学习笔记(37)

ZhangNJ

2022-09-23 第六小组张宁杰 Vue

Vue实例的作用范围是什么？

是否可以使用其他的选择器？

是否可以设置其他的dom元素？

data:数据对象

Vue指令

图片切换案例

记事本案例

Vue结合网络数据开发应用

天知道天气预报案例（如果标签渲染不到页面上，换浏览器运行即可）

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

写的很好，再一些学习心得

ZhangNJ

2022-09-23 第六小组 张宁杰 Vue

Vue实例的作用范围是什么？

是否可以使用其他的选择器？

是否可以设置其他的dom元素？

data:数据对象

Vue指令

图片切换案例

记事本案例

Vue结合网络数据开发应用

天知道天气预报案例（如果标签渲染不到页面上，换浏览器运行即可）

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

写的很好，再一些学习心得

2022-09-23 第六小组张宁杰 Vue