首页 > 网页制作  > 前端开发

Vue Vue介绍、Vue基础语法、Vue生命周期、axios的使用

admin 前端开发 2021-05-25 09:29:04
后台-系统设置-扩展变量-手机广告位-内容正文底部

目录

    • Vue介绍
    • Vue基础语法
      • 1、v-html和v-text文本插值
      • 2、v-bind绑定属性
      • 3、v-if条件渲染
      • 4、v-for列表渲染
      • 5、v-on事件绑定
      • 6、v-model表单绑定
    • Vue的生命周期
    • axios的使用

Vue介绍

Vue是一套构建用户界面的渐进式JavaScript框架和MVVM双向数据绑定编程模型。

MVVM
在这里插入图片描述

MVVM:页面输入改变数据,数据改变影响页面数据展示与渲染

M(model):普通的javascript数据对象

V(view):前端展示页面

VM(ViewModel):用于双向绑定数据与页面,也是vue的实例

MVC强调的是: 单向数据绑定,M数据 --》 视图

MVVM强调的是:双向数据绑定,M数据 《–》 视图, 最核心就是ViewModel通过DOM监听实现

Vue基础语法

在这里插入图片描述

1、v-html和v-text文本插值

<body>
    <div id="div">
	    <!--示例:使用3种方式设置span标签体的内容-->
        <div>方式1:<span>{{msg}}</span></div>
        <div>方式2:<span v-text="msg"></span></div>
        <div>方式3:<span v-html="msg"></span></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    //目标:给视图标签体绑定数据
    //方式1:{{变量名}} 插入值表达式,标签体绑定文本字符串,类似于innerText的功能
    //方式2:v-text="变量名",与{{变量名}}功能一样
    //方式3:v-html="变量名",标签体绑定html代码字符串,类似于innerHTML的功能
    //       v-html 或 v-text 都是设置在视图标签的属性位置
    new Vue({
        el:"#div",
        data:{
            msg:"<h1>Hello Vue</h1>"
        }
    });
</script>

2、v-bind绑定属性

<body>
    <div id="div">
        <!--
            注意:插件表达式不能写在属性中,。例如: <标签 属性名="{{变量名}}"> 
			示例1:使用插入值表达式设置a标签的href属性绑定模型数据url,测试插入值表达式在属性值中是否有效
        -->
        <a href="{{url}}">百度一下</a>

        <br>
        <!--
            示例2:使用完整模式(<标签 v-bind:属性名="变量名">)给href属性绑定模型数据url
        -->
        <a v-bind:href="url">百度一下</a>
        <br>
        <!--
            示例3:使用简化模式(<标签 :属性名="变量名">)给href属性绑定模型数据url
        -->
        <a :href="url">百度一下</a>
        <br>
        <!--
            示例4:使用简化模式给class属性绑定模型数据cls
        -->
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标:使用vue中指令v-bind给标签属性绑定数据
    * 语法1:完整模式
    *       <标签 v-bind:属性名="变量名">
    * 语法2:简化模式
    *       <标签 :属性名="变量名">   //v-bind可以省略
    * 注意: <标签 属性名="{{变量名}}"> 这是不可以的,插入值表达式{{变量名}} 只能放在标签体内
    * */
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>

3、v-if条件渲染

<body>
    <div id="div">
        <!--
		示例1:使用v-if控制div标签是否显示
		    判断num的值,对3取余
            余数为0显示div1
            余数为1显示div2
            余数为2显示div3 -->
        <div v-if="num%3==0">div1</div>
        <div v-else-if="num%3==1">div2</div>
        <div v-else>div3</div>

        <!--
        示例2:使用v-show控制div显示与隐藏
        -->
        <div v-show="flag">div4</div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标:讲解if条件表达式
    * if语法:
    *   <标签名 v-if="条件">标签体</标签名>  条件成立标签存在,否则整个标签会被删除
    *   <标签名 v-else-if="条件">标签体</标签名>  条件成立标签存在,否则整个标签会被删除
    *   <标签名 v-else="条件">标签体</标签名>  上面的条件都不成立就会这个成立,这个标签就会存在,否则整个标签会被删除
	* show语法:      
	*	<标签名 v-show="true">标签体</标签名>  设置标签显示
    *    <标签名 v-show="false">标签体</标签名> 设置标签不显示
	*	
    * v-if与v-show区别:
	*	相同点:都是控制元素是否显示
	*	不同点:底层原理不一样
	*		v-if 如果条件为false,页面中根本没有这个元素
	*		v-show如果条件为false,页面中有这个元素只不过它的display属性值为none
    * */
    new Vue({
        el:"#div",
        data:{
            num:1,
           flag:true
        }
    });
</script>

4、v-for列表渲染

