您的位置:时时app平台注册网站 > web前端 > Vue.js第一天学习笔记(数据的双向绑定、常用命

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

2019-10-17 07:29

在意: 变化的有些应用{{}} 和Vue.js的v-text效果等同定义

v-bind指令

v-bind指令能够在其名称后边带二个参数,中间放八个冒号隔绝,那个参数常常是HTML成分的特点(attribute),举例:v-bind:class    v-bind:argument="expression"

本条命令满含二个表达式,表明式的意义是:高亮当前页。

v-on指令:

<script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2018-08-31',
            name: 'lebron',
            address: 'LA'
          }, {
            date: '2018-08-31',
            name: 'wade',
            address: 'Miami'
          }, {
            date: '2018-08-31',
            name: 'paul',
            address: 'Houston'
          }, {
            date: '2018-08-31',
            name: 'anthony',
            address: 'Houston'
          }]
        }
      }
    }
  </script>

MVVM模式

ViewModel是Vue.js的中央,它是一个Vue实例。Vue实例是功力于某二个HTML成分上的,那个元素得以是HTML的body元素,也足以是点名了id的有些成分。

当创制了ViewModel后,双向绑定是怎么着达到的吗?

先是,大家将上海体育场合中的DOM Listeners和Data Bindings看作多少个工具,它们是落实双向绑定的第一。

从View侧看,ViewModel中的DOM Listeners工具会帮大家监测页面上DOM成分的改造,借使有转移,则转移Model中的数据;

从Model侧看,当大家创新Model中的数据时,Data Bindings工具会帮大家立异页面中的DOM成分。

html:

彩世界网址 1彩世界网址 2

Hello World示例

询问一门语言,也许学习一门新技艺,编写Hello World示例是大家的必须要经过的路。

这段代码在画面上输出"Hello World!"。

{{ message }}// 那是大家的Modelvar exampleData = { message:'Hello World!' }// 创造二个 Vue 实例或 "ViewModel"// 它连接 View 与 Modelnew Vue({ el:'#app', data: exampleData })

应用Vue的经过就是概念MVVM各样组成都部队分的历程的历程。

定义View

定义Model

创制贰个Vue实例或"ViewModel",它用来连接View和Model

在创建Vue实例时,要求传入二个挑挑另一半,选项对象能够富含数据、挂载成分、方法、模生命周期钩子等等。

在这里个示例中,选用对象el属性指向View,el: '#app'代表该Vue实例将挂载到

...

其一成分;data属性本着Model,data: exampleData表示大家的Model是exampleData对象。

Vue.js有多样数量绑定的语法,最基础的样式是文本插值,使用一对大括号语法,在运作时{{ message }}会被数据对象的message属性替换,所以页面上会输出"Hello World!"。

Vue.js已经更新到2.0本子了,但出于还不是标准版,本文的代码都以1.0.25本子的。

双向绑定示例

MVVM形式本人是落实了双向绑定的,在Vue.js中得以选择v-model指令在表单成分上成立双向数据绑定。

{{ message }}

将message绑定到文本框,当改变文本框的值时,

{{ message }}

中的内容也会被更新。

Vue.js的常用命令

地点用到的v-model是Vue.js常用的几个下令,那么指令是怎样啊?

Vue.js的通令是以v-早先的,它们成效于HTML成分,指令提供了有个别非正规的风味,将指令绑定在要素上时,指令会为绑定的目的成分加多一些特别的一言一行,我们得以将指令看作特殊的HTML性格(attribute)。

Vue.js提供了一部分常用的放权指令,接下去我们将介绍以下多少个放置指令:

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

Vue.js具有优良的扩展性,我们也足以付出一些自定义的通令,前边的篇章会介绍自定义指令。

彩世界网址 3

<div id="example01">
    <p v-if="male">Male</p>
    <p v-if="female">Female</p>
    <p v-if="age>25">Age:{{age}}</p>
    <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>

