第23章 0115-Vue基础与常用指令介绍，学习心得，笔记（v-text,v-once,v-html，v-bind,v-on, v-model，v-for）

今天所学心得、笔记

1、挂载点，v-text,v-once,v-html，v-bind,v-on的使用

示例截图

示例代码

<body>
<div class="app" onclick="alert(this.tagName)">
    <p>用户名：{{username}}</p>
    <p>100 + 200 = {{100+ 200}}</p>
    <p>{{flag ? '前往取经' : '呆在流沙河'}}</p>3
    <p>-------------------------- v-text,v-once,v-html ----------------------------</p>
    <p v-text="plan1"></p>
    <p v-once="plan1"></p>
    <p v-text="plan2"></p>
    <p v-html="plan2"></p>
    <p>--------------- v-bind,v-on, 绑定style属性, 绑定类class属性 --------------------</p>
    <p v-bind:style="style1">用户名：{{username}}</p>
    <p :style="`color:pink`">用户名：{{username}}</p>
    <p :class="`blue bigger`">计划任务：{{plan1}}</p>
    <p :class="class1">计划任务：{{plan3}}</p>
    <p :class="{blue: isBlue, bigger: isBigger}">计划任务：{{plan1}}</p>
    <p><a href="https://www.php.cn" v-on:click="show"> 显示网站名称 1 (会跳转到网站) </a></p>
    <!-- .prevent, 阻止a标签的默认跳转行为 -->
    <p><a href="https://www.php.cn" @click.prevent="show"> 显示网站名称 2 (不跳转到网站) </a></p>
    <!-- .stop, 阻止冒泡 -->
     <p><a href="#" @click.stop="show">显示网站名称 3 (阻止冒泡)</a></p>
    <!-- .once 仅允许执行一次 -->
     <p><a href="#" @click.once="show">显示网站名称 4 (仅执行一次)</a></p>
</div>
<script src="vue.js"></script>
<script>
    const vm = new Vue({
        // 挂载点
        el: '.app',
        // 数据注入
        data: {
            username: "卷帘大将",
            plan1: '高老庄取媳妇',
            plan2: '大闹盘丝洞',
            plan3: '智取黑风岭',
            flag : true,
            style1: 'color:red',
            class1: 'blue bigger',
            isBlue: true,
            isBigger: false,
            site: 'php中文网',
        },
        methods: {
            show() {
                // this: 就是当前的vue实例对象
                alert(this.site);
            }
        }
    });
    vm.plan2 = '<em style="color:red">大闹盘丝洞</em>';
</script>
</body>

2、v-model， v-for的使用

示例截图

示例代码

<body>
<div class="app">
    <p>---------------------- v-model，双向数据绑定 ----------------------------</p>
    <p>来者何人：{{username}}</p>
    <p>数据类型：{{typeof username}}</p>
    <p>双向数据绑定：<input type="text" v-model="username"></p>
    <!--懒加载-->
    <p>双向数据绑定（懒加载）：<input type="text" v-model.lazy="username"></p>
    <!--转数字类型输出-->
    <p>双向数据绑定（数字类型输出）：<input type="text" v-model.number="username"></p>
    <p>--------------------------- v-for 循环 ----------------------------------</p>
    <!-- key: 可以干预diff算法 -->
    <!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染, 以提升效率 -->
    <!-- key只能是整数或不重复的字符串 -->
    <ul>
        <li v-for="(item, index) in items" :key="index">{{index}}---{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item, prop, index) in user" :key="prop">{{index}}---{{prop}}---{{item}}</li>
    </ul>
    <ul>
        <li v-for="(user, index) in users" :key="user.id">{{user.id}}---{{user.name}}---{{user.email}}</li>
    </ul>
    <span v-for="(n,i) in 10" :key="i">{{i}}--{{n}}<br></span>
</div>
<script src="vue.js"></script>
<script>
    const vm = new Vue({
        // 挂载点
        el: '.app',
        // 数据注入
        data: {
            username: "卷帘大将",
            // 数组
            items: ["合肥", "苏州", "杭州"],
            // 对象
            user: {
                name: "天蓬",
                email: "tp@php.cn",
            },
            //   对象数组, 数据表的查询结果就是一个二个这样的二维的JSON
            users: [
                { id: 1, name: "天蓬", email: "tp@php.cn" },
                { id: 2, name: "灭绝", email: "mj@php.cn" },
                { id: 3, name: "西门", email: "xm@php.cn" },
            ],
        }
    });
</script>
</body>

今天所学心得、笔记

1、挂载点，v-text,v-once,v-html，v-bind,v-on的使用

示例截图

示例代码

2、v-model， v-for的使用

示例截图

示例代码

更多相关文章

随机推荐