<div id="div">
    <ul>
         <!--
          v-for:列表渲染,遍历容器的元素或者对象的属性。
          【环展现数据方式1:遍历数组】
          语法:<标签名 v-for="element in 数组">{{element}}</标签名>
               element含义:遍历的数组中每个元素对象
          含义:控制当前标签进行循环展现数据

          示例:遍历的数组:names:["张三","李四","王五"],输出打印格式:姓名:xxx
         -->
        <li v-for="name in names">
            元素:{{name}}
        </li>
		
		<hr>

        <!--
        【环展现数据方式2:遍历普通对象的属性值】
          语法:<标签名 v-for="element in 对象">{{element}}</标签名>
               element含义:遍历对象中每个属性的对应值
          示例:遍历的对象:student:{name:"张三", age:23},输出打印格式:属性值:张三等
        -->
        <li v-for="element in student">
            元素:{{element}}
        </li>
		<hr>

        <!--
         【环展现数据方式3:遍历数组带有循环索引】
         语法:<标签名 v-for="(element,i) in 数组">{{element}}</标签名>
              element含义:遍历的数组中每个元素对象
              i含义:循环的索引
         示例:遍历的数组:names:["张三","李四","王五"],输出打印格式:姓名0:张三等
        -->
        <li v-for="(name,i) in names">
            元素{{i}}:{{name}}
        </li>
		 <hr>

        <!--
        【环展现数据方式4:使用slice遍历数组部分元素循环】
        语法:<标签名 v-for="element in 数组.slice(索引开始值,索引结束值)">{{element}}</标签名>
             element含义:遍历的数组中每个元素对象
        遍历的数组:names:["张三","李四","王五"]
        示例:遍历数组从第0个位置开始,到索引结束值(不包含索引结束值)
       -->
        <li v-for="name in names.slice(0,2)">
            元素:{{name}}
        </li>
	    <hr>


        <!--
       【环展现数据方式5:使用if遍历数组部分元素循环】
       语法:<标签名 v-for="(element,i) in 数组" v-if="控制i的值表达式">{{element}}</标签名>
       遍历的数组:names:["张三","李四","王五"]
       示例:遍历数组前2个元素
      -->
        <li v-for="(name,i) in names" v-if="i<2">
            元素{{i}}:{{name}}
        </li>
	   <hr>

        <!--
         【环展现数据方式6:控制次数循环】
       语法:<标签名 v-for="num in count">{{num}}</标签名>
       示例:输出5遍hello world
      -->
	  <span v-for="num in 5">
          hello
      </span>
	  <hr>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>

5、v-on事件绑定

<body>
    <div id="div">
        <div>{{name}}</div>
		<!--老方式绑定事件【了解】-->
        <button onclick="demo()">单击_改变div的内容</button>
        <!--
            v-on:为 HTML 标签绑定事件
            完整语法:<标签名 v-on:事件名="vue中methods里面的函数名()"></标签>
            简写语法:<标签名 @事件名="vue中methods里面的函数名()"></标签>
        -->
        <button v-on:click="change">单击_改变div的内容</button>
        <button v-on:dblclick="change()">双击_改变div的内容</button>

        <button @click="change">简写单击_改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"halulu"
        },
        methods:{
            change(){
                this.name = "halulu加强版"
            }
        }
    });
	
	function demo(){
        alert("demo");
        //在vue的外部调用模型数据:vm.name
    }
</script>

6、v-model表单绑定

<body>
    <div id="div">
        <form autocomplete="off">
			<!--
                单向绑定: model数据改变了  ==》 视图的数据也会变
                         视图的数据改变了,Model不会被影响
            -->
            姓名_单向绑定:<input type="text" name="username" :value="username">
            <br>
			<!--
                双向绑定:model数据改变了 《==》 视图的数据也会变
                        视图的数据改变了,Model会被影响
            -->
            姓名_双向绑定:<input type="text" name="username" v-model="username">
			<br>

        </form>
		
        <hr>
		<h3>{{username}}</h3>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标:使用v-model实现MVVM双向数据绑定
    *      注意:不用v-model就是单向,使用就是双向
    * */
    new Vue({
        el:"#div",
        data:{
            username:"张三",

        }
    });
</script>

Vue的生命周期

在这里插入图片描述

在这里插入图片描述

axios的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <!--
        引入axios核心js文件
    -->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    姓名:{{name}},年龄:{{age}}
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"",
            age:""
        },
        methods:{
            //发送异步请求获取后端数据
            send(){

                /*
                * axios异步请求语法:
                *
                  1.get请求语法
                      axios.get(url,params)
                          .then(resp=>{ //成功回调函数代码 })
                          .catch(error=>{//错误回调函数})
                      参数url: 设置请求的后端资源地址
                      参数params: 请求传递的数据,支持2种格式
                           格式1:原始格式,"key1=value1&key2=value2"
                           格式2:json对象, {key1:value1,key2:value2,...} ,传输底层是json字符串给后端
                      .then(resp=>{ //成功回调函数代码 }) 含义:异步请求处理成功的回调函数
                           resp=>{}:ES6新的方式箭头函数,类似与java的lambda表达式的->
                                     与function(resp){} 匿名函数功能一样,推荐使用ES6箭头函数
                           resp:变量名任意,代表的是服务器返回的响应对象,resp.data 获取服务器返回的数据
                      .catch(error=>{//错误回调函数}) 含义:失败的回调函数

                  2.post请求语法
                      axios.post(url,params)
                          .then(resp=>{ //成功回调函数代码 })
                          .catch(error=>{//错误回调函数})
                  3.put请求语法
                      axios.put(url,params)
                          .then(resp=>{ //成功回调函数代码 })
                          .catch(error=>{//错误回调函数})
                  4.delete请求语法
                      axios.delete(url,params)
                          .then(resp=>{ //成功回调函数代码 })
                          .catch(error=>{//错误回调函数})
                * */

                //发送异步请求
                let url = "/DemoServlet"; //访问项目根路径下面的资源
                let params = "name=123";
                axios.post(url,params).then(response=>{
                    //获取服务器返回的数据
                    let user = response.data;  //返回的数据格式:{name:xx,age:xx}
                    this.name = user.name;
                    this.age = user.age;
                }).catch(error=>{
                    alert(error);
                    console.log(error);
                })
            }
        },
        created(){
            this.send();
        }
    });
</script>
</html>

文章来源:https://blog.csdn.net/weixin_44504809/article/details/117061549

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/qianduankaifa/30881.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码