Vue_入门实例

最新推荐文章于 2023-10-16 12:32:14 发布

BigMoM1573

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量261

点赞数

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

本文链接：https://blog.csdn.net/qq_44509920/article/details/108739829

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

4.Vue实例
5.指令
6 VueJS ajax
7 Vue结构的总结

4.Vue实例

4.1.创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

el
data
methods
…

等等

接下来我们一一介绍。

4.2.模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

<div id="app">
    
</div>

然后创建Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

4.3.数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app">
    {{name}}
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

name的变化会影响到input的值
input中输入的值，也会导致vm中的name发生改变

4.4.方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

html:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

js写法一：

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>
<script src="vue-2.6.10.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           num:0
       },
       methods:{
           add:function(){
               this.num++;
           }
       }
    });
</script>

js写法二：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    num的值:{{num}}<br>
    <!-- v-on :指令， 是Vue中的语法，可以访问data的值-->
    <input type="button" value="+" v-on:click="num++">
    <input type="button" value="-" v-on:click="num--"><br>
    <!--调用方法-->
    <input type="button" value="+" v-on:click="add()">
    <input type="button" value="+" v-on:click="add2()">
    <input type="button" value="-" v-on:click="minus()">


</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            add:function () {
                this.num++
            },
            minus(){
                this.num--
            },
            add2: () => vm.num++
        }
    })
</script>
</body>
</html>

4.5.生命周期钩子函数

回顾：servlet的生命周期–生老病死

生命周期函数–钩子函数：当处于Vue实例处于某个阶段的时候，会自动触发该阶段的钩子函数

4.5.1.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：
在这里插入图片描述

生命周期的流程：–每个流程对应一个函数，当vue处于某个阶段的时候，会自动触发该阶段的函数

1 初始化前 --BeforeCreate

2 初始化完成 —发送ajax --created

3 双向数据绑定前/挂载前 —BeforeMount

4 双向数据绑定完成/挂载完成 --Mounted

5 更新前 --BeforeUpdate

6 更新完成–updated

7 销毁前–BeforeDestroy

8 销毁完成–Destroyed

4.5.2.钩子函数

例1：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

html:

<div id="app">
    {{hello}}
</div>

js:

<script src="vue-2.6.10.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           hello:''
       },
       created(){
           this.hello = 'czdx,一统江湖，千秋万代'
       }
    });
</script>

结果：
在这里插入图片描述

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>

<div id="app">
    {{msg}}

</div>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           msg:'传智大学，一统江湖，千秋万代'
       },
       methods:{

       },
        // 创建前
       beforeCreate(){
            showData("创建前",this);
       },
       created(){
           showData("创建完成",this);
       },
       // 双向数据绑定前
       beforeMount(){
           showData("双向数据绑定前",this)
       },
       // 双向数据绑定完成
       mounted(){
           showData("双向数据绑定完成",this)
       },
       beforeUpdate(){
           showData("更新前",this)
       },
       updated(){
           showData("更新完成",this)
       },
       beforeDestroy(){
           showData("销毁前",this)
       },
       desed(){
           showData("销毁完成",this)
       }



    });
    // 打印 "创建前" 这几个字
    // 打印msg的值
    // 打印 页面id=app的div中的内容
    // 第一个参数：创建前   创建完成   销毁前   销毁后  ......
    function showData(process,obj){
        console.log(process);
        console.log(obj.msg);
        console.log(document.getElementById("app").innerHTML)
        console.log("----------------------------------")
    }
    // 更新数据
    //vm.msg="good. good study   day  day  up."
    // 销毁数据
    vm.$destroy();
</script>
</body>
</html>

总结：

1 vue的生命过程很丰富的，每个过程都有要完成的事情

2 created的生命周期：vue已经创建完成，数据已经有了—>通过ajax向后台

往后操作就是进行双向数据绑定

3 beforeCreate：初始化前/创建前，此时data中的数据还没有初始化

created：初始化完成/创建完成,data中的数据已经初始化

beforeMount：双向绑定前

mounted：双向绑定完成，页面会显示data中的数据

beforeUpdate：更新前，此时变量的内容会被更新，但是页面没有变化

updated：更新完成，此时页面会发生改变

beforeDestroy:销毁前

destroyed:销毁完成

4.5.3.this

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化为空
    },
    created(){
        this.hello = "czdx,一统江湖，千秋万代";
        console.log(this);
    }
})

控制台的输出：
在这里插入图片描述
总结：

this就是代表当前的vue对象

4.5.4 回顾

1、生命周期 -钩子函数

beforeCreate：初始化前/创建前，此时data中的数据还没有初始化

created：初始化完成/创建完成,data中的数据已经初始化

beforeMount：双向绑定前

mounted：双向绑定完成，页面会显示data中的数据

beforeUpdate：更新前，此时变量的内容会被更新，但是页面没有变化