v-if指令    

v-if是规范渲染指令,它根据说明式的真真假假来删除和插入成分,它的核心语法如下:

v-if="expression"

expression是贰个赶回bool值的表明式,表达式能够是贰个bool属性,也得以是多个回到bool的运算式。

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

本来了,在动用Vue.js时,你也足以组成其余库一同使用,举例jQuery、JS等等。

v-bind和v-on的缩写

Vue.js为最常用的多个指令v-bind和v-on提供了缩写情势。v-bind指令可以缩写为二个冒号,v-on指令能够缩写为@符号。

 v-for指令:

彩世界网址 4彩世界网址 5

v-for指令

v-for指令基于多个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是叁个数组,item是眼前被遍历的数组成分。

大家在选另一半的data属性中定义了八个people数组,然后在#app成分内使用v-for遍历people数组,输出每种person对象的全名、年龄和性别。

彩世界网址 6

js:

eg:

v-show指令

v-show也是标准渲染指令,和v-if指令差别的是,使用v-show指令的要素始终会被渲染到HTML,它只是轻松地为元素设置CSS的style属性。

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

2.v-if 条件渲染指令,依据其后表明式的bool值进行推断是还是不是渲染该因素;

v-on指令

v-on指令用于给监听DOM事件,它的用语法和v-bind是近似的,举个例子监听成分的点击事件:

有二种情势调用方法:绑定二个主意(让事件指向方法的援引),只怕选择内联语句。

Greet开关将它的单击事件直接绑定到greet()方法,而Hi开关则是调用say()方法。

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

彩世界网址 7双向绑定v-model指令HTML部分

Vue.js是那时很流行的两个JavaScript MVVM库,它是以数据驱动和组件化的思考创设的。比较于Angular.js,Vue.js提供了一发简明、更易于精通的API,使得咱们能够高效地上手并运用Vue.js

v-show指令:

彩世界网址 8彩世界网址 9

v-else指令

能够用v-else指令为v-if或v-show增多三个“else块”。v-else成分必需立刻跟在v-if或v-show成分的末尾——否则它不能够被识别。

v-else元素是不是渲染在HTML中,决计于前面使用的是v-if照旧v-show指令。这段代码中v-if为true,后边的v-else不会渲染到HTML;v-show为tue,可是后边的v-else照旧渲染到HTML了。

彩世界网址 10

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

3.v-show 与v-if类似,只是会渲染其身后表达式为false的成分,並且会给这样的成分加多css代码:style="display:none";

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

评释式渲染第四个实例“helloword”

彩世界网址 11

Vue.js介绍

 js:

eg:

<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">
   姓名变为:{{testData.name}}
  </div>
 </div>
</div>
</template>


<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  }
 }
 }
}
</script>
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
   >
    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>

所谓 指令 ,其实本质正是在模板中出现的特种标记,依据这么些标识让框架知道须求对那边的 DOM 成分举办哪些操作。

5. v-for 渲染循环列表,类似JS的遍历,用法为 v-for="item in items", items是数组,item为数组中的数组成分

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

7.v-on  用于监听钦命成分的DOM事件,比如点击事件。该指令可简写为“@”,以监听点击事件为例

将input 框里面包车型地铁值清空时:

彩世界网址 12彩世界网址 13

常用命令:

var vm= new Vue({
        el:"#example01",
        data:{
            male:true,
            female: false,
            age:29,
            name:'colin'
        }
    })

 js:

大家能够在 Vue.js 的官英特网平素下载 vue.min.js 并用 <script> 标签引进,官方网站链接:,

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello word!'
  }
})
<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  },
  items: [{
  message: '豆豆'
  }, {
  message: '毛毛'
  }],
 }
 }
}
</script>

 

