Vue实例是作用于某一个HTML元素上的,没有改变

作者: 前端  发布:2019-11-22

写在前面

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js

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

作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的非常简单,用起来也是非常的方便,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合,足以应付任何规模的应用。

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元素。

 效果:

如果你之前已经习惯了用jQuery、JS操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

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具有良好的扩展性,我们也可以开发一些自定义的指令,后面的文章会介绍自定义指令。

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

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery、JS等等。

v-if指令    

v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if="expression"

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

9159.com 1

这是我第一次在博客上对于自己的学习成长经历进行记录,先从最简单的一些基本指令记起,下面开始

v-show指令

v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。

将input 框里面的值清空时:

Vue.js介绍

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了。

9159.com 2

9159.com 3

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

v-for指令

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

v-for="item in items"

items是一个数组,item是当前被遍历的数组元素。

我们在选项对象的data属性中定义了一个people数组,然后在#app元素内使用v-for遍历people数组,输出每个person对象的姓名、年龄和性别。

9159.com 4

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

Vue.js安装

v-bind指令

v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class    v-bind:argument="expression"

这个指令包含一个表达式,表达式的含义是:高亮当前页。

9159.com 5

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入,官网链接:,

v-on指令

v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听元素的点击事件:

有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。

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

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

Vue.js环境详细安装教程可参考

v-bind和v-on的缩写

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。

<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>

声明式渲染第一个实例“helloword”

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

无论学习哪一种语言,第一步都会是用“helloword”打开这门语言的大门,Vue.js也是一样,看看是如何在Vue.js中输出“helloword”的。

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

9159.com 69159.com 7

常用指令:

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

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

helloword声明式渲染html部分

常用指令:

9159.com 89159.com 9

  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-bind指令
  • v-on指令
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello word!'
  }
})

v-if指令:

helloword声明式渲染JS部分

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

作用:简化字符串的拼接。

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

注意: 变化的部分使用{{}} 和Vue.js的v-text效果一样定义

9159.com 10

 

html:

常用指令总结

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

1.将上面helloword中的div中的内容换做input框的话,可实现双向绑定,input框中的你输入的内容与JS部分中的data中的message绑定

js:

eg:

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

9159.com 11双向绑定v-model指令HTML部分

v-show指令:

9159.com 12双向绑定v-model指令JS部分

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

2.v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;

9159.com 13

eg:

9159.com 14

9159.com 159159.com 16

html:

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

v-if指令html部分

 js:

9159.com 179159.com 18

<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  labelShowFlag:true,
  testData:{
  id:'1',
  name:'张三',
  age:'18'
  }
 }
 }
}
</script>
var vm= new Vue({
        el:"#example01",
        data:{
            male:true,
            female: false,
            age:29,
            name:'colin'
        }
    })

v-else指令:

v-if指令JS部分

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

v-if指令只渲染他身后表达式为true的元素;在这里引入v-show指令,因为二者的区别是v-show指令会渲染他身后表达式为false的元素,这样的元素上会添加css代码:style="display:none"; 将上面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>

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

 v-for指令:

4.v-else 必须跟在v-if/v-show指令之后,不然不起作用;如果v-if/v-show指令的表达式为true,则else元素不显示;如果v-if/v-show指令的表达式为false,则else元素显示在页面上;

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

eg:

9159.com 19

9159.com 209159.com 21

html:

<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>
<ul>
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

v-else指令html部分

 js:

9159.com 229159.com 23

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

v-bind指令:

v-else指令JS部分

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

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

html:

9159.com 249159.com 25

<label class="control-label" v-bind:class="{'pink-label': labelShowFlag}" >我是粉色的</label>
<label class="control-label">默认</label>
<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-on指令:

v-for指令html部分

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

9159.com 269159.com 27

html:

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

v-for指令的JS部分

js:

6.v-bind  这个指令用于响应地更新 HTML 特性,比如绑定某个表格中的数据或者某个class元素或元素的style样式。该指令也可以简写为一个“:”,

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

eg:

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

9159.com 289159.com 29

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

<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>

您可能感兴趣的文章:

  • 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-bind指令的html部分

9159.com 309159.com 31

<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>

v-bind指令JS部分

分页功能中当前页数高亮的效果,可以使用bind指令,绑定该元素的style样式

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

eg:

9159.com 329159.com 33

<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>

v-on指令HTML部分

9159.com 349159.com 35

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

v-on指令JS部分

这次是对于Vue.js中的最基本的常用指令进行总结,其实之前学习过JS和HTML的朋友,对于这方面的理解是非常快的,只不过是一些写法上面的不同,语法都会是大同小异的。

希望大家这篇博客中有什么错误的地方帮我指出来,一方面对我自己是一种进步,一方面也不会让错误的地方误导了看到这篇博客的朋友,谢谢!!!

 

本文由9159.com发布于前端,转载请注明出处:Vue实例是作用于某一个HTML元素上的,没有改变

关键词: