02 vue框架内部的各种指令和axios操作的代码详解

最新推荐文章于 2023-04-21 17:00:25 发布

归根结底不优秀

最新推荐文章于 2023-04-21 17:00:25 发布

阅读量429

点赞数

分类专栏： Vue框架文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_40923413/article/details/107895230

版权

本文详细介绍了Vue框架中的各种指令，包括v-text、v-html、v-on、v-show、v-if、v-bind、v-for、v-model的使用方法，并提供了可运行的示例代码。同时，讲解了axios在网络请求中的应用及在Vue中使用时的注意事项，包括如何处理this的指向问题。

摘要由CSDN通过智能技术生成

前言

Vue框架数据交互的本质是：dom元素的定位与Vue对象内部el的关联，页面的变量与Vue对象内部data的交互，页面dom的js函数与Vue内部methods的关联

第一个完整的Vue程序

<!DOCTYPE heml>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue基础</title>
    </head>
    <body>
        <div id="app">
            {
   { message }}
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app", 
                data:{
                    message:"Hello Vue"
                }
            })
        </script>
    </body>
</html>

注意：必须进行开发环境版本的声明

el：挂载点和 data：数据对象

el：挂载点是干什么的？就是声明new的Vue实例对象所管理的数据data在HTML页面中的哪一个dom，#代表id属性
data：数据对象，个人理解HTML中使用插值表达式{ {变量名}}，在Vue对象中，就是为变量赋值，然后值就渲染到页面了，可以通过 this在Vue对象的methods中访问到Vue对象中的data数据

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

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app", 
        data:{
            message:"Hello Vue"
        }
    })
</script>

可运行示例代码：

<!DOCTYPE heml>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>data数据对象</title>
    </head>
    <body>
        <div id="app"> <!--div是文本组件-->
            {
   { message }} <!--获取普通数据对象-->

            <h2> {
   { school }} </h2> <!--h2属于标题标签,获取school对象-->
            <h2> {
   { school.name }} {
   { school.mobile }}</h2> <!--获取school对象中的某个属性-->

            <ul> <!--ul标签属于无序列表标签，与li标签搭配使用，可以将多个li标签内容打印成一个列表-->
                <li> {
   { campus }} </li>
            </ul>
            <ul> <!--ul标签属于无序列表标签，与li标签搭配使用，可以将多个li标签内容打印成一个列表-->
                <li> {
   { campus[0] }} </li>
                <li> {
   { campus[1] }} </li>
                <li> {
   { campus[2] }} </li>
            </ul>
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",  //el是选择挂载元素点
                data:{ //data是挂载元素点所需要渲染的内容
                    //不同属性之间需要用逗号隔开
                    message:"你好 小黑！",  //普通数据类型
                    school:{ //对象类型，可以理解为结构体
                        name:"黑马程序员",
                        mobile:"15538779937"
                    },
                    campus:["北京校区","上海校区","深圳校区"] //数组类型
                }
            })
        </script>

    </body>
</html>

v-text指令

v-text指令完成的任务就是将data中值，赋给html页面中挂载点所在的dom元素，有两种表现形式见下

<div id="app">
    <h2 v-text=" message+'!' "></h2> <!--形式1：data中变量的值会完全替换整个标签，不管原本存在什么-->
    <h2>深圳{
   {message + "!"}}</h2> <!--形式2：只会用变量值替换差值表达式，不会影响其他原来设定的值-->
</div>
var app = new Vue({
    el:#app,
    data:{
        message:"黑马程序员"
    }
})

可运行示例代码：

<!DOCTYPE heml>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>v-text指令</title>
    </head>
    <body>
        <div id="app">
            <h2 v-text="  message +'!!!!!' ">这几个字不会显示</h2> <!--空格没有影响-->
            <h2>{
   { message + "!!!!!" }}这几个字会显示</h2>
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"v-text指令"
                }
            })
        </script>
    </body>
</html>

v-html指令

v-html起作用，是在声明变量值是html语句，比如下述的例子，p标签的内容被解析成为一个a标签
<div id="app">
    <p v-html="content"></p>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            content:"<a href='

最低0.47元/天解锁文章

归根结底不优秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02 vue框架内部的各种指令和axios操作的代码详解

第一个完整的Vue程序：<!DOCTYPE heml><html lang='en'> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=".
复制链接

扫一扫