您恐怕感兴趣的篇章:

  • vue.js指令v-model使用方式
  • vue.js指令v-model完成格局
  • 详解Vue.js之视图和数据的双向绑定(v-model)
  • Vue.js每一日必学之数据双向绑定
  • vue.js利用defineProperty达成数据的双向绑定
  • 深刻通晓vue.js双向绑定的落实原理
  • vue.js利用Object.defineProperty达成双向绑定
  • Vue.js双向绑定完毕原理详解
  • 最基础的vue.js双向绑定操作
  • vue.js使用v-model指令达成的数码双向绑定功效示例

v-else指令html部分

js:

彩世界网址 14彩世界网址 15

Vue.js的机件可以知晓为预先定义好了行为的ViewModel类。贰个组件能够预约义相当多取舍,但最基本的是以下几个:

v-if指令html部分

能够用 v-else 指令给 v-if 或 v-show 加多贰个 “else 块”,而且v-else 成分必需马上跟在 v-if 或 v-show 成分的末端——不然它不能够被辨认。

作为二个刚进入职场专门的职业的新娃他爹,对于公司中所用的技艺和框架基本上不懂,只可以从最基础的始发做起,步入公司接触的率先个框架正是前面二个框架Vue.js,多少个作用做下去,认为Vue.js首先学习起来着实极其轻巧,用起来也是极度的有益,通过尽大概轻巧的 API 达成响应的数目绑定和重组的视图组件。它不仅轻松上手,还平价与第三方库或既有品种组成,足以应付任何规模的行使。

v-if依据表明式的值的真假条件渲染元素。在切换时成分及它的多寡绑定 / 组件被消逝天公地道建。若是成分是 <template>,将提议它的开始和结果作为标准块。

 

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

6.v-bind  这几个命令用于响应地立异 HTML 性格,比方绑定某些表格中的数据还是某些class成分或因素的style样式。该指令也能够简写为二个“:”,

彩世界网址 16

<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>

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

本次是对此Vue.js中的最大旨的常用命令张开总括,其实在此以前学习过JS和HTML的意中人,对于这上边的敞亮是那么些快的,只但是是一对写法上边的不等,语法都会是相差无几的。

未有退换 input 框里面包车型地铁值时:

Vue.js安装

v-bind 指令用于响应地换代 HTML 性格 形式如:v-bind:class

彩世界网址 17彩世界网址 18

彩世界网址 19

写在头里

 效果:

<div id="app">
  {{ message }}
</div>

v-else指令:

彩世界网址 20双向绑定v-model指令JS部分

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  }
 }
 }
}
</script>
<script>
    var vm = new Vue({
        el: '#example03',
        data: {
            people: [{
                name: 'lebron',
                age: 33,
                position: 'SF'
            }, {
                name: 'wade',
                age: 34,
                position: 'SG'
            }, {
                name: 'paul',
                age: 32,
                position: 'PG'
            }, {
                name: 'anthony',
                age: 34,
                position: 'SF'
            }]
        }
    })
</script>

html:

eg:

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

<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
            alert('submit!');
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

彩世界网址 21

Vue.js景况详细安装教程可参谋

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

v-for指令html部分

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

v-else指令JS部分

模板(template):模板注解了数额和末段表现给顾客的DOM之间的照射关系。
挂号组件(components):挂号之后就能够在父组件模板中以自定义元素的款型调用三个子零件。
早先数据(data):一个零部件的始发数据状态。对于可复用的组件来讲,那常常是私有的图景。
接受的表面参数(props):组件之间通过参数来张开数据的传递和分享。参数暗中同意是单向绑定(由上至下),但也能够显式地声称为双向绑定。
方法(methods):对数据的改变操作日常都在组件的不二诀要内展开。能够经过v-on指令将客商输入事件和组件方法实行绑定。
生命周期钩子函数(lifecycle hooks):一个零部件会触发两个生命周期钩子函数,比如created,attached,destroyed等等。在此些钩子函数中,大家得以打包一 些自定义的逻辑。和观念的MVC比较,能够领略为 Controller的逻辑被分散到了那几个钩子函数中。
个人资源(assets):Vue.js当上校客商自定义的吩咐、过滤器、组件等统称为能源。由于全局注册能源轻巧导致命名冲突,二个组件可以证明自个儿的私人商品房能源。私有能源独有该器件和它的子组件能够调用。