updated：更新完成，此时页面会发生改变

beforeDestroy:销毁前

destroyed:销毁完成

2、this关键字：this关键字在vue中指vue的实例

5.指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-model、v-on…，都是指令。

5.1.插值表达式

5.1.1.大括号

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数

示例：

HTML：

<div id="app">{{name}}</div>

JS:

var app = new Vue({
    el:"#app",
    data:{
        name:"奇哥"
    }
})

5.1.2.插值闪烁–问题

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：
在这里插入图片描述
刷新页面：

5.1.3.v-text和v-html

使用v-text和v-html指令来替代{{}}

作用：用来进行数据呈现的，可以代替{{}}，可以有效的解决插值表达式的闪烁问题

说明：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

HTML:

<div id="app">
    <span v-text="hello"></span><br>
    <span v-html="hello"></span>

</div>

JS:

var vm = new Vue({
       el:"#app",
       data:{
           hello:'大家好，我是奇哥'
       }
    });

效果：
在这里插入图片描述
并且不会出现插值闪烁，当没有数据时，会显示空白。

5.2.v-model-双向绑定的指令

刚才的插值表达式、v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input-text
input-password
select
textarea
checkbox
radio
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

5.2.1 input

<div id="app">
    <input type="text" v-model="num">
    <h2>{{num}}</h2>
    <input type="button" value="+" v-on:click="num++">
    <input type="button" value="-" v-on:click="num--">
</div>

<script>
    var vm = new Vue({
       el:"#app",
       data:{
           num:1
       }
    });

</script>

效果：
在这里插入图片描述

5.2.2 checkbox

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和textarea 默认对应的model是字符串
select单选对应字符串，多选对应也是数组

效果：
在这里插入图片描述

5.2.3 radio

<div id="app">
    <input type="radio" value="male" v-model="sex">男
    <input type="radio"  value="female" v-model="sex">女
    <h2>{{sex}}</h2>
</div>

<script src="vue-2.6.10.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           sex:'male'
       }
    });
</script>

效果：
在这里插入图片描述

5.2.4 textarea

<div id="app">
    <input type="radio" value="male" v-model="sex">男
    <input type="radio"  value="female" v-model="sex">女
    <h2>{{sex}}</h2>
    <textarea v-model="sex"></textarea>
</div>

<script src="vue-2.6.10.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           sex:'male'
       }
    });
</script>

效果：
在这里插入图片描述

5.2.5 select–需要结合属性绑定v-bind和循环v-for

<div id="app">
    <input type="radio" value="male" v-model="sex">男
    <input type="radio"  value="female" v-model="sex">女
    <h2>{{sex}}</h2>
    <textarea v-model="sex"></textarea><br>
    <select v-model="favor">
        <option v-for="item in items" :value="item">{{item}}</option>
    </select>


</div>

<script src="vue-2.6.10.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           sex:'male',
           favor:'弹琴',
           items:['唱歌','跳舞','弹琴']
       }
    });
</script>

5.3.v-on

5.3.1v-on:click基本用法，简写@click

v-on指令用于给页面元素绑定事件。语法：

v-on:事件名="js片段或函数名"

示例：

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="num++">增加</button><br/>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <button v-on:click="decrement">减少</button><br/>
    <h1>num: {{num}}</h1>
</div>
<script src="vue-2.6.10.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>

效果：
在这里插入图片描述
另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

5.3.2 v-on:keydown

表示键盘按下事件。

http://tool.oschina.net/commons?type=4

ascii码
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app">
    <input type="text" v-model="name" v-on:keydown="show($event)">

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            name:""
        },
        methods:{
            show(e){
                var keyCode = e.keyCode;
                console.log(keyCode)
            }
        }

    })
</script>
</body>
</html>

5.3.3 v-on:mouseover和v-on:mouseout

鼠标移入和移出事件区域事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app">
    <div style="width: 100px;height: 100px; border: 1px solid red" @mouseover="show()" @mouseout="go()">

    </div>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            name:""
        },
        methods:{
            show(){
                console.log("进来了")
            },
            go(){
                console.log("出来了")
            }
        }
    })
</script>
</body>
</html>

5.3.4 js冒泡事件–是一个问题，需要解决

在这里插入图片描述
概念：

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)，会触发所有父层或者子层的方法

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js">
</script>
<div id="app">
    <div style="width: 100px;height: 100px; border: red 1px dashed"
           @mouseover="over()" @mouseout="out()">
        <textarea @mouseover="myover($event)"></textarea>
    </div>

</div>
<script>
    var vm = new Vue({
       el:"#app",
       methods:{
           over(){
               console.log("进来了")
           },
           out(){
               console.log("出去了")
           },
           myover(e){
               console.log("进入txt了");
               // js中冒泡的解决方案
               // 阻止事件的传播行为
               e.stopPropagation();
           }
       }
    });
