站内搜索:
首页 >> 前端 >> 内容
html开发Vue基本使用方法(helloworld)

时间:2017/12/4 10:53:47

使用 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)

  • 上一篇:React教程之export和import总结
  • 下一篇:ubuntu中桌面快捷方式.desktop文件的编写方法
  • 返回顶部