Vue个人学习

理想二旬
123 阅读4分钟

一、Vue基础

1、第一个Vue程序

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>indexVue</title>
</head>
<body>

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


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue-->
<!--开始使用vue框架-->
<script>
    //注意下面这个Vue的V要大写，小写不行
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

效果：

image.png

注意的点：

  1. el表达式的作用范围：
  • 可以在el命中范围的内部，内部任意一层，但是外面不行，比如：
{{message}}//这里不行
<div id="app">
    {{message}}//可以
    <span>{{message}}</span>//可以
    <p>
        <div>{{message}}</div>//可以
    </p>
</div>
  1. 只能支持双标签，不支持持单标签，因为单标签内部不能写东西。
  2. Vue不能挂载到<body> <html>这种标签上。推荐挂载的标签为<div>，因为这个标签没有样式，p等其他标签有自己的样式
  3. 选择器的使用建议使用id选择器 小结：
  • 导入开发版本的Vue.js
  • 创建Vue实例对象，设置el属性和data属性
    1. el属性这里就类似于选择器。id、class、标签选择器都可以。
  • 使用简洁的模板语法把数据渲染到页面上，这里就是那个大括号

2、data数据对象

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>data数据对象</title>
</head>
<!--入门案例-->
<body>
<div id="app">
    {{ message }}
    <h2>{{ school.name }} {{ school.address }}</h2>
    <ul>
        <li>{{ school.major[0] }}</li>
        <li>{{ school.major[1] }}</li>
    </ul>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue-->
<!--开始使用vue框架-->
<script>
    //注意下面这个Vue的V要大写，小写不行
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            school: {
                name:"南阳理工学院",
                address:"南阳市宛城区",
                major:["js","cs","bs"]
            }
        }
    })
</script>
</body>
</html>

小结：

  1. Vue中用到的数据定义在data中
  2. data中可以写复杂类型的数据
  3. 渲染复杂类型数据时，遵守js的语法即可

二、Vue本地应用

1. Vue指令

  1. 内容绑定
    v-text、v-html（基础）、v-on

  2. 事件绑定

    v-show、v-if、v-bind

  3. 列表循环，表单元素绑定

    v-for、 v-on（补充）、 v- model

1.v-text

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>v-text指令</title>
</head>
<body>
<div id="app">
<!--    可以写表达式比如下面的 + ,进行拼接-->
<!--    这种是默认写法进行全部替换-->
    <h2 v-text="message + 'a'">哈哈</h2>
<!--    这种是插值表达式写法进行部分替换-->
    <h3>{{ message + 'a' }} 哈哈</h3>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue-->
<!--开始使用vue框架-->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"庆哥是个谨慎的人"
        }
    })
</script>
</body>
</html>

效果：

image.png

小结：

  • v-text指令的作用是设置标签的内容
  • 默认写法会替换全部内容，使用插值表达式写法{{}}可以替换指定内容。
  • 内部支持写表达式

2.v-html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
<div id="app">
<!--v-text and v-html ：如果只是普通文本那么二者没有区别。
但是v-html的中是可以进行html元素的编码的.
-->
    <h2 v-text="message"></h2>
    <h2 v-text="url"></h2>
    <h2 v-html="message"></h2>
    <h2 v-html="url"></h2>


</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue-->
<!--开始使用vue框架-->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"庆哥是个谨慎的人",
            url:"<a href = 'www.baidu.com'>百度<a/>"
        }
    })
</script>
</body>
</html>

image.png

小结：

  1. v-html指令的作用是：设置元素的innerHTML
  2. 内容中有html结构会被解析为标签
  3. v-text指令无论内容是什么，只会解析为文本
  4. 解析文本使用v-text，需要解析HTML结构使用v-html

3.v-on(基础)

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
<div id="app">
    <input type="button" value="v-on指令" v-on:click="study">
    <input type="button" value="用@" @click="study"><!--@和v-on:是一样的-->
    <h1 @click="changeFood"> {{ food }}</h1>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue-->
<!--开始使用vue框架-->
<script>
    var app = new Vue({
        el: '#app',
        data:{
          food:"老坛酸菜牛肉面",
        },
        //data要放在methods上面
        methods: {
            //这个名字不要起do,应该是个关键字，这里study换成do上面input标签会有问题
            study: function (){
                alert("干啥啥不行，扯淡第一名！")
            },
            changeFood: function () {
                console.log(this.food)//在浏览器控制台打印
                this.food += "，酸菜使用脚做的！"
            }
        }
    })
</script>
</body>
</html>

image.png

小结：

  1. v-on指令的作用是：为元素绑定事件
  2. 事件名不需要写on
  3. 指令可以简写为@，@不用带:
  4. 绑定的方法定义在methods属性中
  5. 方法内部通过this关键字可以访问定义在data中的数据

4.计数器案例

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>计算器小案例</title>
</head>
<body>
<div id="app">
    <button @click="sub">
        -
    </button>
    <span>{{ num }}</span>
    <button @click="add">
        +
    </button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue-->