</script>

</body>
</html>

5.3.5 事件修饰符–vue中解决冒泡等问题的方案

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

	**.stop  // 停止触发，阻止冒泡修饰符**

.prevent // 阻止默认事件发生，阻止事件默认行为

	.capture  // 捕获 
	.self  //只点自己身上才运行
	.once  // 只执行一次

在这里插入图片描述
案例1：

<script src="vue-2.6.10.js">
</script>
<div id="app">
    <div style="width: 100px;height: 100px; border: red 1px dashed"
           @mouseover="over()" @mouseout="out()">

        <textarea @mouseover.stop="myover($event)"></textarea>
        
        <form @submit.prevent action="http://www.czxy.com">
            <input type="submit" value="提交">
        </form>
        
         <a href="http://www.baidu.com" @click.prevent="show()">百度</a>
    </div>

</div>
<script>
    var vm = new Vue({
       el:"#app",
       methods:{
           over(){
               console.log("进来了")
           },
           out(){
               console.log("出去了")
           },
           myover(e){
               console.log("进入txt了");
               // js中冒泡的解决方案
               // 阻止事件的传播行为
               //e.stopPropagation();
           },
           show(){
                console.log("a标签的点击事件..")
                // 处理业务逻辑.....
            }
       }
    });

</script>

案例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app">
    <form @submit.prevent action="http://www.czxy.com">
        <input type="submit" value="提交">
    </form>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            name:""
        },
        methods:{
        }
    })
</script>

</body>
</html>

5.3.6 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

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

案例：

<script src="vue-2.6.10.js"></script>

<div id="app">
    <!-- 随意按什么键都显示ascii码 -->
<input type="text" @keydown="show($event)">
    <br>
    <!-- 判断是否是enter键 -->
<input type="text" @keydown.13="show($event)"><br>
    <!-- 判断是否是enter键 -->
<input type="text" @keydown.enter="show($event)">
    </div>

<script>
    var vm = new Vue({
        el:"#app",
        methods:{
            show(e){
                console.log(e.keyCode)
            }
        }
    });
</script>

5.4.v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

5.4.1.遍历数组

语法：v-for=“item in items”

items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

示例：ul显示

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>

</div>
<script src="vue-2.6.10.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           users:[
               {name:"张三",gender:"男",age:21},
               {name:"李四",gender:"男",age:22},
               {name:"王二",gender:"女",age:23},
               {name:"赵六",gender:"男",age:24},
               {name:"孙七",gender:"男",age:25}
           ]
       }
    });
</script>

效果：
在这里插入图片描述
示例：表格显示

html代码：

<table border="1" cellpadding="0" cellspacing="0" width="300" height="200">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr v-for="user in users">
        <td>{{user.name}}</td>
        <td>{{user.gender}}</td>
        <td>{{user.age}}</td>
    </tr>

</table>

效果：
在这里插入图片描述

5.4.2.数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法: v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

示例

    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>

效果：

5.5.v-if和v-show

共同点：都是条件判断

v-if：移除元素

v-show：只是简单的加display:none

5.5.1.基本使用

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

语法：

v-if="布尔表达式"

示例：

<script src="vue-2.6.10.js"></script>
<div id="app">
        <input type="button" @click="show = !show" value="点我切换">
        <h1 v-if="show">
             你好
        </h1>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
        }
    })
</script>

效果：

5.5.2.与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：筛选出所有性别为女的人

<script src="vue-2.6.10.js"></script>
<div id="app">
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender==='女'">
            {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}

        </li>
    </ul>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
           users:[{name:"tom",gender:"男",age:21},
               {name:"meiei",gender:"男",age:21},
               {name:"lily",gender:"女",age:21},
               {name:"jack",gender:"男",age:21},
               {name:"lucy",gender:"女",age:21}
           ]
        },
        methods:{
        }
    })
</script>

5.5.3.v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

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 的元素之后。

5.5.4.v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

示例：

    <div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br/>
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script src="vue-2.6.10.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

在这里插入图片描述

5.6.v-bind

页面的HTML标签有很多属性，如果属性想获取vue中的data的值，怎么处理？

5.6.1.绑定class样式

假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的：

<div class="{{mystyle}}"></div>

因为插值表达式不能用在属性的值中。

案例：

    <script src="vue-2.6.10.js"></script>
<div id="app">
    <span v-bind:class="a">传智大学</span><br>
    <span v-bind:class="b">传智大学</span><br>
    <span :class="c">传智大学</span><br>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            a:"a",
            b:"b",
            c:"c"
        },
        methods:{
        }
    })

</script>
<style>
    .a{
        color: red;
    }
    .b{
        color: yellow;
    } 
    .c{
          color: orchid;
      }
</style>

代码：

