核心提示:使用 vue 的基本步骤:1 引入 vue.js2 创建 Vue 的实例Vue构造函数的参数是一个对象,对象中包含了很多的配置项script src='./vue.js'/scriptscriptva...
使用 vue 的基本步骤:
1 引入 vue.js 2 创建 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 元素的属性上
{{ msg }}
{{ user.name }}
{{ user.age }}
注意:
1 需要在视图中使用的数据,必须提前在data中声明
2 只有提前声明好的属性,才具有响应式的效果
user.name 是响应式的数据,因为已经提前在data中声明了
而 user.age 是非响应式的数据,因为没有提前在data中声明
动态添加响应式数据
// 第一个参数表示:要添加属性的对象 // 第二个参数表示:属性名称 // 第三个参数表示:属性的值 Vue.set(vm.user, 'age', 18)