Vuejs demo

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

骙骁

2712人浏览 · 2015-10-14 22:35:26

骙骁 · 2015-10-14 22:35:26 发布

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是否正常运行吧。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^