其他分享
首页 > 其他分享> > Vue学习笔记(一、基础指令)

Vue学习笔记(一、基础指令)

作者:互联网

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>基本模板指令</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>

    <div id="Test">
        <p>
            Vue 是一套构建用户界面的渐进式框架。
            它的思想在于,数据操作元素,MVVM模式,而传统的模式是需要根据dom中存在的元素,然后通过js方式获取到
            dom对象以便于操作对象的值
        </p>
        <!-- 插值表达式 -->
        {{ msg }}<br>
        <!-- v-model -->
        <input type="text" name="v-model" id="model" v-model="msg" />
        <br>
        <!-- v-on -->
        <button @click="reverseMessage">测试</button>
        <div>
            <ul>
                <!-- v-for -->
                <li v-for="(item,index) in foods">{{ item }}</li>
            </ul>
            <input type="text" v-model="tempFoods" />
            <button @click=addFoods(tempFoods)>添加数据</button>
            <button @click=deteleFoods()>删除数据</button>
        </div>
        <!-- v-bind -->
        <div>
            <p :class="bgcolor">我的背景色将会改变</p>
            <button @click=changeStyle()>改变颜色</button>
        </div>
        <!-- v-show和v-if -->
        <div>
            <p v-show="tShow">我出来了</p>
            <button @click="changeShow()">点击我将会显示或隐藏(show)</button>
        </div>
        <div>
            <p v-if="tIf">我出来了</p>
            <button @click="changetIf()">点击我将会显示或隐藏(if)</button>
        </div>
    </div>



    <!--mount是将指定的组件挂载到Vue应用中 -->

    <!-- createApp是指创建Vue应用 -->

    <!-- this代指被Vue管理的对象 -->

    <!-- 使用v-model实现双向数据绑定 -->

    <!-- 双向数据绑定,指的是可以通过数据改变dom元素的值,也可以通过dom元素输入的值改变数据的值 -->

    <!-- v-for指令用于遍历数据动态的生成dom元素 -->

    <!-- v-if是条件判断的指令,用于控制dom元素是否会显示插入dom对象中,
    v-show有同样的效果,只是v-show使用css属性的display:none来控制的,dom元素始终在dom对象中 -->

    <!-- v-bind是对标签的属性值进行绑定操作 -->
    <script lang="ts">
        const app = {
            data() {
                return {
                    msg: 'Runoob!',
                    foods: ["冬瓜", "西瓜", "甜菜", "空心菜"],
                    tempFoods: '',
                    bgcolor: 'bg',
                    tShow: true,
                    tIf: true
                }
            },
            methods: {
                reverseMessage() {
                    this.msg = "改变值了"

                },
                addFoods(food) {
                    if (food === '') {
                        console.log("不能添加空的数据")
                    } else {

                        this.foods.push(food)
                        console.log("添加成功")
                    }
                },
                deteleFoods() {
                    this.foods.pop()
                },
                changeStyle() {
                    this.bgcolor = 'ba'
                },
                changeShow() {
                    this.tShow = !this.tShow
                    console.log("tshow" + this.tShow)
                },
                changetIf() {
                    this.tIf = !this.tIf
                    console.log("tIf" + this.tIf)

                }
            }
        }
        Vue.createApp(app).mount('#Test')
    </script>
</body>
<style>
    .bg {
        background-color: rgba(10, 124, 245, 0.067);
    }

    .ba {
        background-color: rgb(149, 124, 173);
    }
</style>

</html>

效果如下图:

 

标签:Vue,console,log,food,笔记,tShow,指令,msg,tIf
来源: https://www.cnblogs.com/Crying/p/15259616.html