vue学习1-15-CSDN博客

本文链接：https://blog.csdn.net/dundundunsis/article/details/135749670

本文详细介绍了如何在Vue中创建Vue实例，包括配置挂载点、提供数据以及使用插值表达式。还讲解了响应式特性和Vue指令的使用，如v-if、v-show、v-on和v-bind，以及一个图片切换的示例应用。

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

vue/创建vue实例p4

核心步骤四步

1.准备容器
2.引包（官网）
开发版本/生产版本。一旦引入vuejs核心包，在全局环境，就有了vue构造函数。

3.创建vue实例
new vue（）

4.指定配置项-渲染数据
（1）el指定挂载点- 通过el配置选择器，指定vue管理的是哪个盒子（2）data提供数据

vue/插值表达式p5

{{}} 插值表达式是一种vue的模板语法

1.作用
可以利用表达式进行插值，渲染到页面中，表达式：是可以被求值的代码，js引擎会将其计算出一个结果。

2.语法：{{ 表达式 }}
3.注意点
（1）使用的数据必须存在（data）
（2)支持的是表达式，而非语句，比如：if for…(禁止！！！)
(3)不能在标签属性中使用{{}}插值（插值是用来展示给用户看的文本）用v-bind

 <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                msg:'hello,world'
            },
        })
    </script>

vue/响应式特性p6

响应式：数据变化，视图自动更新。(但控制台修改数据vscode上不会变化)

data中的数据，最终会被添加到实例上
（1）访问数据：“实例.属性名”
（2）修改数据：“实例.属性名”=“值”

<body>
    <div class="app">
        <div v-html="msg"></div>
    </div>

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

    <script>
        const app = new Vue({
            el: '.app',
            data: {
                msg: `<a href="http://www.baidu.com">
                    sb
                    </a>`,
            },
        })
    </script>
</body>

vue/指令初识和v-html p8

指令：带有v-前缀的特殊标签属性
插值标签并不具有解析标签的能力
指令在v2中-学习-api-指令-从v-html到v-slot都是常用的

vue/v-if和v-show p9

v-show

作用：控制元素显示隐藏
语法：v-show=“表达式” 表达式值true表示，false隐藏
底层原理：切换css的display：none来控制隐藏
场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法：v-if=“表达式” 表达式值true表示，false隐藏
底层原理：根据判断条件控制元素的创建和移除（条件渲染）
场景：直接关掉

</head>
    <style>
        .box{
            border: 5px solid black;
            height: auto;
            width: 200px;
            margin-top: 10px;
        }
    </style>
<body>
    <div id="app">
        <div v-show="flag" class="box">我是v-show控制的盒子口牙</div>
        <div class="box">我是v-if控制的盒子口牙</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                flag:false
            },
        })
    </script>

vue/v-else和v-else-if p10

作用：辅助v-if进行判断渲染
语法：v-else v-else-if=”表达式“
注意：需要紧挨着v-if一起使用

vue/v-on内联语句 p11+p12

p11
1.作用：注册事件=添加监听+提供处理逻辑 2.语法（1）v-on：事件名=“内联语法”

（2）v-on：事件名=“methods中的函数名” 3.简写:@事件名

<body>
    <div class="app">
        <button @click="fn">切换显示隐藏</button>
        <h1 v-show="isshow">hh</h1>
        <div>银行卡余额: {{ const }}元</div>

    </div>

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

    <script>
        const app = new Vue({
            el: '.app',
            data: {
                isshow: true
            },
            methods: {
                fn() {
                    app.isshow=!app.isshow
                }
            }
        })
    </script>
</body>

p12
让提供的所有methods中的函数，this都指向当前实例（就是const后面的那个）

<div class="app">
        <button @click="fn(5)">5</button>
       
        <h1>银行卡余额: {{ money }}元</h1>
    </div>

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

    <script>
        const app = new Vue({
            el: '.app',
            data: {
                money:100
            },
            methods: {
                fn(price) {
                   this.money-=price
                }

            }
        })

vue/v-bind p14

作用：动态的设置html的标签属性——src url title…
语法：v-bind：属性名=“表达式”
简写："v-bind:src"写为“：src”

案例-图片切换p15

<body>
    <div class="app">
        <button v-show:click="h>0" @click="h--">上一项</button>
        <div>
            {{ pic[h] }}
        </div>
        <button v-show:click="h<1" @click="h++">下一项</button>
    </div>

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

    <script>
        const app = new Vue({
            el: '.app',
            data: {
                h:0,
                pic: [
                    'gh',
                    'sd',
                ],
            },
            methods: {
                fn() {

                }

            }
        })
    </script>
</body>