VUE基础(一) -单击@click v-for循环 v-if和v-show v-model双向绑定 axios异步请求

最新推荐文章于 2023-10-17 09:57:56 发布

专注一生i

最新推荐文章于 2023-10-17 09:57:56 发布

阅读量1.1k

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_26304015/article/details/109464088

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目标

了解Vue
掌握vue常用系统指令
了解vue的生命周期
掌握axios请求（ajax）
能写出综合案例

一、 VueJS介绍

1、什么是vue

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件（双向绑定）。它不仅易于上手，还便于与第三方库或既有项目整合。官网:https://cn.vuejs.org/

2、 MVVM模式[了解]

MVVM是Model-View-View-Model的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model） Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

二、快速入门

1、下载vue.js

访问官网地址，点击起步 --- 安装

在浏览器中访问以下地址对应的开发版本的路径,复制打开的该地址网页中的内容，然后创建一个js文件，粘贴到创建的js文件中，在HTML页面引入该js文件，即可本地引用，创建Vue对象

地址:https://cdn.jsdelivr.net/npm/vue/dist/vue.js

安装Vue.js插件

2、编写页面

编写页面前环境搭建:在IDEA中创建带骨架的Maven项目--->在项目的webapp包下创建Vue的js脚本的本地引用文件或者直接在webapp包下的HTML页面中通过网络引用。

引入js：两个使用一个即可

在HTML页面的head标签体之中或body标签体之后引入均可

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   <!--通过网络引入-->
或
<script src="vue-v2.6.11.js"></script>  <!--本地引入，js文件中的内容与网络引入地址中的内容完全一致-->

1、引入Vue.js文件(本文档所有案例中的Vue.js文件与HTML文件同在一个包下)，创建Vue对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--本地引入Vue的js脚本-->
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <!--在div标签中引用Vue对象中的属性，{{}}为插值表达式，花括号中对应Vue对象中的data里定义的变量-->
    {{message}}   
</div>
<script>
    new Vue({
        //通过id选择器，锁定对应的标签体,在标签体中就可以调用Vue对象中定义的属性，el 是element的缩写，元素
        el:'#app', //表示当前vue对象接管了div区域
        data:{
            //注意不要写分号结尾，如果定义了多个变量，除最后一个变量外，前面的变量后面都要加逗号把多个变量区分开
            message:'hello world' 
        }
    });
</script>
</body>
</html>

3、页面解析

三、【重点】常用系统指令

1、插值表达式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>插值表达式 </title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    {{message + "World"}}</br>  <!--字符串拼接-->
    {{i + message}}</br>  <!--字符串拼接-->
    {{i + "20"}}</br>  <!--字符串拼接-->
    {{50 + i}} </br>  <!--直接进行数值运算-->
    {{i == 100 ? true: false}}  <!--三元运算符-->
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            //声明Vue对象中封装的变量
            message: "Hello",
            i :100
        }
    });
</script>
</body>
</html>

2、事件绑定

2.1 单击事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-on:click  单击事件</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    {{message}}

    <!--按钮-->
    <input type="button" value="点击" v-on:click="fun2">
</div>

<script>
    //创建vue对象
    let vue =  new Vue({
        el:"#app",  // id选择器    
        data:{  //封装数据
            message:"hello"
        },
        // methods 里面定义vue的方法
        methods :{
            // ES6 支持
            fun1(){
                alert(" vue 的第一个方法");
            },
            fun2: function(){
                //this.message 引用的 vue 的data中的变量 ,  必须使用this或者vue对象引用
                // this 就是vue对象
                this.message = "改变了 vue中的数据";
            }
        }
    });
</script>
</body>
</html>

在IDEA中修改ES6:

2.2 按键事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-on:keydown  </title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-on:keydown="fun('abc',$event)"/>
    <!--fun('abc',$event)"   'abc' 为固定参数   $event 键盘按键事件 -->
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        methods:{
            fun(msg, event ){
                console.log(event.keyCode);
                if(event.keyCode >= 65 && event.keyCode <= 90){
                    console.log("您按下的是 字母");
                }
                if(event.keyCode >= 48 && event.keyCode <= 57){
                    console.log("您按下的是 数字");
                }
            }
        }
    });

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

在浏览器端控制台运行效果:

