vue常用术语、样式与事件绑定 与 列表渲染学习

一、vue常用术语

（1）引入vue3 CDN

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

（2）vue实例

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

（3）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>

三、列表渲染

（1）数组的渲染

    <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必须保证唯一性