1.将方面helloword中的div中的内容换做input框的话,可达成双向绑定,input框中的你输入的原委与JS部分中的data中的message绑定

v-if指令:

4.v-else 必需跟在v-if/v-show指令之后,否则不起作用;假使v-if/v-show指令的表明式为true,则else元素不出示;倘使v-if/v-show指令的表明式为false,则else成分呈现在页面上;

<label class="control-label" v-show='labelShowFlag'>喵嘞个咪</label>
<label class="control-label" v-show="testData.name=='张三'" >张三</label>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            age: 21,
            name: 'keepcool',
            sex: 'Male'
        }
    })
</script>

labelShowFlag是二个再次来到bool值的表明式,表明式能够是三个bool属性,也足以是一个回来bool的运算式。

Vue (读音 /vju?/,类似于 view) 是一套用于营造客商界面的渐进式框架。与任何大型框架不一致的是,Vue 被设计为能够自底向上逐层应用。Vue 的大旨库只关切视图层,不止轻便上手,还平价与第三方库或既有品种组成。另一方面,当与今世化的工具链乃至各样扶持类库结合使用时,Vue 也统统可感到复杂性的单页应用提供驱动。

以上就是本文的全体内容,希望对大家的读书抱有利于,也期望大家多多照顾脚本之家。

v-bind指令的html部分

能够选拔 v-for 指令基于一个数组渲染多少个列表。这几个命令使用非常的语法,情势为 item in items,items 是多少数组,item 是时下数组成分的小名:

彩世界网址 22彩世界网址 23

v-bind指令:

v-on指令HTML部分

html:

分页功能中当前页数高亮的魔法,能够动用bind指令,绑定该因素的style样式

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

helloword证明式渲染JS部分

常用命令:

v-bind指令JS部分

html:

彩世界网址 24彩世界网址 25

彩世界网址 26

借使您前面曾经习贯了用jQuery、JS操作DOM,学习Vue.js时请先抛开手动操作DOM的观念,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特种的HTML语法,将DOM和数目绑定起来。一旦你创建了绑定,DOM将和数码保持同步,每当改动了多少,DOM也会相应地换代。

html:

常用命令总计

彩世界网址 27

v-for指令的JS部分

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

helloword评释式渲染html部分

彩世界网址 28彩世界网址 29

<div id="example03">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>position</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.name  }}</td>
            <td>{{ person.age  }}</td>
            <td>{{ person.position}}</td>
        </tr>
        </tbody>
    </table>
</div>

功能:简化字符串的拼接。

v-if指令只渲染他身后说明式为true的要素;在那边引进v-show指令,因为两个的分别是v-show指令会渲染他身后表明式为false的因素,这样的要素上会增添css代码:style="display:none"; 将地点v-if的实例代码改为v-show

那是自家首先次在博客上对此自身的求学成长经历进行记录,先从最轻便易行的局地骨干指令记起,上边开端

eg:

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

v-if指令JS部分

不论学习哪类语言,第一步都会是用“helloword”展开那门语言的大门,Vue.js也是一致,看看是何等在Vue.js中输出“helloword”的。

彩世界网址 30彩世界网址 31

彩世界网址 32彩世界网址 33

期待我们那篇博客中有何错误的地方帮自个儿提议来,一方面临自身自身是一种升高,一方面也不会让错误的位置误导了拜候这篇博客的恋人,多谢!!!

eg:

彩世界网址 34彩世界网址 35

v-on指令JS部分

本文由时时app平台注册网站发布于web前端,转载请注明出处:Vue.js第一天学习笔记(数据的双向绑定、常用命

关键词: