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 获取图片尺寸及放大图片
Sep 04 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
JS中substring与substr的用法
Nov 16 Javascript
jQuery实现验证码功能
Mar 17 Javascript
package.json文件配置详解
Jun 15 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php防盗链的常用方法小结
2010/07/02 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
js图片处理示例代码
2014/05/12 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python实现简单成绩录入系统
2019/09/19 Python
python基于property()函数定义属性
2020/01/22 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
建筑学推荐信
2013/11/03 职场文书
高中同学会活动方案
2014/08/14 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
员工加薪申请报告
2015/05/15 职场文书
推广普通话的宣传语
2015/07/13 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python