登录  /  注册
首页 > web前端 > js教程 > 正文

Vue.js数据的双向绑定、常用指令

高洛峰
发布: 2017-01-20 10:01:31
原创
1263人浏览过

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

 效果:

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

1Vue.js数据的双向绑定、常用指令

将input 框里面的值清空时:

Vue.js数据的双向绑定、常用指令

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

Vue.js数据的双向绑定、常用指令

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。并且v-model指令只能用于:

<template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model=&#39;testData.name&#39; 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:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</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根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是