Vue基本使用一-hello world

使用 vue 的基本步骤：

1 引入 vue.js2 创建 Vue 的实例  Vue构造函数的参数是一个对象，对象中包含了很多的配置项

<script src="./vue.js"></script>  <script>    var vm = new Vue({      // el -> element      // el 配置项的值是字符串（选择器）或者DOM对象      // 作用：指定Vue管理的范围，只有在app元素内部的内容才会收到vue管理      el: '#app',      // 数据：相当于 MVVM 中的M数据模型，用来给视图（app）提供数据      data: {        msg: 'Hello world！！！',        user:{name:'小李'}      }    })    // 访问data属性vm.$data.msg === vm.msg    console.log(vm.$data.msg);    console.log(vm.msg);  </script>

数据绑定

• 解释：{{}}从数据对象data中获取数据
• 说明：数据对象的属性值发生了改变，插值处的内容都会更新
• 说明：{{}}中允许使用JavaScript支持的所有表达式（注意，不能出现语句）
• 注意：Mustache 语法不能作用在 HTML 元素的属性上

<div id="app">    <!-- Mustache语法也就是{{}}语法 或者 插值表达式 -->    <h1>{{ msg }}</h1>    <h1>{{ user.name }}</h1>    <h1>{{ user.age }}</h1></div>

注意：
1 需要在视图中使用的数据，必须提前在data中声明
2 只有提前声明好的属性，才具有响应式的效果
user.name 是响应式的数据，因为已经提前在data中声明了
而 user.age 是非响应式的数据，因为没有提前在data中声明

动态添加响应式数据

// 第一个参数表示：要添加属性的对象// 第二个参数表示：属性名称// 第三个参数表示：属性的值Vue.set(vm.user, 'age', 18)