Vue.js第一天学习笔记(数据的双向绑定、常用指令)


Posted in Javascript onDecember 01, 2016

数据的双向绑定(ES6写法)

 效果:

没有改变 input 框里面的值时:

Vue.js第一天学习笔记(数据的双向绑定、常用指令)

将input 框里面的值清空时:

Vue.js第一天学习笔记(数据的双向绑定、常用指令)

重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化.

Vue.js第一天学习笔记(数据的双向绑定、常用指令)

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。并且v-model指令只能用于:<input>、<select>、<textarea>这三种标签。

<template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model='testData.name' class="form-control">
   <span class="control-span">姓名变为:{{testData.name}}</span>
  </div>
 </div>
</div>
</template>


<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  }
 }
 }
}
</script>

Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项,但最核心的是以下几个:

模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
注册组件(components):注册之后即可在父组件模板中以自定义元素的形式调用一个子组件。
初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式地声明为双向绑定。
方法(methods):对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,比如created,attached,destroyed等等。在这些钩子函数中,我们可以封装一 些自定义的逻辑。和传统的MVC相比,可以理解为 Controller的逻辑被分散到了这些钩子函数中。
私有资源(assets):Vue.js当中
将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

常用指令:

所谓 指令 ,其实本质就是在模板中出现的特殊标记,根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。

常用指令:

  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-bind指令
  • v-on指令

v-if指令:

v-if根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>,将提出它的内容作为条件块。

labelShowFlag是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。

Vue.js第一天学习笔记(数据的双向绑定、常用指令)

html:

<label class="control-label" v-if='labelShowFlag'>喵嘞个咪</label>
<label class="control-label" v-if="testData.name=='张三'" >张三</label>

js:

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  }
 }
 }
}
</script>

v-show指令:

v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,v-show 只是简单的切换元素的 CSS 属性 display。

Vue.js第一天学习笔记(数据的双向绑定、常用指令)

Vue.js第一天学习笔记(数据的双向绑定、常用指令)

html:

<label class="control-label" v-show='labelShowFlag'>喵嘞个咪</label>
<label class="control-label" v-show="testData.name=='张三'" >张三</label>

 js:

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  }
 }
 }
}
</script>

v-else指令:

可以用 v-else 指令给 v-if 或 v-show 添加一个 “else 块”,并且v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

<label class="control-label" v-if='labelShowFlag'>喵嘞个咪</label>
<label class="control-label" v-if="testData.name=='张三'" >张三</label>
<label class="control-label" v-else>不是张三</label>

 v-for指令:

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为 item in items,items 是数据数组,item 是当前数组元素的别名:

Vue.js第一天学习笔记(数据的双向绑定、常用指令)

html:

<ul>
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

 js:

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  },
  items: [{
  message: '豆豆'
  }, {
  message: '毛毛'
  }],
 }
 }
}
</script>

v-bind指令:

v-bind 指令用于响应地更新 HTML 特性 形式如:v-bind:class

html:

<label class="control-label" v-bind:class="{'pink-label': labelShowFlag}" >我是粉色的</label>
<label class="control-label">默认</label>

v-on指令:

v-on 指令用于监听DOM事件 形式如:v-on:click  缩写为 @click;

html:

<input type="button" class="form-control btn btn-primary" value="提交" @click='saveFun'>

js:

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 saveFun:function(){
  alert('提交');
 }
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  },
  items: [{
  message: '豆豆'
  }, {
  message: '毛毛'
  }],
 }
 }
}
</script>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
有关Promises异步问题详解
Nov 13 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
JS敏感词过滤代码
Dec 23 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
有趣的bootstrap走动进度条
Dec 01 #Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
jQuery生成假加载动画效果
Dec 01 #Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
You might like
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python操作列表的常用方法分享
2014/02/13 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python计算方程式根的方法
2015/05/07 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
中专自荐信
2013/10/13 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书