Web前端开发之简单使用Vue

其他 2021-01-26 10:13:01 阅读次数: 0

一、vue简介

  • 是一种js框架
  • 简化DOM操作
  • 响应式数据驱动

二、vue入门

1.第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    {
   
   { message }}
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"asdhello！"
        }
    })

</script>
</body>
</html>

id选择器的方法，message和vue实例进行绑定。

2.el挂载点

el的作用：是用来设置vue实例挂载管理的元素。

一般使用id选择器的方法进行绑定，类选择器和标签选择器的方命中会造成语义不清。

标签绑定实例，只能是关闭型标签才行，非关闭型便签就不可以，一般是挂载到div标签上。

vue实例的作用范围是什么呢？

vue会管理el选项名中元素及其内部的后代元素。

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

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

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

可以使用其他的双标签，不能使用html和body，建议div。

3.data数据对象

  • vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守js的语法即可。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    {
   
   { message }}
<h2>{
   
   {school.name}}{
   
   {school.mobile}}</h2>
<ul>
    <li>{
   
   {campus[0]}}</li>
    <li>{
   
   {campus[1]}}</li>
    <li>{
   
   {campus[2]}}</li>
    <li>{
   
   {campus[3]}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好，小黑！！",
            school:{
                name:"黑马程序员",
                mobile:400-618-9990
            },
            campus:["北京校区","上海校区","广州校区","深圳校区"]
        }
    })
</script>
</body>
</html>

三.本地应用

  • 通过vue实现常见的网页效果。
  • 学习vue指令，以案例巩固知识点。
  • vue指令指的是以v-开头的一组特殊语法。

1.v-text指令

设置标签的文本值（textContent）

  • 默认写法会替换全部内容，使用差值表达式{ {}}可以替换指定内容
  • 内部支持写表达式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    <h2 v-text="message">深圳<h2>
    <h2>深圳{
   
   {message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"asdhello！"
        }
    })

</script>
</body>
</html>

2.v-html指令

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

和v-text指令不同的是，v-html可以识别html语言，而v-text把html语言当成了普通文本来处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
   <p v-text='content'></p>
   <p v-html='content'></p>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
           content:"<a href='http:/www.itheima.com'>黑马程序员！</a>"
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SGiANoNP-1608016665000)(C:\Users\jiangdada\AppData\Roaming\Typora\typora-user-images\1594029017433.png)]

3.v-on指令

  • 为元素绑定事件。
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中数据。
<div id="app">
<!--点击事件-->
<input type="button" value="事件绑定" v-on:click="dolt">
<!--鼠标滑过-->
<input type="button" value="事件绑定" v-on:monseenter="dolt">
<!--双击击事件-->
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<!--vue中支持将v-on转换成@来表示-->
<input type="button" value="事件绑定" @click="dolt">
</div>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
          },
        methods:{
         doft:function(){
         //逻辑
         }
        }
    })
</script>

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<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="v-on双击" @dblclick="doIT">
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
       methods:{
           doIT:function(){
               alert("做IT");
           }
       }
    })
</script>
</body>
</html>

4.计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>

<body>
<div id="app">
 <button @click="sub">-</button>
 <span>{
   
   {num}}</span>
 <button @click="add">+</button>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            num:1,
        },
       methods:{
         add:function(){
            if(this.num<10){
            this.num++;
            }
            else{
                alert("别加了！")
            }

         },
         sub:function(){
            if(this.num>0){
            this.num--;
            }
            else{
                alert("别减了！")
            }
         }
       }
    })
</script>
</body>
</html>

5.v-show指令

  • 根据表达式的真假，切换元素的显示和隐藏。
  • 原理是修改元素的display，实现显示隐藏。
  • 指令后面的内容，最终都会解析为布尔值。
  • 值为true元素显示，值为false元素隐藏。
  • 数据改变之后，对应元素的显示状态会同步更新。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
</head>

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <div v-show="isShow">saodjasoid</div>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
        },
        methods:{
            changeIsShow:function(){
            this.isShow=!this.isShow;
            }
        }
    })
