Vue_0.1 基础插值使用

Vue_0.1 基础插值使用

<!DOCTYPE html>
<html lang="zh.CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue的起步和插值</title>
    </head>
    <body>
        <!-- 07 基础使用 -->
        <div id='app'>
            <h2>{{msg}}</h2>
            <h3>{{2}}</h3>
            <h4>{{msg2}}</h4>
            <h4>{{txt}}</h4>
            <h4>{{msg3}}</h4>
            <h1>{{getContent()}}</h1>
        </div>
        <!-- 01 引入Vue -->
        <script src="../Vue基础/vue.js"></script>
        <script>
            // 02 Vue对象实例化
            const vm = new Vue({
                // 03 绑定html
                el:'#app',
                // 04 数据
                data:{
                    msg:'hello vue',
                    txt:'hello, world',
                    msg2:'content',
                    msg3:'<p>插值语法</p>'
                },
                // 05 方法
                methods:{
                    getContent(){
                        return this.msg + ' ' + this.msg2;
                    }
                }
            });
            // 06 基础调试
            console.log(vm.msg);
        </script>
    </body>
</html>

版权声明:除特别注明外,本站所有文章均为王晨曦个人站点原创

转载请注明:出处来自王晨曦个人站点 » Vue_0.1 基础插值使用

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 王晨曦 说道:

    注意事项: {{ 表达式 }} 对象 (不不要连续3个{{ {name:'jack'} }}) 字符串串 {{ 'xxx' }} 判断后的布尔值 {{ true }} 三元表达式 {{ true?'是正确':'错误' }} 可以用用于⻚页面面中简单粗暴暴的调试 要用用插值表达式 必须要data中声明该属性