Vue.js基础知识小结


Posted in Javascript onJanuary 13, 2017

数据绑定

1.单向绑定

<div id="app">
  {{massage}}
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}

2.双向绑定

<div id="app">
 <p>{{message}}</p>
<input v-model="message" />
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}

3.v-for列表渲染

<div id="app">
    <ul>
      <li v-for="todo in todos">
       {{ todo.text }}
      </li>
    </ul>
</div>
new Vue({
   el:"#app",
   data:{
      todos:[
       {text:"abcdef"},
       {text:"123456"},
       {text:"qwerta"}
    ]  }
})

3.处理用户输入

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
   el: "#app",
   data:{
    message:"Hello Vue.js!"  
   },
   methods:{
    reverseMessage:function()
    {
      this .message = this.message.split('').revserse().join('');
    }
  }
})

4.综合

<div id="app">
 <input v-model="newTodo" v-on:keyup.enter="addTodo" />
 <ul>
 <li v-for = "todo in todos">
  <span>{{ todo.text }}</span>
  <button v-on:click="removeTodo($index)">X</button>
 </li>
 </ul>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
 new Vue({
 el:"#app",
 data:{
  newTodo:"",
  todos:[
  {
   text:'Add some todos 1'
  },
  {
   text:'Add some todos 2'
  },{
   text:'Add some todos 3'
  }
  ]
 },
 methods:{
  addTodo: function(){
  //去除首尾的空格
  var text = this.newTodo.trim();
  //去除后非空的话
  if(text){
   this.todos.push({ text: text })
   this.newTodo = ''
  }
  },
  removeTodo: function(index){
  this.todos.splice( index, 1 )
  }
 }
 })
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
canvas实现流星雨的背景效果
Jan 13 #Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 #Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 #Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 #Javascript
bootstrap网格系统使用方法解析
Jan 13 #Javascript
js 判断数据类型的几种方法
Jan 13 #Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 #Javascript
You might like
php仿discuz分页效果代码
2008/10/02 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
在视频前插入广告
2006/11/20 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
Javascript 高阶函数使用介绍
2015/06/15 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
vue实现文字加密功能
2019/09/27 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python 初始化多维数组代码
2008/09/06 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
跟单文员岗位职责
2014/01/03 职场文书
银行类自荐信
2014/02/04 职场文书
学生会主席竞聘书
2014/03/31 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
伏羲庙导游词
2015/02/09 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
基层党建工作简报
2015/07/21 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
Redis过期数据是否会被立马删除
2022/07/23 Redis