【Vue】入门概述

概述

官网:https://cn.vuejs.org/

mark

第一个Vue程序

引入Js

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

渲染数据

数据渲染不支持单标签htmlbody标签

<div id="app">
    {{ message }}
    <p> {{ date }}</p>
</div>

Vue 数据渲染支持同步刷新

渲染数据data对象,支持选择的标签后代标签

<script>
    var vue = new Vue({
        el:"#app", // 挂载点 选择器都支持(建议使用 ID选择器 )
        data:{
            message: "Hello Bigdataboy",
            date: "2020.9.27 5.20"
        }
    })
</script>

data 对象 渲染复杂类型数据

<body>
    <div id="app">
        {{ message }}
        <h2>{{ infor.name }}</h2>
        <ul>
            <li>{{ advantage[0] }}</li>
            <li>{{ advantage[1] }}</li>
            <li>{{ advantage[2] }}</li>
        </ul>
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message: "Hello Bigdataboy", // 普通类型
            infor:{ // Json 对象
                name:"bigdataboy",
                age:"18"
            },
            advantage:["帅气","幽默","有内涵"] // 数组
        }
    })
</script>

mark

发表评论 / Comment

用心评论~