Vue.js概述与快速入门

最新推荐文章于 2024-08-05 19:35:10 发布

飞奔的嗨少

最新推荐文章于 2024-08-05 19:35:10 发布

阅读量1k

点赞数

分类专栏： Java修仙之路

本文链接：https://blog.csdn.net/weixin_43908333/article/details/106398523

版权

Java修仙之路专栏收录该内容

91 篇文章 9 订阅

订阅专栏

一、VueJS 概述与快速入门

1.vue的基本介绍

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

2.vue官网

https://cn.vuejs.org/

3.MVVM模式

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

二、vue入门案例

1.导入vue所需要的依赖库

链接：https://pan.baidu.com/s/1dSpANsqnMLTxf5_EWhhOKQ 
提取码：5pqz 
复制这段内容后打开百度网盘手机App，操作更方便哦

2.编写vue代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}  <!--Vue中的插值表达式，将vue中定义的数据显示出来-->
    </div>
</body>
<script>
	//创建vue对象
    new Vue({
        el:"#app",   //表示当前vue对象接管的id="app"的div区域
        data:{
            message:"hello vue...."   //注意不要写分号结尾
        }
    })
</script>
</html>

3.插值表达式

数据绑定常见的形式就是使用“Mustache”语法(双大括号)的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。
<div id="app">
    <!--三目运算符-->
    {{true?"YES":"NO"}}
    <br>
    <!--数学运算-->
    {{100+100}}
</div>

这些表达式会在所属Vue实例的数据作用域下作为JavaScript 被解析。有个限制就是，每个绑定都只能包含单个 表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 --> 
{{ var a = 1 }} 
<!-- 流控制也不会生效，请使用三元表达式 --> 
{{ if (true) { return message } }}

三、vue中的常用指令

1. v-on指令：可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码.

1.1 v-on:click

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <button v-on:click="fn1('改变了')">点此改变</button>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello vue...."
        },
        methods:{
            fn1:function (msg) {
                this.message=msg;
            }
        }
    })
</script>
</html>

1.2 v-on:keydown
使用传统的js代码设置键盘按下事件，并让回车键失效

<body>
    <input type="text" onkeydown="showKeyCode()"></input>
</body>
<script>
    function showKeyCode(){
        //alert(event.keyCode);
        var code = event.keyCode;
        if(code==8){
            event.preventDefault();//阻止事件的默认行为
        }
    }
</script>

使用vue来完成上述功能

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-on:keydown="fn1($event)"></input>
</div>
</body>
<script>
  new Vue({
      el:"#app",
      methods:{
          fn1:function(event){
              if(event.keyCode==8){
                  event.preventDefault();
              }
          }
      }
  })
</script>
</html>

3. v-on:mouseover
使用传统的js代码测试onmouseover事件和事件的传播行为。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <style>
        div#div1{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        div#div2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
      <div id="div1" onmouseover="fn1()">
          <div id="div2" onmouseover="fn2()"></div>
      </div>
</div>

</body>
<script>
    function fn1(){
        alert("div1显示了");
    }
    function fn2(){
        alert("div2显示了");
        event.stopPropagation();//阻止事件的传播行为
    }
</script>
</html>

使用vue代码事项onmouseover事件和事件的传播行为。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <style>
        div#div1{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        div#div2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
      <div id="div1" v-on:mouseover="fn1()">
          <div id="div2" v-on:mouseover="fn2($event)"></div>
      </div>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        methods:{
            fn1:function(){
                alert("div1显示了......");
            },
            fn2:function(event){
                alert("div2显示了......")
                event.stopPropagation();
            }
        }
    })
</script>
</html>

4.vue中的事件修饰符

传统js为提供了事件修饰符来处理DOM事件细节，如：event.preventDefault() 或 event.stopPropagation()。
而vue.js通过由点(.)表示的指令后缀来调用修饰符。如v-on:mouseover.stop或者@mouseover.stop

.stop    //阻止函数的传递
.prevent   //阻止默认程序，比如form表单中的summit提交按钮，会自己提交
.capture   //capture先执行父级的函数，再执行子级的触发函数(一般用法)
.self    //self是只执行子级本身的函数
.once:   //只执行一次

如何阻止表单的默认提交行为：传统js代码

<body>
   <div id="app">
       <form action="http://www.qq.com" method="post" onsubmit="return checkForm()">
           <input type="submit" value="提交">
       </form>
   </div>
