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

更多相关文章

1. android通过webservice验证用户
2. Android(安卓)DataBinding介绍
3. android Launcher Demo小结
4. Android(安卓)Service源码分析
5. 演示classList和表单非空验证
6. android通过webservice验证用户
7. android中的Sqlite数据库操作
8. Android：week 13总结 绑定服务、音乐播放器(服务)
9. Android(安卓)studio 032 java Tomcat Servlet 搭建服务器

随机推荐

1. android错误分析集锦
2. Android实现书籍翻页效果--扩展版(转)
3. Android android下的数据持久化和读取数
4. Android(安卓)圆角图片的实现
5. 【原创】Android 4.4前后版本读取图库图
6. Android快速开发架构PlanA（一），船新版本的Ba
7. 系出名门Android(1) - 在 Windows 下搭建
8. Android公共库——图片缓存 网络缓存 下
9. strut2服务器与android交互数据
10. android调用输入软键盘回车键跟删除键