<script src="vue-2.6.10.js"></script>
<div id="app">
    <!--
    学习过的指令
    v-on
    v-model
    v-text
    v-html
    v-for
    v-if
    v-show
    v-else
    {{}}
    -->
    <!-- 对于属性的值，插值表达式是无法获取的 -->
    <!--错误的方式：<a href="{{url}}">百度</a><br>-->
    正确的方式：<a v-bind:href="url">百度</a>


    <!-- class是标签的属性，属性如何从vue中获取值呢？ -->
    <div :class="mydiv"></div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            url:"http://www.czxy.com",
            mydiv:"redDiv"
        }

    });
</script>

<style type="text/css">
    .redDiv{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    .greenDiv{
        width: 100px;
        height: 100px;
        border: 1px solid green;
    }
</style>

5.6.2.简写

v-bind:class可以简写为:class

综合案例：下拉列表框改变div样式

<script src="vue-2.6.10.js"></script>
<div id="app">
    <!-- 当下拉列表框改变的时候，div的样式要发生改变
         也就是要将下拉列表框新选中的样式作用div，也就是将值给mydiv
     -->
    <select v-model="mydiv">
        <!-- value是option的HTML属性  v-for是vue指令，两者能直接互相访问吗？答：不可以 -->
        <option v-for="style in myStyles" v-bind:value="style">{{style}}</option>
    </select>

    <!-- class是标签的属性，属性如何从vue中获取值呢？ -->
    <div :class="mydiv"></div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            mydiv:"redDiv",
            myStyles:['redDiv','greenDiv','blackDiv','yellowDiv'],
            mySelectValue:''
        }

    });
</script>

<style type="text/css">
    .redDiv{
        width: 100px;
        height: 100px;
        background: red;
    }
    .greenDiv{
        width: 100px;
        height: 100px;
        background: green;
    }
    .blackDiv{
        width: 100px;
        height: 100px;
        background: black;
    }
    .yellowDiv{
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>

5.7.计算属性–本质是方法，写的时候是方法，用的时候是属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，需要显示在页面，默认的显示方式是：

如果只想显示年月日呢？

<body>
    <script src="vue-2.6.10.js"></script>
<div id="app">
    {{birthday.getFullYear() +"-" + birthday.getMonth() + "-" +birthday.getDate()}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            birthday:new Date()
        },
        methods:{
        }
    })
</script>

虽然能得到结果，但是非常麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

<script src="vue-2.6.10.js"></script>
<div id="app">
        您的生日是： {{birth}}
</div>
<script>
    new Vue({
    el:"#app",
    data:{
        birthday:new Date()
    },
    methods:{

    },
    computed:{
        birth(){
            return this.birthday.getFullYear() +"-" + this.birthday.getMonth() + "-" +this.birthday.getDate();
        }
    }
})
</script>

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

页面使用：

效果：
在这里插入图片描述

6 VueJS ajax

6.1 axios-发送ajax的js技术

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

axios的github:https://github.com/axios/axios

6.2 引入axios

可以用script引入

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

引入axios-0.18.0.js
在这里插入图片描述

6.3 案例

6.3.1 get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
    //200
    console.log(response);
})
.catch(function (error) {
    //500
    console.log(error);
});

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
        ID: 12345
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

6.3.2 post请求

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

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

6.4 代码：

【需求】：创建data/user.json文件----获取所有用户

使用axios读取user.json文件的内容，并在页面上输出内容。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vuejs中axios数据调用</title>
    <script src="vue-2.6.10.js"></script>
    <script src="axios-0.18.0.js"></script>
</head>

<body>
<div id="app">
    {{message}}
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ''
        },
        methods: {
            init: function(){
                axios.get("./data/user.json").then(function(response){
                    // alert(response);
                    alert(JSON.stringify(response))
                    alert(response.data[0].username);
                })
            }
        },
        created: function(){
            this.init();
        }
    });
</script>

</html>

创建data目录，创建user.json

[
  {"username":"张三","age":22},
  {"username":"李四","age":21},
  {"username":"王五","age":20},
  {"username":"赵六","age":23}
]

在这里插入图片描述

7 Vue结构的总结

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            users:[],// 定义数组
            user:{},//定义对象
            username:'',//定义string类型的属性
            num:10// 定义int类型的属性
        },
        methods:{
        },
        created(){
        },
        //计算属性
        computed:{
        }
    })
</script>

BigMoM1573

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_入门实例

文章目录4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子函数4.5.1.生命周期4.5.2.钩子函数4.5.3.this4.5.4 回顾5.指令5.1.插值表达式5.1.1.大括号5.1.2.插值闪烁--问题5.1.3.v-text和v-html5.2.v-model-双向绑定的指令5.2.1 input5.2.2 checkbox5.2.3 radio5.2.4 textarea5.2.5 select--需要结合属性绑定v-bind和循环v-for5.
复制链接

扫一扫