Vue入门

最新推荐文章于 2023-10-16 12:32:14 发布

写写代码AAA

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量172

点赞数

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

本文链接：https://blog.csdn.net/qq_28988969/article/details/103746301

版权

Vue 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

指令简介

v-text：设置标签的内容，无论什么内容，只会被解析成文本，也可以使用差值表达式{{}}
v-html：设置元素的innerHtml，内容中有html结构会被解析成标签
v-cloak：防止页面闪烁
v-on：为元素绑定事件，可以简写为@，事件名不需要写on，语法：v-on:事件名="" 或 @:事件名=""
v-bind：为元素绑定属性，可以简写为：，语法：v-bind:属性名="" 或 :属性名=""
v-show：根据真假切换元素的显示状态，原理是修改元素的display，指令后的内容最终会解析成布尔值
v-if：根据真假切换元素的显示状态，本质是通过操纵dom元素来切换显示状态，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
v-else：必须和v-if一起使用
v-for：根据数据生成列表结构，通常和数组一起使用，语法：（item，index）in 数据
v-model：双向绑定，便捷的设置和获取表单元素的值
v-once：进入页面时，只渲染一次
v-pre：把标签内部的元素原位输出

v-text和v-html

<body>
    <div id="app">
        {{message}}
        <br/>
        <span v-text="message"></span>
        <br/>
        <span v-html="message"></span>
    </div>

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

v-on

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="test" />
        <input type="button" value="v-on简写" @click="test" />
        <input type="button" value="双击事件" @dblclick="test" />
    </div>

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

v-bind

<body>
    <div id="app">
        <img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'" />
        <br />
        <!-- 使用三木运算，控制元素属性 -->
        <img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" />
        <br />
        <!-- 推荐，使用对象的方式，控制元素的属性 -->
        <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" />
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                imgSrc: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577534160577&di=6696354202856f6399bde3297ca85629&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D745008878%2C2424441072%26fm%3D214%26gp%3D0.jpg",
                imgTitle: "vue.js",
                isActive: true
            }
        })
    </script>
</body>

v-show和v-if

<body>
    <div id="app">
        <p v-if="price>30">太贵了</p>
        <p v-show="price>30">太贵了</p>
        <p v-if=isShow>v-if</p>
        <p v-show=isShow>v-show</p>
    </div>

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

v-for

<body>
    <div id="app">
        <ul>
            <li v-for="item in cityArr">
                {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in cityArr">
                {{index+1}} : {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in cityObject.cityArr">
                {{index+1}} : {{item}}
            </li>
        </ul>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                cityArr: ["上海", "杭州", "重庆"],
                cityObject: {
                    cityArr: ["上海", "杭州", "重庆"]
                }
            }
        })
    </script>
</body>

v-model

<body>
    <div id="app">
        <input type="text" v-model="message" :value="message" />
        <p>
            {{message}}
        </p>
    </div>

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

写写代码AAA

关注

0
点赞
踩
0

收藏

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

指令简介v-textv-htmlv-onv-bindv-showv-ifv-forv-modelv-text和v-html<body> <div id="app"> {{message}} <br/> <span v-text="message"></span&gt...
复制链接

扫一扫