</script>
</body>
</html>

6.v-if指令

  • 根据表示值的真假，切换元素的显示和隐藏（操纵dom元素）
  • 本质是操纵dom元素来切换显示状态。
  • 表达式的值为true，元素存在于dom树中，为false，从dom树中移除。
  • 频繁的切换v-show，反之使用v-if，前者的切换消耗小。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
</head>

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click=" toggleIsShow">
    <p v-if="isShow">黑马程序员</p>
    <p v-show="isShow">黑马程序员 v-show!</p>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
        },
        methods:{
           toggleIsShow:function(){
               this.isShow=!this.isShow;
           }
        }
    })
</script>
</body>
</html>

注：与v-show不一样的是，v-if是操作的dom，而v-show是操作的样式。

7.v-bind指令

  • 设置元素的属性比如src，titile，class
  • 需要动态的增删class建议使用对象的方式。

写法：

v-bind:src="imgsrc"
可以简写为:
:src=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
   <img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
   <br>
   <img :src="imgSrc" alt="" :class="{active:isActive}"  @click="toggleActive">

</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
         imgSrc:"http://www.itheima.com/images/logo.png",
         isActive:true,
        }, 
        methods:{
        toggleActive:function(){
             this.isActive=!this.isActive;
             console.log("点击事件被触发")
        }
        },
    })
</script>
</body>
</html>
</html>

可以使用三元表达式的写法，同时还可以使用对象的写法，如

<!--对三元表达式写法的时候要记得给css样式加上单引号-->
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
   <br>
<!--对象的写法，css样式的显示取决于冒号后面对象的真假-->
<img :src="imgSrc" alt="" :class="{active:isActive}"  @click="toggleActive">

8.v-for指令

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

item 对应数组每一个元素值，index对应数组的下标值。变量可以换其他表示，遵循命名规则即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
</head>

<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">{
   
   {index+1}}黑马程序员校区:{
   
   {item}}</li>
    </ul>
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
   <ul>
       <li v-for="(item,index) in vegetables"  :title="item.name">
         {
   
   {index}}{
   
   {item.name}}
       </li>
   </ul>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
          arr:["北京","上海","广州"],
          vegetables:[
              {name:"西兰花炒蛋"},
              {name:"蛋炒西兰花"}
          ],
        },
        methods:{
           add:function(){
               //push方法将元素追加到数组是尾部
               this.vegetables.push({name:"花菜炒蛋"})
           },
           remove:function(){
               //shift方法删除数组第一个元素
               this.vegetables.shift();
           }
        }
    })
</script>
</body>
</html>

9.v-on补充

传递自定义参数，事件修饰符。

  • 事件的后面跟上.修饰符，可以对事件进行限制。
  • .enter可以限制触发的按键为回车
  • 事件修饰符有多种。
  • 键盘按下事件：keydown() 是在键盘按下就会触发
    键盘弹起事件：keyup() 是在键盘松手就会触发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on补充</title>
</head>

<body>
<div id="app">
    <input type="button" value="点击" @click="doIt(6666,'老铁')">
    <input type="text"  @keyup.enter="sayhi">
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{        
        },
        methods:{
         doIt:function(p1,p2){  
            console.log("do it!!!!")
            console.log(p1,p2)
         },
         sayhi:function(){
             alert("吃了没！")
         }
        }
    })
</script>
</body>
</html>

10.v-model指令

  • 获取和设置表单元素的值（双向数据绑定）。
  • 绑定的数据会和表单元素值相关联。
  • 绑定的数据等价于表单元素的值，双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
  <input type="button" value="修改"    @click="setM">
  <input type="text" v-model="message" @keyup.enter="getM">
  <h2>{
   
   {message}}</h2>

</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            message:"黑马程序员"
        },
       methods:{
         getM:function(){
             alert(this.message);
         },
         setM:function(){
             this.message="酷丁鱼";
         }
       }
    })
</script>
</body>
</html>

11应用-记事本

功能：新增、删除、统计、清空、隐藏