</body>
<script>
   function checkForm(){
       return false;
   }
</script>

使用vue的方式

<body>
   <div id="app">
       <form @submit.prevent action="http://www.qq.com" method="post">
           <input type="submit" value="提交">
       </form>
   </div>
</body>
<script>
    new Vue({
        el:"#app"
    })
</script>
</html>

阻止事件的默认传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#box1{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        div#box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
   <div id="app">
       <div @mouseover="fun1" id="box1">
           <div id="box2" @mouseover.stop="fun2"></div>     <!--@mouseover.stop阻止时间的默认传播行为-->
       </div>
   </div>
</body>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun1:function(){
                alert("hello......BOX1");
            },
            fun2:function(){
                alert("hello......BOX2");
            }
        }
    })
</script>
</html>

5.按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：

<div id="app">
    <input type="text" v-on:keyup.enter="fun1">  <!--当enter键被抬起的时候触发函数-->
</div>
</body>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun1:function(){
                alert("你按了回车键");
            }
        }
    })
</script>

6. v-text 和v-html

它们的区别在于v-text可以只能解析txt格式的文本，不能解析html，v-html既可以解析txt格式的文本，也能解析html

<div id="app">
    <div v-text="message"></div>
    <div v-html="message"></div>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"<h1>hello vue...</h1>"
        }
    })
</script>

7. v-bind

<div id="app">
    <a v-bind:href="message">跳转到</a>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"http://www.qq.com"
        }
    })
</script>

8. v-for

遍历数组

<div id="app">
    <ul>
        <li v-for="(e,index) in arr">{{index}},{{e}}</li>
    </ul>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            list:[1,2,3,4,5]
        }
    })
</script>

遍历对象

<div id="app">
    <ul>
        <li v-for="(value,key) in product">{{value}},{{key}}</li>
    </ul>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            product:{
                id:1001,
                name:"student1",
                price:10000
            }
        }
    })
</script>

遍历对象数组

<body>
<div id="app">
    <ul>
        <li v-for="p in product">{{p.id}},{{p.name}},{{p.price}}</li>
    </ul>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            product:[
				{
					id:1001,
					name:"apple",
					price:10000
				},
				{
					id:1002,
					name:"HUAWEI",
					price:9000
				},
				{
					id:1001,
					name:"三星",
					price:8000
				}
            ]
        }
    })
</script>

9. v-model

<body>
<div id="app">
	<!--给节点对象设置值-->
    用户名:  <input type="text" v-model="user.username"> <br>
    密  码: <input type="text" v-model="user.password">
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                username:"ketty",
                password: "12345"
            }
        }
    })
</script>

10. v-if与v-show:顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

<body>
<div id="app">
    <span v-if="flag" id="s1">
          span1元素显示了。
    </span>
    <span v-show="flag" id="s2">
          span2元素显示了。
    </span>

</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            flag:true
        }
    })
</script>

那么v-if和v-show到底有没有区别呢?
当flag:false的时候，v-if和v-show所在的元素都没有显示。
v-if所在的元素压根就没有被渲染。
v-show所在的元素被渲染了，在span标签上添加了display:none;的样式

四、Vue的生命周期

我们可以根据vue官方提供的代码来验证vue的声明周期

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>vuejs生命周期</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         {{message}}
      </div>
   </body>
   <script>
      var vm = 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() {
            vm.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.message)
         console.log('挂载的对象：')
         console.log(obj.$el)
         realDom();
         console.log('------------------')
         console.log('------------------')
      }
      //vm.message = "good...";
  	  //vm.$destroy();
   </script>
</html>

将vm.message = "good...";放开，进行数据的更新，此时的生命周期

同时放开vm.message = "good..."和vm.$destroy();调用销毁的vue实例的销毁方法，此时vue的生命周期如下所示

只放开vm.$destroy();屏蔽掉vm.message = "good...";调用销毁的vue实例的销毁方法，此时vue的生命周期如下所示

五、Vue与ajax

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.axios的百度网盘的下载地址

链接：https://pan.baidu.com/s/1pD-Sd7HPc1Mcu-4fyOp9_g 
提取码：kdie 
复制这段内容后打开百度网盘手机App，操作更方便哦

4.引入axios

首先就是引入axios,如果你使用es6,只需要安装axios模块之后
import axios from 'axios'; 
npm install axios
//或
bower install axios

当然也可以引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

5.Get请求

6.Post请求