Vuejs demo

最新推荐文章于 2024-04-20 09:35:24 发布

骙骁

最新推荐文章于 2024-04-20 09:35:24 发布

阅读量2.6k

点赞数

分类专栏： js框架学习文章标签： Vuejs Vuejs demo 学习Vuejs Vuejs入门

本文链接：https://blog.csdn.net/n602655099/article/details/49132317

版权

js框架学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

骙骁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs demo

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

扫一扫