Vue基础

Vue在HTML中的引入

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

使用Vue渲染数据

Vue可直接渲染定义在data里的数据,渲染动态数据使用“{{}}"包裹

示例代码

<div id="app">
    {{message}}
    <!-- 渲染对象 -->
    <p>{{arr}}</p>
    <!-- 渲染对象中具体的数值 -->
    <p>{{arr.name}}</p>
    <p>{{arr.age}}</p>
    <!-- 渲染数组中具体的数值 -->
    <p>{{obj[2]}}</p>
</div>

在js中挂载Vue实例

• Vue实列的作用范围：vue会管理el选项命中的元素及其后代元素
• 是否可以使用其他选择器 但是建议使用id选择器
• 是否可以设置其他的dom元素 可以使用其他的双标签 不能使用html和body

示例代码

var id = new Vue({
    //el 设置挂载点
    el: '#app',
    //date 数据对象 el实例需要的数据会定义在date中

    data: {
        message: 'hello vue!',
        arr: {
            id: 1,
            name: '张三',
            age: 18
        },
        obj: ['北京', '上海', '昆明', '安宁']
    }
})