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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
JavaScript Date对象使用总结
May 14 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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中计算程序运行时间的类代码
2012/11/03 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
计算机网络专业推荐信
2013/11/24 职场文书
单位成立周年感言
2014/01/26 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
矿泉水广告词
2014/03/20 职场文书
学习交流会主持词
2014/04/01 职场文书
收款委托书范本
2014/09/11 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
兵马俑的导游词
2015/02/02 职场文书
岳庙导游词
2015/02/04 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang