嘿嘿嘿1212

VUE基础语法(带扩展):axios异步请求&事件绑定&事件修饰符&按键修饰符&数据显示&列表渲染&条件渲染&生命周期

1 Vue概述

1.1 VueJS介绍

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

官网:https://cn.vuejs.org/

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM ，也就是 ViewModel。

ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

分析:

2、Vue的快速入门


<html>
<head>
    <meta charset="utf-8"/>
    <title>快速入门title>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    {
    {message}}
div>
body>
<script>
    //view model
    //创建Vue对象
    new Vue({
      
        el: "#app",//vue接管id为app区域
        data: {
      
            message: "Hello Vue! EESY"//注意:此处不要加分号
        }
    });
script>
html>

3、Vue的语法

3.1 插值表达式

数据绑定常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

{
     {
      number + 1}}
{
     {
      ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。


    {
    {var a=1;}}
    {
    {if(a=10){}}

{
    { if(ok) {return message }}

3.2 事件的绑定

3.2.1 v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
格式:v-on:事件或@事件

3.2.2.1 v-on:click

点击事件


<html>
<head>
    <meta charset="utf-8"/>
    <title>v-on:clicktitle>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    {
      {message}}
    <button v-on:click="fun1('good')">vue的onclickbutton>
div>
body>
<script>
    //view model
    new Vue({
        
        el:"#app",//表示当前vue对象接管了div区域
        data:{
        
            message:'hello world'//注意不要写分号结尾
        },
        methods:{
        
            fun1:function (msg) {
        
                this.message=msg;
            }
        }
    })
script>
html>

3.2.2.2 v-on:keydown

按键按下事件


<html>

<head>
    <meta charset="utf-8"/>
    <title>v-on:keydowntitle>
    <script src="js/vuejs-2.5.16.js">script>
head>

<body>
<div id="app">
    Vue:<input type="text" v-on:keydown="fun($event)">
    <hr/>
    传统js:<input type="text" onkeydown="showKeyCode()">
div>
body>
<script>
    //view model
    new Vue({
        
        el: "#app",
        methods: {
        
            fun: function (event) {
        
                var keyCode = event.keyCode;
                if (keyCode < 48 || keyCode > 57) {
        
                    event.preventDefault();
                }
            }
        }
    });

    //传统js的键盘按下事件
    function showKeyCode() {
        
        //event对象和我们的document对象以及window对象是一样,可以不用定义直接使用
        var keyCode = event.keyCode;
        if (keyCode < 48 || keyCode > 57) {
        
            event.preventDefault();
        }
        // alert(keyCode);
        // if(event.keyCode==13){
        
        //     alert("你按的是回车")
        // }
    }
script>
html>

3.2.2.3 v-on:mouseover

表示鼠标移入事件

进行鼠标移入提醒,并去div的除传播行为


<html>

<head>
    <meta charset="utf-8"/>
    <title>v-on:mouseovertitle>
    <style>
        #div {
        
            background-color: red;
            width: 300px;
            height: 200px;
        }
    style>
    <script src="js/vuejs-2.5.16.js">script>
head>

<body>
<div id="app">
    <div @mouseover="fun1" id="div">
        <textarea @mouseover="fun2($event)">这是一个文件域textarea>
    div>
    
        
    
div>
body>
<script>
    //view model
    /**
     * @事件名称 就是 v-on:事件名称的简写方式
     * @mouseover它就等同于v-no:mouseover
     */
    new Vue({
        
        el:"#app",
        methods:{
        
            fun1:function () {
        
                alert("鼠标移动到div上了")
            },
            fun2:function (event) {
        
                alert("鼠标移动到了textarea上了");
                event.stopPropagation();
            }
        }
    });
    // //传统的js方式
    // function divmouseover() {
        
    //     alert("鼠标移动到div上了");
    // }
    //
    // function textareamouseover() {
        
    //     alert("鼠标移动到了textarea上了");
    //     event.stopPropagation();
    // }
script>

html>

注意:@是v-on:的简写方式

3.2.2 事件修饰符

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

.stop:停止传播
.prevent:阻止行为
.capture:捕获
.self:本身触发(不从内部元素触发)
.once:只会触发一次
.passive:先触发默认事件,然后触发调用的方法(移动端)

注意:修饰符可以串联,并且可以只有修饰符,不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，
用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。

官方事件修饰符教程链接

例子:进行阻止进行跳转

vue


<html>
<head>
    <meta charset="utf-8"/>
    <title>v-on 事件修饰符title>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    <form @submit.prevent action="http://www.itcast.cn" method="get"><input type="submit" value="提交"/>form>
    <div @click="fun1"><a @click.stop href="http://www.itcast.cn">itcasta>div>
div>
<script>            
new Vue({
        
	el: '#app', //表示当前vue对象接管了div区域                             
	 methods:{
                            
	 	fun1:function(){
                                
	 		alert("hello itcast");                    
	 	}                
	 }           
});        
script>
body> 
html>

传统js


<html>

<head>
    <meta charset="utf-8"/>
    <title>v-on:事件修饰符title>

    <script src="js/vuejs-2.5.16.js">script>
head>

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

html>

3.2.3 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
- .enter
- .tab
- .delete (捕获 "删除" 和 "退格" 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- 等等
  官方按键修饰符教程链接

实例
按下回车时弹出提示框


<html>

<head>
    <meta charset="utf-8"/>
    <title>v-on:按键修饰符title>

    <script src="js/vuejs-2.5.16.js">script>
head>

<body>
<div id="app">
    Vue:<input type="text" @keydown.enter="fun1">
div>
body>
<script>
    //view model
    new Vue({
        
        el: "#app",
        methods: {
        
            fun1: function () {
        
                alert("按下的是回车")
            }
        }
    })
script>

html>

3.3 数据的显示

3.3.1 v-text与v-html

对innerHTML 与innerText进行代替


<html>
<head>
    <meta charset="utf-8"/>
    <title>v-text与v-htmltitle>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    vue
    <div v-text="message">div>
    <div v-html="message">div>
    <hr>
    传统js
    <div id="div1">div>
    <div id="div2">div>
div>
body>
<script>
    //view model
    new Vue({
        
        el:"#app",
        data:{
        
            message:"hello Vue
"
        }
    });
    //传统js
    window.onload = function (ev) {
        
        document.getElementById("div1").innerHTML = "Hello
";
        document.getElementById("div2").innerText = "Hello
";
    }
script>
html>

可以解决插值表达式,在网络速度慢的情况下,闪速的问题

3.3.2 v-bind

对属性进行动态绑定赋值,格式:v-bind:属性或:属性


<html>

<head>
    <meta charset="utf-8"/>
    <title>v-bindtitle>
    <style type="text/css">

    style>
    <script src="js/vuejs-2.5.16.js">script>
head>

<body>
<div id="app">
    <font size="5" :color="ys1">传智播客font>
    <font size="5" :color="ys2">黑马程序员font>
div>
body>
<script>
    //view model
    //插值表达式不能用于html标签的属性取值
    //要想给html标签的属性设置变量的值,需要使用v-bind
    //b-bind也可以简化写法 直接使用:
    new Vue({
        
        el: "#app",
        data: {
        
            ys1: "red",
            ys2: "green"
        }
    })
script>

html>

注意:

插值表达式不能用于html标签的属性取值
要想给html标签的属性设置变量的值,需要使用v-bind
b-bind也可以简化写法直接使用:

v-bind简写方式:
```
<a v-bind:href="url">...a>

<a :href="url">...a>
```
补充:可以进行Class与Css的绑定官方文档链接

3.3.3 v-model

在data中取出json数据进行赋值或进行表单输入绑定(双向数据绑定)


<html>
<head>
    <meta charset="utf-8"/>
    <title>v-modeltitle>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    姓名:<input type="text" name="username" v-model="user.username"><br>
    密码:<input type="password" name="password" v-model="user.password"><br>
div>
body>
<script>
    //view model
    new Vue({
        
        el: "#app",
        data: {
        
            user: {
        
                username: "test",
                password: "1234"
            }
        }
    })
script>
html>

补充:可以进行表单的绑定官方表单输入绑定教程链接

注意:只进行有输入框的进行双向数据绑定

3.4 逻辑判断和循环输出

官方名称:(条件渲染与列表渲染)

3.4.1 v-for (列表渲染)

进行数据遍历展示

数组


<html>
<head>
    <meta charset="utf-8"/>
    <title>v-for遍历数组title>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">{
      {item}}={
      {index}}li>
    ul>
div>
body>
<script>
    //view model
    new Vue({
        
        el: "#app",
        data: {
        
            arr: [1, 2, 3, 4, 5]
        }
    })
script>
html>

arr:源数据数组
item:被迭代的数组元素的别名
index:当前项的索引
可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法
"("与")"可以不写

对象


<html>
<head>
    <meta charset="utf-8"/>
    <title>v-for遍历对象title>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    <ul>
        <li v-for="(key,value) in product">{
      {value}}==={
      {key}}li>
    ul>
div>
body>
<script>
    //view model
    new Vue({
        
        el: "#app",
        data: {
        
            product: {
        
                id: 1,
                name: "笔记本电脑",
                price: 5000
            }
        }
    })
script>
html>

对象数组


<html>

<head>
    <meta charset="utf-8"/>
    <title>v-for遍历对象title>
    <script src="js/vuejs-2.5.16.js">script>
head>

<body>
<div id="app">
    <table border="1">
        <tr>
            <td>序号td>
            <td>编号td>
            <td>名称td>
            <td>价格td>
        tr>
        <tr v-for="(product,index) in products">
            <td>{
      {index}}td>
            <td>{
      {product.id}}td>
            <td>{
      {product.name}}td>
            <td>{
      {product.price}}td>
        tr>

    table>
div>
body>
<script>
    //view model
    new Vue({
        
        el: "#app",
        data: {
        
            products: [
                {
        id: 1, name: "笔记本电脑", price: 5000},
                {
        id: 2, name: "手机", price: 3000},
                {
        id: 3, name: "电视", price: 4000}
            ]

        }
    })
script>

html>

补充:可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
  {
      { name }}: {
      { value }}
div>

官方列表渲染教程

3.4.2 v-if与v-show(条件渲染)

v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

在使用两个几乎没有区别,使用if切换时消失标签,而show只进行隐藏
切换显示还是不显示


<html>
<head>
    <meta charset="utf-8"/>
    <title>v-if与v-showtitle>
    <script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
    <span v-if="flag">传智播客span>
    <span v-show="flag">itcastspan>
    <button @click="toggle">切换button>
div>
body>
<script>
    //view model
    new Vue({
        
        el: "#app",
        data: {
        
            flag: false
        },
        methods: {
        
            toggle: function () {
        
                this.flag = !this.flag;
            }
        }
    })
script>
html>

可以用 v-else添加一个“else 块”
```
<h1 v-if="awesome">Vue is awesome!h1>
<h1 v-else>Oh no ?h1>
```
v-else元素必须紧跟在带 v-if 或者v-else-if 的元素的后面，否则它将不会被识别

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

<div v-if="type === 'A'">
  A
div>
<div v-else-if="type === 'B'">
  B
div>
<div v-else-if="type === 'C'">
  C
div>
<div v-else>
  Not A/B/C
div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

v-show 不支持

VUE基础语法(带扩展):axios异步请求&事件绑定&事件修饰符&按键修饰符&数据显示&列表渲染&条件渲染&生命周期

1 Vue概述

1.1 VueJS介绍

1.2 MVVM模式

2、Vue的快速入门

3、Vue的语法

3.1 插值表达式

3.2 事件的绑定

3.2.1 v-on

3.2.2.1 v-on:click

3.2.2.2 v-on:keydown

3.2.2.3 v-on:mouseover

3.2.2 事件修饰符

3.2.3 按键修饰符

3.3 数据的显示

3.3.1 v-text与v-html

hello Vue

Hello

Hello

3.3.2 v-bind

3.3.3 v-model

3.4 逻辑判断和循环输出

3.4.1 v-for (列表渲染)

3.4.2 v-if与v-show(条件渲染)

4、Vue的生命周期

5、axios的ajax异步请求

5.1 vue-resource

5.2 axios

5.2.1 引入axios

5.2.2 get请求

5.2.3 post请求

6、综合案例

6.1 数据库设计与表结构

表

User类

6.2 服务器端

配置文件

Controller

Dao

6.3 客户端

你可能感兴趣的:(Web前端技术,VUE,常用命令,生命周期,vue.js,小案例)