二、创建一个Vue实例

创建和使用Vue实例,分为4部:

第1步 创建语法

<script>
      let vm = new Vue({});
</script>

释:给Vue( )传了一个参数选项,是一个空对象;

第2步 设置数据

 let vm = new Vue({
     //实例vm的数据
   data:{
     name: "hiddensmile",
     sex : "女"
     }
  });

释:参数对象不再是一个空对象,它包含一个属性:data,而data的值也是一个对象,这个对象就是我们给实例vm设置的数据了。比如:name为hiddensmile,sex为女等等。

第3步 挂载元素(怎么把数据展示在视图上呢? 通过挂载元素)

视图view部分:
<div id="app"></div>
视图(html部分)上我们有一个id为“app”的div元素。
let vm=new Vue({
   //挂载元素
   el:'#app',
   //实例vm的数据
   data:{
      name:"hiddensmile",
      sex:"女"
    }
 })

释:不但有属性“data”,还多了个属性:“el”,el参数提供一个在页面上已经存在的DOM元素,作为vm的挂载目标。表示vm和id为“app”的DOM节点就关联起来了;

第4步 渲染(把vm的数据绑定到指定的视图上)

<div id="app">
   我是{{ name }},
   是{{sex}}性
</div>

释:需要用一个双大括号:{{ }} 即可,{{ name }} 和 {{ sex}} 就是我们给实例vm设置的数据name和sex,我们用{{ }}可以直接读取到它们的值;


数据渲染成功

总结一下:创建并使用一个Vue实例并不难,仅需4步走:

创建Vue实例步骤
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,245评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,108评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 时光告诉我们,再也回不到过去。
    慧慧D_D阅读 129评论 0 1
  • HSL是一种非常直观的色彩表示方法。ACR以及Lightroom中的HSL调整面板,更是我们后期调色的神器。 本文...
    Airphoto阅读 886评论 1 7