1.新增

  • 生成列表结构 v-for 数组
  • 获取用户输入 v-model
  • 回车新增数据 @keyup.enter push
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
<div id="todoapp">
    <input type="text" v-model="inputValue"  @keyup.enter="add">
    <ul>
        <li v-for="(item,index) in list"> {
   
   {index+1}}{
   
   {item}}</li>
    </ul>
   
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#todoapp",
        data:{
           list:["写代码","吃饭饭","睡觉觉"],
           inputValue:"好好学习，天天向上！",
        },
        methods:{
        add:function(){
            this.list.push(this.inputValue);
        },
        }
    })
</script>
</body>
</html>

2.删除功能

  • 删除指定内容 v-on splice
  • 数据改变，和数据绑定的元素同步改变
  • 事件的自定义参数
  • splice方法的作用，第一个参数为删除的索引值，第二个参数为删除的个数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
<div id="todoapp">
    <input type="text" v-model="inputValue"  
    placeholder="请输入任务...." @keyup.enter="add">
    <ul>
        <li v-for="(item,index) in list"> {
   
   {index+1}}{
   
   {item}}
            <button   @click="remove(index)">x</button>           
        </li>
    </ul>
   
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#todoapp",
        data:{
           list:["写代码","吃饭饭","睡觉觉"],
           inputValue:"好好学习，天天向上！",
        },
        methods:{
        add:function(){
            this.list.push(this.inputValue);
        },
        remove:function(index){
         console.log("remove",index)
         this.list.splice(index,1)
        }
        }
    })
</script>
</body>
</html>

3.统计功能

  • 统计信息个数，v-text，length
<div>统计功能:{
   
   {list.length}}</div>
  • 基于数据的开发方式
  • v-text指令的作用

4.清空功能

  • 点击清除所有信息 v-on
  clear:function(){
            this.list=[];
        }

实质上是对数组的清空！

5.隐藏功能

  • 没有数据时，隐藏元素。v-show ，v-if，数组非空
<div V-if="list.length!=0">
     <div>统计功能:{
   
   {list.length}}</div>
     <input type="button" value="清空" @click="clear">
   <div>

四、网络应用

网络请求库 axios结合vue。

1.axios+vue

https://autumnfish.cn/api/joke 随机笑话接口

  • axios回调 函数中的this已经改变，无法访问到data中数据。
  • 把this保存起来，回调函数中直接使用保存的this即可
  • 和本地应用最大的区别就是改变了数据来源。
<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p>{
   
   {joke}}</p>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            joke:"很好笑的笑话"
        },
        methods:{
            getJoke:function(){
                var that=this;
                axios.get("https://autumnfish.cn/api/joke").then
                (function(response){
                    console.log(response)
                    console.log(response.data)
                    that.joke=response.data;
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

2.天知道-应用

  • 按下会回车 v-on enter
  • 查询数据 axios接口 v-model
  • 渲染数据
<body>
<div id="app">
  <input type="text" v-model="city" @keyup.enter="searchWeather">
  <ul>
      <li v-for="item in weatherList">{
   
   {item.date}}{
   
   {item.type}}</li>
  </ul>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>  
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            city:'',
            weatherList:[],
        },
        methods:{
                searchWeather:function(){
               var that=this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
                .then(function(response){
                   console.log(response.data);
                   that.weatherList=response.data.data.forecast;
                   console.log(that.weatherList);
                }).catch(function(err){})
                }
            }
    })
</script>
</body>

猜你喜欢

转载自blog.csdn.net/JIANGYINGH/article/details/111217244
今日推荐
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
周排行
使用Redis中间件解决商品秒杀活动中出现的超卖问题（使用Java多线程模拟高并发环境）
野指针及c++指针使用注意点
redis 3.0　新特性
(翻译)火狐操作系统javascript API
微信小程序开发入门
mysql数据查询之五子句(where、group by、having、order by和limit)
Codeforces Round #517 Div. 1翻车记
在caffe 中实现Generative Adversarial Nets（二）
企业级漏洞扫描工具
java byte数组与String互转
每日归档
更多
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022