2.3 鼠标事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-on:mouseover 鼠标事件</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <!-- $event 参数可以省略传参 -->
    <div v-on:mousemove="fun1" onm style="border:1px solid red">
        <textarea>这是一个文本域</textarea>
    </div>
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  //id选择器    $("#app")
        methods:{
            fun1(event){
                // console.log(event.offsetX);  // 相对坐标
                // console.log(event.offsetY);
                console.log(event.x); // 绝对坐标
                console.log(event.y);
            }
        }
    });
</script>
</body>
</html>

2.4 事件修饰符

.stop 阻止冒泡
.prevent 阻止事件的默认行为
.capture 捕获过程监听
.self 连缀
.once 监听只会执行一次

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <!-- @click =====   v-on:click -->
    <!--访问方法阻止事件发生-->
    <form @submit="fun2" action="http://www.baidu.com">  <!--按钮失效，链接不可跳转-->
        <input type="submit" value="提交" />
    </form>
    <!--使用的是事件修饰符阻止事件发生-->
    <form @submit.prevent action="http://www.baidu.com">  <!--按钮失效，链接不可跳转-->
        <input type="submit" value="提交" />
    </form>

    <div @click="fun1">
        <!-- v-on:click.stop : 阻止冒泡     阻止事件的传播 -->
        <a @click.stop href="http://www.baidu.com">百度</a>  <!--链接可跳转 ？？？ -->
    </div>
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        methods:{ //定义方法
            fun1:function(){
                alert("div事件执行了");
            },
            fun2(event){
                // 阻止事件的发生
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>

2.5 按键修饰符

按键别名

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>按键修饰符  </title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @keydown.ctrl.C="fun" />  <!--keydown. 的后面是哪颗键名，在浏览器端的输入框中单击键盘上的该键名时，才会执行Vue中的方法fun，可以是@keydown.D 或@keydown.E 等任意键名-->
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        methods:{ //定义方法
            fun(){
                console.log("键盘按下");
            }
        }
    });
</script>
</body>
</html>

2.6 缩写模式

@click =====   v-on:click

3、v-text和v-html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-text与v-html   </title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    {{message}}  <!--纯文本显示-->
    <!--v-text  按照文本展示-->
    <!-- innerText-->
    <div v-text="message"></div>  <!--纯文本显示-->
    <!--v-html 按照html标签进行解析 -->
    <!--innerHtml -->
    <div v-html="message"></div>   <!--可跳转的超链接-->
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        data:{
            message: "<a href='http://www.baidu.com'>百度</a>"
        }
    });
</script>
</body>
</html>

4、v-bind

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <!-- 绑定vue 的变量 -->
    <font v-bind:color="ys1">百度</font>  <!--红色文本-->
    <font v-bind:color="ys2">百度</font>  <!--蓝色文本-->
    <font :color="ys3">百度</font>  <!--绿色文本-->
    <!--绑定： 拼接字符串-->
    <a :href="url + 'usercenter/paper/show?paperid=b243601efd8c8a40499c04a53e9dfec0'">百度学术-哲学</a>
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        data:{
            ys1:"red",
            ys2:"blue",
            ys3:"green",
            url:"https://xueshu.baidu.com/"
        }
    });
</script>
</body>
</html>

5、v-model(双向绑定)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-model 双向绑定</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    您在文本框中输入的内容：{{message}}<br/>
    <!-- 双向绑定： 改变文本框的数据，vue中的变量会随着改变 -->
    <input type="text" v-model="message"/><br/>
    <input type="text" v-model="message"/><br/>

    用户名：<input type="text" v-model="user.username" /><br/>
    密码：<input type="text" v-model="user.password" /><br/>
    <input type="button" value="操作" @click="fun1" />
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        data:{
            message:"",
            user:{
                username: "请输入用户名",
                password: "请输入密码"
            }
        },
        methods:{
            fun1:function(){
                console.log(this.user);
            }
        }
    });
</script>
</body>
</html>

