【Web - 框架 - Vue】随笔 - Vue的简单.com/index.php/tags-193.html" class="superseo">使用(02) - 快速上手

Vue模板代码

代码

    
    Vue模板





    new Vue({
        el: "#box",
        data: {},
        methods: {}
    })

Vue插值语法

代码

    
    Vue插值语法



    
name:{{name}}
    
gender:{{gender}}
    
https://blog.csdn.net/HIGK_365/article/details/9*9:{{https://blog.csdn.net/HIGK_365/article/details/9*9}}


    
name:{{name}}
    
gender:{{gender}}
    
https://blog.csdn.net/HIGK_365/article/details/9*9:{{https://blog.csdn.net/HIGK_365/article/details/9*9}}
（图片来源网络，侵删）



    new Vue({
        el: "#box",
        data: {
            name: 'SUNxRUN',
            gender: 'man'
        },
    })

结果

Vue属性绑定语法

代码

    
    Vue属性绑定语法



    11
    22
    33
    44



    new Vue({
        el: "#box",
        data: {
            href: "https://www.baidu.com/"
        },
        methods: {}
    })

结果

Vue事件绑定语法

代码

    
    Vue模板



    点我-01
    点我-02



    new Vue({
        el: "#box",
        data: {},
        methods: {
            show() {
                alert('啊啊啊啊')
            },
            talk: function () {
                alert('呀呀呀呀')
            }
        }
    })

结果

Vue事件参数

代码

    
    Vue事件参数



    衣
    食
    住
    行
    
以上选项哪个最重要：{{focus}}



    new Vue({
        el: "#box",
        data: {
            focus: '??'
        },
        methods: {
            choose(e) {
                var c = e.target.innerHTML
                this.focus = c
            }
        }
    })

结果

Vue事件传参

代码

    
    Vue事件传参



    add



    new Vue({
        el: "#box",
        methods: {
            add(x, y) {
                alert(x + y)
            }
        }
    })

结果

Vue事件传参的混合模式

代码

    
    Vue事件传参的混合模式



    add



    new Vue({
        el: "#box",
        methods: {
            add(y, e) {
                alert(y - -e.target.dataset.x)
            }
        }
    })

结果

Vue显示与隐藏

代码

    
    Vue显示与隐藏



    显示
    隐藏
    
x:{{x}}
    
Hello Vue!



    new Vue({
        el: "#box",
        data: {
            x: false
        },
        methods: {}
    })

结果

Vue’v-html’和’v-text’

代码

    
    Vue'html'与'text'



    

    




    new Vue({
        el: "#box",
        data: {
            msg: '
Hello Vue!
'
        },
        methods: {}
    })

结果

Vue’v-once’

代码

    
    Vue'v-once'



    +1
    
num:{{num}}
    
num:{{num}}



    new Vue({
        el: "#box",
        data: {
            num: 10
        },
        methods: {}
    })

结果

Vue’v-if’

代码

    
    Vue'v-if'



    
Hello
    
World!
    
Vue!
    

    {{num}}
    
奇数
    
偶数
    
打分:{{score}}
    +10
    
删掉
    
良好
    
优秀
    
超限



    new Vue({
        el: "#box",
        data: {
            num: 1,
            score: 0
        },
        methods: {}
    })

结果

Vue’v-for’

代码

    
    vue'v-for'



    {{n}}
    
{{s}}
    
{{w.title}}




    new Vue({
        el: "#box",
        data: {
            names: ['关羽', '张飞', '刘备'],
            skills: ['html', 'css', 'javascript'],
            webs: [
                {title: '百度', href: 'https://www.baidu.com/'},
                {title: '斗鱼', href: 'https://www.douyu.com/'},
            ]
        },
        methods: {}
    })

结果

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。