Vue入门基础篇

qq_47123870

已于 2022-05-13 21:21:54 修改

阅读量301

点赞数

分类专栏： vue 文章标签： vue.js 前端

于 2022-05-08 10:20:33 首次发布

本文链接：https://blog.csdn.net/qq_47123870/article/details/124627425

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue入门基础篇

包引入
挂载点
data属性
v开头的一家
axios网络编程

包引入

开发者版本，有提示，学习阶段使用

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

生产者版本，特点小，相当于jquerymini 实际开发时用（地址自己找）

挂载点

el挂载点，选择标签后，被选择的标签，及其后代元素，里面的内容被改变
挂载点不能挂载html和body标签

   var v = new Vue({
        // 挂载点  只能选择一个元素
        el: "div",
        data: {
            message: "你好世界",
            address: {
                where: "中国"
            }
        }
    })

data属性

data属性：
data标签相当于时一个json对象
data里面可以写json对象，数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div>
        <!-- 插值表达式 -->
        {{ message }} {{ address.where }}
    </div>

</body>
<script>
    var v = new Vue({
        // 挂载点  只能选择一个元素
        el: "div",
        data: {
            message: "你好世界",
            address: {
                where: "中国"
            }
        }
    })
</script>

</html>

v开头的一家

v-text

vue指令 v开头的指令

v-text 相当于js中的value

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>
    <div>
        <div v-text="message+'拼接'">不保留</div>
        <div>保留{{ message }}拼接</div>
    </div>

</body>
<script>
    var v = new Vue({
        el: "div",
        data: {
            message: "v-test测试"
        }
    })
</script>

</html>

v-html

v-html 相当于js的innerHTML标签，能解析html

<body>
    <div>
        <div v-html="info"></div>
        <div v-text="info"></div>

        <div v-html="message"></div>
        <div v-text="message"></div>
    </div>
</body>
<script>
    var v = new Vue({
        el: "div",
        data: {
            message: "都一样",
            info: " <a href='#'>不一样</a>"
        }
    })
</script>

v-on

v-on 为元素绑定事件事件方法写到methods中
也可以用@替换v-on: 常用
在方法内部可以通过this关键字访问在data中的数据

<body>
    <div></div>
    <input type="button" value="v-on测试" v-on:click="c">
    <h1 @click="cc">卢本伟说：{{ info }}</h1>
</body>
<script>
    var vue = new Vue({
        el: "input",
        methods: {
            c: function() {
                console.log("你点你了v-on测试");
            }
        }
    })
    var v = new Vue({
        el: "h1",
        data: {
            info: "得得得得得得得"
        },
        methods: {
            cc: function() {
                console.log(this.info);
                this.info += "得得得";
            }
        }
    })
</script>

v-show

v-show 元素的显示和隐藏，实际操作的是display属性

<body>
    <span>
    <div @click="add">+</div>
    <span>{{ num }}</span>
    <div @click="sub">-</div>
    </span>
</body>
<script>
    // 点击事件要能实现，必须是挂载点元素或者其子元素
    var vue = new Vue({
        el: "span",
        data: {
            num: 0
        },
        methods: {
            add: function() {
                console.log(213);
                this.num++;
            },
            sub: function() {
                this.num--;
            }
        }
    })
</script>

v-if

v-if 根据表达式的真假，切换元素的真假，切换元素的显示和隐藏，实际是元素本身是否存在，操作的是dom树，要和v-bind区别开(这里不在演示）

v-bind

v-bind 设置元素的属性（src href）可以简写为:属性

<body>
    <div id="app">
        <a v-bind:href="where" alt="">dian</a>
        <a :href="where" alt="">dian</a>
        <h1 :class="isActive?'active':''">标签</h1>
        <h1 :class="{active:isActive}">标签</h1>

        <button @click="toggleActive">点击改变颜色</button>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            where: "https://www.baidu.com/",
            isActive: true
        },
        methods: {
            toggleActive: function() {
                console.log(this.isActive);
                this.isActive = !this.isActive;
            }
        }
    })
</script>

v-for

v-for 根据数组生成列表结构
语法（item，index）in 数组

<body>
    <ul id="app">
        <button @click="add">add</button>
        <button @click="remove">remove</button>
        <li v-for="(item,index) in array">
            {{ item }}
        </li>
        <li v-for="name in array2">
            {{ name.name }}
        </li>
    </ul>
</body>
<script>
    var u = new Vue({
        el: "#app",
        data: {
            array: ["北京", "上海", "广州"],
            array2: [{
                name: "1"
            }, {
                name: "2"
            }, {
                name: "3"
            }]
        },
        methods: {
            add: function() {
                this.array.push("新乡")
            },
            remove: function() {
                this.array.shift()
            }
        }

    })
</script>

v-on 补充

v-on补充，传递参数和事件修饰符比较常用的就是@keyup.enter=""想找其他的，下面这个网站
更多的事件修饰符看这 ## v-model
v-model 获取和设置表单元素的值
（双向数据绑定）一边改另一边也会跟着改（感觉非常神奇，一个数据改变，不用刷新页面，页面的数据就能改变）

axios网络编程

axios网络编程，他的底层是ajax（要注意，axios和vue整合的时候，axios.get方法里面的this不是外面的this，需要使用外卖呢的this，要声明一个中间变量that，

axios的包要引入
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>



<body>

    <div>
        <input type="text" v-model="num" @keyup.enter="getMeg">回车获取笑话，输入获取笑话的个数
        <ul>
            <li v-for="item in data">{{ item }}</li>
        </ul>
    </div>

</body>
<script>
    var vue = new Vue({
        el: "div",
        data: {
            num: "",
            data: []
        },
        methods: {
            getMeg: function() {
                // console.log(this.num);
                var that = this;
                axios.get("https://autumnfish.cn/api/joke/list?num=" + this.num).then(function(resp) {
                    // that.data = resp.data.data;
                    console.log(resp.data.jokes);
                    that.data = resp.data.jokes;

                })
            }
        }
    })
</script>

只用axios时的格式
axiox的基本使用

qq_47123870

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门基础篇

Vue包引入挂载点，选择标签后，被选择的标签，及其后代元素，里面的内容被改变挂载点不能挂载html和body标签data属性：data标签相当于时一个json对象data里面可以写json对象，数组 v开头的一家 v-text v-html v-on v-show v-if v-bind v-for v-on 补充 axios网络编程
复制链接

扫一扫

专栏目录