Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架,Vue.js 更容易上手。

刚做了一个小的demo,作为自己的“helloworld” 代码,

     首先,自己需要去官网下载安装:http://cn.vuejs.org/guide/installation.html (支持node,bower)

然后,我们需要知道,Vue不依赖于其他的脚本,所以只需要在header里直接引入<script src="dist/vue.js"></script>,值得注意的是,这里要引入的必须是dist目录下的vue,我刚开始的时候引入的是src下面的vue,结果没有解析出来。

接着我们就可以把官网上的例子直接拷贝到body下:

<body>
<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done ? 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>
最后是我们的js部分,我们需要书写我们的js代码

<script>
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn Vue.js'
      }
    ]
  }
})
</script>
很容易我们就能看出这是一样点击切换样式的一个demo,接下来让我们测试一下我们的demo是否正常运行吧。

     

Logo

前往低代码交流专区

更多推荐