最近做一个设备配置的网站,涉及到很多的数据交互,找到一个轻量级的JS框架Vue.js。经过试用,发现使用Vue.js做数据绑定和前端交互很棒。

推荐一下,希望对做前端的朋友有点用或做做参考。


这里一个小例子,用来检测用户输入了多少个字,还可以输入多少个字。

可以在这里测试看效果:http://www.hubwiz.com/class/566e67417e7d40946afc5ddc

(这里教程不全,但你可以看这里:http://wiki.jikexueyuan.com/project/vue-js/render.html,再结合上面工具测试)

JS代码:

window.οnlοad=function(){
  var titleMax=30
  var contentMax=300
//在这里面写Vue.js代码
var vm = new Vue({
  el: '#example',
  data: {
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    title:'',
    content:''
  },
  computed: {
    a: function () {
      return this.title.length
    },
    b: function () {
      return titleMax- this.title.length
    },
    c: function () {
      return this.content.length
    },
    d: function () {
      return contentMax- this.content.length
    }
  },
  methods:{
    onChanged: function(){
      return content.length;
    }
  }
})
}


HTML代码:

<html>
<head>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="example">
【标题】:<input v-model="title" />
<span>(标题已输入{{a}}个字,最多还可以输入{{b}}个字)</span><br>
【内容】:<span>内容已输入{{c}}个字,还可输入{{d}}个字</span><br>
<textarea :on="changed:onChanged" v-model="content"></textarea>
</div>
</body>
</html>


Vue.js 教程在此:http://vuejs.org.cn/guide/


另一个例子:

HTML:

<html>
<head>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="example">
<ul>
  <li v-for="arr in arrs">
    {{ $key }} - {{$index+1}} - {{ arr.item }}
  </li>
  <li v-for="item in items">
    {{ $key }} - {{$index+1}} - {{ item }}
  </li>
</ul>
</div>
</body>
</html>

JS:

window.οnlοad=function(){
 //在这里面写Vue.js代码
var example1 = new Vue({
  el: '#example',
  data: {
    arrs:[
      {item: 'itemOne'},
      {item: 'item2'},
      {item: 'item003'}
    ],
    items:{
      message: 'one',
      numberStr: '2',
      two: 'two'
    }
  }
})
 //----------------
}

展现结果:

  • - 1 - itemOne
  • - 2 - item2
  • - 3 - item003
  • message - 1 - one
  • numberStr - 2 - 2
  • two - 3 - two

Logo

前往低代码交流专区

更多推荐