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 相关文章推荐
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
javascript检测两个数组是否相似
May 19 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 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有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
Python实现多线程抓取妹子图
2015/08/08 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
python实现扫雷游戏的示例
2020/10/20 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
文明学生事迹材料
2014/01/29 职场文书
洗车工岗位职责
2014/03/15 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python