演示vue常用术语、演示样式与事件绑定、演示列表渲染 - 第十九期_php

首页 > 博客列表 > 演示vue常用术语、演示样式与事件绑定、演示列表渲染

博主信息

博文 38

粉丝 0

访问量 25759

专题推荐

更多>

挂载点：当前vue实例的作用域

vue实例：利用vue的进行相关工作的一个对象，须挂载到挂载点

数据注入：利用“实例.参数=”直接修改挂载点中数据

响应式： vue实例中的数据，能实时响应外部对数据的更新

v-html: innerHTML

v-text: textContent

样式绑定：v-bind: / :

事件绑定修饰符：v-on: / @

vue中获取$event事件

事件绑定：methods(){}

v-model:事件双向绑定

延迟响应 .lazy :失去焦点才响应，效率比onblur更高

禁用默认行为 .prevent 事件修饰符来限定事件行为

防止冒泡 .stop

列表渲染: v-for

:key 必须要添加,diff算法，key必须保证唯一性

<!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>vue常用术语</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- 1.挂载点：当前vue实例的作用域 -->
    <div class="app">
        <p>{{message}}</p>
    </div>
</body>
<script>
    // 2.vue实例：利用vue的进行相关工作的一个对象，需用mount挂载到挂载点
    const app = Vue.createApp({
        // 3.数据，控制挂载点数据响应的
        data(){
            return{
                message:"hello world!"
            }
        }
    }).mount('.app')
    // 3.1 数据注入：利用访问器属性修改data中的数据
    // 4. 响应式：页面数据会实时更新
    app.message = "hhhhh";
</script>
</html>

<!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>样式与事件绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .bg{
            color:aqua;
        }
    </style>
</head>
<body>
    <div class="app">
        <p><span v-html="message"></span></p>
        <p><span v-text="message"></span></p>
        <p v-bind:style="style">{{Bind}}</p>
        <p :style="style">{{Bind}}</p>
        <p v-bind:class="Class">{{Bind}}</p>
        <p :class="Class">{{Bind}}</p>
        <p>
            <button v-on:click="comment_msg = $event.target">{{comment}}</button>
            <button @click="comment_msg = $event.target">{{comment}}</button>
            <span>{{comment_msg}}</span>
        </p>
        <p>
            <button @click="showmsg($event)">Hello</button>
            <span>{{Msg}}</span>
        </p>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                message:null,
                Bind:"样式绑定",
                style:"color:green",
                Class:"bg",
                comment:"事件绑定",
                comment_msg:"",
                Msg:""
            }
        },
        methods: {
            showmsg(el){
                this.Msg = "Hello Dave";
            }
        },
    }).mount('.app')
    app.message='<em style="color:blue;">Hello World!</em>';
</script>
</html>

<!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>列表渲染</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="app">
        <ul>
            <li v-for="(city, index) of cities" :key="index">{{city}}</li>
        </ul>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                cities:["北京","上海","南京"]
            }
        },
    }).mount(".app");
</script>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

搭建高效的开发环境、markdown语法、与常用HTML术语

2022-03-24 12:50:45

挂载点： 当前vue实例的作用域

vue实例： 利用vue的进行相关工作的一个对象，须挂载到挂载点

数据注入： 利用“实例.参数=”直接修改挂载点中数据

响应式： vue实例中的数据，能实时响应外部对数据的更新

v-html: innerHTML

v-text: textContent

样式绑定：v-bind: / :

事件绑定修饰符：v-on: / @

vue中获取$event事件

事件绑定：methods(){}

v-model:事件双向绑定

延迟响应 .lazy :失去焦点才响应，效率比onblur更高

禁用默认行为 .prevent 事件修饰符来限定事件行为

防止冒泡 .stop

列表渲染: v-for

:key 必须要添加,diff算法，key必须保证唯一性

挂载点：当前vue实例的作用域

vue实例：利用vue的进行相关工作的一个对象，须挂载到挂载点

数据注入：利用“实例.参数=”直接修改挂载点中数据