vue入门

最新推荐文章于 2023-04-16 18:36:05 发布

Vivian小姐

最新推荐文章于 2023-04-16 18:36:05 发布

阅读量118

点赞数

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

本文链接：https://blog.csdn.net/qq_43819274/article/details/114298569

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

vue基础

vue简介

JavaScript框架
简化dom操作
响应式数据驱动

el：挂载点

el用来设置vue实例挂载（管理）的元素
el命中的元素内部（命中的元素及其内部的后代元素）
建议选择id选择器，也可用class 和元素选择器
双标签都支持，除了html和body

data：数据对象

vue中用到的数据定义在data中
data中可以写复杂类型的数据

本地应用

vue指令

v-text：设置标签内容，会替换全部内容，支持表达式，只能解析文本
v-html：设置元素的innerHTML，可以解析html结构
v-on：为元素绑定事件，可以用@代替
v-show：根据表达式的真假，切换元素的显示和隐藏，修改元素的display属性
v-if：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素），当表达式的值为true时，元素存在于dom树中，为false，从dom树中移除。操纵dom树的性能消耗较大，不宜频繁使用
v-bind：设置元素的属性可以使用**：属性**来实现
v-for：根据数据生成列表结构，经常和数组结合使用
v-model：获取和设置表单元素的值（双向数据绑定）

网络应用

vue+axios ：vue结合网络数据开发应用
axios：网络请求库
在这里插入图片描述
基本使用：

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var get = document.querySelector('.get');
        var post = document.querySelector('.post');
        get.addEventListener('click', function () {
            //get请求 三条数据
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })
        })
        post.addEventListener('click', function () {
            //post请求 注册
            axios.post("https://autumnfish.cn/api/user/reg", { username: "vivianlhm" })
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })
        })

    </script>
</body>

vue+axios：

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJ">
        <p>{{ joke }}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJ: function () {
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function (response) {
                            console.log(response.data);
                            //这里不能直接用this.joke
                            that.joke = response.data;
                        }, function (err) {

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