6、v-for循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-for 循环</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="a in arr">{{a}}</li>
    </ul>
    <ul>
        <li v-for="b in obj">{{b}}</li>
    </ul>
    <ul>
        <li v-for="(value,key) in obj">{{key}} :: {{value}}</li>
    </ul>

    <table>
        <tr v-for="obj in objArr">
            <td>{{obj.id}}</td>
            <td>{{obj.username}}</td>
            <td>{{obj.age}}</td>
        </tr>
    </table>
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        data:{
            arr:['mybatis','spring','springMVC'],
            obj:{
                id:1,
                username: "张三",
                age:18
            },
            objArr:[
                {
                    id:1,
                    username: "张三",
                    age:18
                },
                {
                    id:2,
                    username: "李四",
                    age:18
                },
                {
                    id:3,
                    username: "王五",
                    age:18
                }
            ]
        }
    });
</script>
</body>
</html>

浏览器端运行效果:

7、v-if和v-show

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-if和v-show</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    <!--
        v-if  , v-show 都能控制元素的隐藏和显示
        v-if 如果为false ，则不加载元素；为true，加载。
                如果切换不太频繁，可以使用v-if
        v-show 不论是否使用，都会加载；为false，只是隐藏，但是仍然加载元素。
                如果频繁的切换，则使用v-show
    -->
    <font v-if="flag">宁静</font>
    <font v-show="flag" >nj</font>
    <input type="button" value="切换" @click="fun"/>
</div>

<script>
    //创建vue对象
    new Vue({
        el:"#app",  // 选择器    $("#app")
        data:{
            flag:false
        },
        methods:{
            fun(){
                this.flag = !this.flag;
            }
        }
    });
</script>
</body>
</html>

四、生命周期[了解]

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

https://cn.vuejs.org/images/lifecycle.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue生命周期</title>
    <script src="js/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        },
        beforeCreate: function() {
            console.log(this);
            showData('创建vue实例前', this);
        },
        created: function() {
            showData('创建vue实例后', this);
        },
        beforeMount: function() {
            showData('挂载到dom前', this);
        },
        mounted: function() {
            showData('挂载到dom后', this);
        },
        beforeUpdate: function() {
            showData('数据变化更新前', this);
        },
        updated: function() {
            showData('数据变化更新后', this);
        },
        beforeDestroy: function() {
            vue.test = "3333";
            showData('vue实例销毁前', this);
        },
        destroyed: function() {
            showData('vue实例销毁后', this);
        }
    });
    function realDom() {
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    }
    function showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.test)
        console.log('挂载的对象：')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }
    vue.message="good...";
    vue.$destroy();
</script>
</body>
</html>

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

1、beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

2、created ：数据已经绑定到了对象实例，但是还没有挂载对象 3、beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点 4、mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方 5、beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变

6、updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到 dom上面，完成更新 7、beforeDestroy：实例销毁前

8、destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

作用：

了解钩子函数

使用其中的钩子函数，做到创建vue对象，立刻执行某方法, 初始化加载

obj.$el : 获取 vue 绑定的dom元素是什么

五、vue的axios[异步请求]

1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。 vue-resource的github: https://github.com/pagekit/vue-resource

2 axios

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 axios的github:https://github.com/axios/axios

3 应用

3.1 引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.2 get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345').then(
  function(response){
			console.log(response);
	}).catch(function(err){
			console.log(err);
	});

//以上请求也可以通过这种方式来发送
axios.get('/user',{params:{ ID:12345, name:'zhangsan' }}).then(
    function(response){
		console.log(response);
}).catch(function(err){
		console.log(err);
});

3.3 post请求

axios.post('/user',{firstName:'Fred', lastName:'Flintstone'}).then(
    function(res){
		console.log(res);
})
.catch(function(err){
		console.log(err);
});

简化写法：

axios.post('/user',{firstName:'Fred', lastName:'Flintstone'}).then(
(res)=>{
console.log(res);
})
.catch((err)=>{
console.log(err);
});

3.4 其他请求

axios.request(config)
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

专注一生i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE基础(一) -单击@click v-for循环 v-if和v-show v-model双向绑定 axios异步请求

目标了解Vue 掌握vue常用系统指令了解vue的生命周期掌握axios请求（ajax）能写出综合案例一、 VueJS介绍1、什么是vueVue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件（双向绑定）。它不仅易于上手，还便于与第三方库或既有项目整合。官网:https://cn.vuejs.org/2、 MVVM模式[了解]MVV...
复制链接

扫一扫