实例演示vue常用术语、样式与事件绑定、列表渲染 - 前端学习

Home > List of blog posts > 实例演示vue常用术语、样式与事件绑定、列表渲染

Blogger Information

Blog 30

fans 0

comment 0

visits 13823

Special Recommendation

More>

Related recommendations

静态与动态页面

静态页面:纯静态

<h1>hello world</h1>

动态界面:模板化静态页面:动态数据

模板由2部分构成:

原样显示的字面量,字符串,html标签,样式
插值:一个变量/表达式的占位符

<h1 class="hello">{{message}}</h1>
<script>
// vue
const app = Vue.createApp({
    data() {
        return {
            message: 'Hello 123666',
        };
    },
}).mount('.hello');
</script>

挂载点,vue实例,数据注入,响应式

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

<div class="app">
    <p>用户名: {{ username }}</p>
    <p>会员等级: {{ rank }}</p>
</div>;

vue实例

const app = Vue.createApp(
    // vue实例配置对象,要写到一个{}
    {
        // vue中的变量/数据全部要写到一个data()
        data() {
            // 返回声明在vue实例上的所有变量
            return {
                username: '张老师',
                rank: '高级会员',
            };
        },
    }
).mount('.app');

数据注入

// 数据注入
console.log(app.username);
// 完整注入
console.log(app.$data.username);
// 数据注入就是利用访问器属性的方式进行穿透访问的
const obj = {
    $data: {
        email: '498668472@qq.com',
    },
    // 访问器属性
    get email() {
        return this.$data.email;
    },
};
console.log(obj.email);

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

app.username = '马老师';

v-html,v-text:内容填充

innerHTML -> vue: v-html

textContent -> vue: v-text

<div class="app">
    <!-- <p>用户名: {{username}}</p> -->
    <p>用户名: <span v-text="username"></span></p>
    <!-- 支持html样式 -->
    <p>用户名: <span v-html="username"></span></p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                username: '张老师',
            };
        },
    }).mount('.app');
    app.username = '<i style="color:red">猪老师</i>';
</script>

样式绑定,v-bind:属性

v-bind:属性,属性有:class,style等

<style>
    .active {
        color: cyan;
    }
</style>
<div class="app">
    <!-- 行内 -->
    <p style="color: red">hello world</p>
    <!-- 完整写法 v-bind:属性 -->
    <p v-bind:style="style">Hello php.cn</p>
    <!-- 语法塘进行简化: v-bind:属性  ==> :属性 -->
    <p :style="style">Hello php.cn</p>
    <!-- 多个用对象 -->
   <p :style="{color:mycolor, background: mybackground}">Hello php.cn</p>
    <!-- class: 类样式 -->
    <p class="active">大家晚上好</p>
    <p :class="active">大家吃了吗</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                style: 'color:red',
                mycolor: 'blue',
                mybackground: 'yellow',
                active: 'active',
            };
        },
    }).mount('.app');
</script>

双向数据绑定

绑定方法1:v-on: 事件属性, v-on 可简化 @

<!-- 原本的v-on:input 点击输入框相应事件,简写成: @input -->
<input type="text" @input="comment = $event.target.value">

绑定方法2:用 v-model

<p>
    <input type="text" v-model="comment" :value="comment">
    <span>{{comment}}</span>
</p>
<!-- 延迟响应 .lazy: 失去焦点才响应 :value回显,把数据再回显到输入框中 -->
<p>
    <input type="text" v-model.lazy="comment" :value="comment">
    <span>{{comment}}</span>
</p>
<script>
    const app = Vue.createApp({
        data() {
            return {
                comment: ''
            }
        },
    }).mount('.app')
</script>

事件绑定与修饰符

v-on: @

event: $event

<div class="app">
    <a href="https://www.php.cn/" @click="showUrl($event)">显示网址:</a>
    <span class="url">{{url}}</span>
    <hr />
    <!-- 使用事件修饰符来限定事件行为 prevent禁用默认行为-->
    <a href="https://www.php.cn/" @click.prevent="this.url = $event.target.href;">显示网址:</a>
    <span class="url">{{url}}</span>
    <hr />
    <p onclick="alert('Hello')">
        <!-- .stop: 防止冒泡 -->
        <a href="https://www.php.cn/" @click.prevent.stop="this.url = $event.target.href;">显示网址:</a>
        <span class="url">{{url}}</span>
    </p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                url: null,
            };
        },
        methods: {
            showUrl(ev) {
                // 禁用默认行为(js原生方法)
                ev.preventDefault();
                // 防止冒泡(js原生方法)
                ev.stopPropagation();
                // this: 当前vue实例
                this.url = ev.target.href;
            },
        },
    }).mount('.app');
</script>

列表渲染

v-for语法:<li v-for="(成员,下标) of 数组" :key="下标">{{下标}}=>{{成员}}</li>,标签可换,支持数组和对象

<body>
    <div class="app">
        <ul>
            <!-- v-for -> for-of for (value of arr) {...} -->
            <!-- :key: 必须要添加,diff算法,key必须保证唯一性 -->
            <!-- <li v-for="city of cities">{{city}}</li> -->
            <!-- index唯一 -->
            <li v-for="(city,index) of cities" :key="index">{{index}}=>{{city}}</li>
        </ul>
        <hr />
        <ul>
            <!-- :key来干扰 diff算法 -->
            <li v-for="(item, key) of user" :key="key">{{key}}=>{{item}}</li>
        </ul>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    // array
                    cities: ['合肥', '苏州', '上海'],
                    // obj
                    user: {
                        name: '猪老师',
                        email: 'zls@qq.com',
                    },
                };
            },
        }).mount('.app');
    </script>
</body>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdown简单语法与html标签简介

2022-03-17 17:07:40