<script>
    var app = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            add: function () {
                // alert("aaaa")
                if (this.num < 10) {
                    this.num += 1;
                } else {
                    alert("最大了，不能再点了！")
                }
            },
            sub: function () {
                if (this.num > 0) {
                    this.num -= 1;
                } else {
                    alert("最小了，不能再点了！")

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

逻辑写在Vue中。

小结：

  1. 创建Vue示例时：el（挂载点），data（数据），methods（方法，别少了最后的s）
  2. v-on指令的作用是绑定事件，简写为@
  3. 方法中通过this关键字获取data中的数据
  4. v-text指令的作用是：设置元素的文本值，简写为{{}}
  5. v-html指令的作用是：设置元素的innerHTML

5.v-show

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
</head>
<body>
<div id="app">

    <img src="images.jpg" v-show="isShow">
    <br>
    <input type="button" value="显示图片" v-on:click="display">
    <input type="button" value="隐藏图片" @click="hiding">
    <h1 v-show="false">aaaa</h1>

</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: true,
        },
        methods: {
            display: function () {
                this.isShow = true
            },
            hiding: function () {
                this.isShow = false
            }
        }
    })
</script>
</body>
</html>

小结：

  1. v-show指令的作用是：根据真假切换元素的显示状态
  2. 原理是修改元素的display，实现显示隐藏
  3. 指令后面的内容，最终都会解析为布尔值
  4. 值为true元素显示，值为false元素隐藏
  5. 数据改变之后对应的显示状态会同步更新

6.v-if

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>

<div id="vue">
    <p v-if="isShow">vue</p>
    <p v-show="isShow">vue v-show</p>
    <input type="button" value="转化显示状态" @click="display">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: '#vue',
        data:{
            isShow:true
        },
        methods:{
          display:function () {
                this.isShow = !this.isShow
          }
        }

    });
</script>

</body>
</html>

image.png

小结：

  1. v-if的作用的根据表达式的真假切换元素的显示状态，这一点和v-show很像
  2. 本质是通过操纵dom元素来切换显示状态
  3. 表达式的值为true，元素存在dom树种，为false，从dom书中移除
  4. 频繁的切换v-show,反之使用v-if，前者的切换消耗小

7.v-bind

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .active{
            border: 2px solid blue;
        }
    </style>
</head>
<body>
<div id="app">

    <img v-bind:src="imgSrc" alt="">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle + 'eee'"
    :class="{active:isActive}" @click="toggleActive"><!--v-bind的简写-->


</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            imgSrc:"images.jpg",
            imgTitle:"hello world!",
            isActive:false
        },
        methods:{
            toggleActive:function () {
                this.isActive = !this.isActive
            }
        }

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

小结：

  1. v-bind指令的作用是：为元素绑定属性
  2. 完整的写法：v-bind:属性名。简写:属性省略了v-bind
  3. 需要动态的增删class建议使用对象的方式

8.v-on

v-on详情请看这里

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>v-on补充</title>
</head>
<body>
<div id="app">
    <input type="button" value="点击" @click="doIt(666,888)">
    <!-- 下面这一句，当按下enter键时会触发v-on绑定的sayHi函数 -->
    <input type="text" @keyup.enter="sayHi"> 
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        methods:{
            doIt:function(p1,p2){
                console.log("做it");
                console.log(p1);
                console.log(p2);
            },
            
            sayHi:function(){
                alert("吃了没！")
            }


        }

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

9.v-for

详细看这里

小结：

  1. v-for指令的作用是：根据数据生成列表结构
  2. 数组经常和v-for结合使用
  3. 语法是（item,index） in items （items是一个数组，item是每次遍历出来的一个数据，index是索引）
  4. item 和 index 可以结合其他指令一起使用

10.v-model

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>

<body>
    <div id="app">


        <p>为什么说v-model是双向绑定呢？因为改变输入框里的message，Vue对象中的message也会改变</p>
        <input type="text" v-model="message" v-on:keyup.enter="getM">
        <h2>这里是Vue对象中的message实时显示:{{message}}</h2>
        <p>改变Vue对象中的message输入框里的message也会改变</p>
        <input type="button" value="修改Vue里面的message" v-on:click="">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',

            data: {
                message: "123456789"
            },
        
 
 
        methods: {

                getM: function () {
                    alert(this.message)
                },
                setMessage:function(){
                    this.message = "新的值"
                }

            }

        });
    </script>
</body>

</html>

小结：

  1. v-model指令的作用是便捷的设置和获取表单元素的值
  2. 绑定的数据会和表单元素值相关联，也就是双向绑定

三、网络请求

axios基本使用

认识axios：
axios和ajax的区别：

  1. axios是一个基于Promise的HTTP库，而ajax是对原生XHR (xmlHttpRequest)的封装；
  2. ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。

使用：

使用时加上 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

关于axios的详细内容点击这里

比较简单，使用之间看下面和Vue连用的例子。

axios 加 vue的小案例

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <!-- 官网提供的axios的在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        /**
         * 接口:随机获取一条笑话
         * 请求地址：https://autumnfish.cn/api/joke
         * 请求方法: get
         * 请求参数: 无
         * 响应内容：随机笑话
         */

        var vue = new Vue({
            el: '#app',

            data: {
                joke: "很好笑的笑话"
            },
            methods: {

                getJoke:function(){
                    console.log(this.joke)
                    var this_ = this
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(
                        function(response){
                        console.log(response.data)
                        // console.log(this.joke),这个this会变，
                        //第二次用this就获取不到joke的信息了，这里要用一个新的变量存储这个this
                        //之后才能在此获取到joke
                        this_.joke=response.data
                        //console.log(this_.joke)//这样就可以
                    },
                        function(err){
                    }     
                }
            }
        });
    </script>
</body>
</html>

image.png

avatar
文章
阅读
粉丝