vue常用术语、样式与事件绑定 和 列表渲染实例

一、vue常用术语

    <script src="https://unpkg.com/vue@next"></script>

1.引入vue3 CDN

        <div class="title">{{message}}</div>
        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        message: 'Hello World!'
                    }
                }
            }).mount('.title')
        </script>

2.v-html、v-text

        <div class="app">
            <p>用户名：<span v-text="username"></span></p>
            <p>用户名：<span v-html="username2"></span></p>
        </div>
        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        username: 'Hello php.cn',
                        username2: '<i style="color:red;">Hello php.cn</i>',
                    }
                }
            }).mount('.app')
        </script>

实例图片

二、样式与事件绑定

1.样式绑定

        <style>
            .active{
                color: red;
            }
        </style>
        <div class="app">
            <p>用户名：<span v-text="username"></span></p>
            <p>用户名：<span v-html="username"></span></p>
            <p :class="active">{{username}}</p>
        </div>
        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        username: 'Hello php.cn',
                        active: 'active'
                    }
                }
            }).mount('.app')
        </script>

实例图片

2.事件绑定

<div class="app">
        <p>用户名：<span v-text="username"></span></p>
        <p>用户名：<span v-html="username"></span></p>
        <p :class="active">{{username}}</p>
        <hr>
        <p onclick="alert('Hello')">
            <a href="https://www.php.cn/" @click="showUrl($event)">显示网址: </a>
            <span class="url">{{url}}</span>
        </p>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    username: 'Hello php.cn',
                    active: 'active',
                    url:''
                }
            },
            methods:{
                showUrl(ev){
                    // 禁用默认行为
                    ev.preventDefault();
                    // 防止冒泡
                    ev.stopPropagation();
                    // this: 当前vue实例
                    this.url = ev.target.href;
                }
            }
        }).mount('.app')
    </script>

三、列表渲染

数组的渲染

<div class="app">
        <p>用户名：<span v-text="username"></span></p>
        <p>用户名：<span v-html="username"></span></p>
        <p :class="active">{{username}}</p>
        <hr>
        <p onclick="alert('Hello')">
            <a href="https://www.php.cn/" @click="showUrl($event)">显示网址: </a>
            <span class="url">{{url}}</span>
        </p>
        <hr>
        <li v-for="(city,index) of cities" :key="index">{{index}}=>{{city}}</li>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    username: 'Hello php.cn',
                    active: 'active',
                    url:'',
                    cities:['北京','上海','天津']
                }
            },
            methods:{
                showUrl(ev){
                    // 禁用默认行为
                    ev.preventDefault();
                    // 防止冒泡
                    ev.stopPropagation();
                    // this: 当前vue实例
                    this.url = ev.target.href;
                }
            }
        }).mount('.app')
    </script>

2.对象渲染

<div class="app">
        <p>用户名：<span v-text="username"></span></p>
        <p>用户名：<span v-html="username"></span></p>
        <p :class="active">{{username}}</p>
        <hr>
        <p onclick="alert('Hello')">
            <a href="https://www.php.cn/" @click="showUrl($event)">显示网址: </a>
            <span class="url">{{url}}</span>
        </p>
        <hr>
        <li v-for="(city,index) of cities" :key="index">{{index}}=>{{city}}</li>
        <hr>
        <li v-for="(item,index) of user" :key="index">{{index}}=>{{item}}</li>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    username: 'Hello php.cn',
                    active: 'active',
                    url:'',
                    cities:['北京','上海','天津'],
                    user:{
                        name:'马先生',
                        sex:'男',
                        address:'宁夏石嘴山市'
                    }
                }
            },
            methods:{
                showUrl(ev){
                    // 禁用默认行为
                    ev.preventDefault();
                    // 防止冒泡
                    ev.stopPropagation();
                    // this: 当前vue实例
                    this.url = ev.target.href;
                }
            }
        }).mount('.app')
    </script>

图片实例

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