Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)

2024-09-29 17:32:39

Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编写的，所以和前者的语法特别相似，却又使用简洁了很多。

那今天，我就给大家详细的说道说道这个 Vue.js ，以下是我们这次详解的目录，朋友们可以根据自己的情况选择性阅读，所有操作均附有代码实现。

1. Vue.js 如何绑定到页面中，使用他的功能。

2. Vue 实例化对象的生命周期。

3. Vue 的所有数据绑定指令

那接下来，我们就开始今天的介绍啦！

1. Vue.js 如何绑定到页面中，使用他的功能。

先看下面的一段代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <button id="app1" onclick="app1.func()">我是app1，点我</button>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",
  data:{
  message:"我在app1中显示出来了吗？",
  func:function(){
   alert(this.message);
  }
  }
 });
 console.log(app1.$data.message); 

 //这个要知道哈，app1就是一个变量，一个对象类型的变量，链式语法直接用即可

 </script>
</html>

效果如下：

上述代码就是点击按钮有弹窗，下面解析一下这段代码。

var app1= new Vue({
 el:"#app1",
 data:{
 message:"我在app1中显示出来了吗？",
 func:function(){
  alert(this.message);
  }
 }
 });
console.log(app1.$data.message);

通过Vue.js的构造函数实例化出一个根实例 app1 ，说白了，这就是我们面向对象的对象的实例化，直接 new 一个对象。

　　el:"#app1", 这是在挂载我们实例化对象的元素节点，就是这个app1 对象作用域是那一个标签里面的。这里可以是 id、class、tagname。但是主要还是用id，因为他的唯一性。

　　data:{} 是定义这个对象的变量和方法，注意所有在和 app1 有关联的变量、方法都必须在data中声明。

注意：

(1)作用域。js5 只有函数作用域，所以 data 中的函数如果想调用变量，就必须通过 this. 调用，或者直接通过对象名调用。

(2)外部调用。app1.$data.message；在js中直接调用 vue 对象的属性、方法时，需要链式语法，一层层点出来，这里用 $data ，主要还是和js的变量作区别

(3)与HTML代码的绑定。这里我是通过 js 的onclick直接绑定的，当然 vue 有自己的事件绑定，这里暂且不讲，如果用 js 的行内绑定，注意需要带对象名。这就是纯 OOP思想了。相信大家对面向对象也不陌生，如果真的不知道是啥玩意的，赶紧百度学去。

以上就是最最最最最最.....基础的使用 vue 的方法了。

2. Vue 实例化对象的生命周期。

接下来，我们说一下，一个实例化出来的对象，他的生命周期是啥样的，要经历那些阶段。请看下面一段代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>

 <div id="container">我的声明周期，大家看吧！</div>

 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">

 //以下代码时显示vm整个生命周期的流程
 var vm = new Vue({
  el: "#container",
  data: {
  test : 'hello world'
  },
  beforeCreate: function(){
  console.log(this);
  showData('创建vue实例前',this);
  },
  created: function(){
  showData('创建vue实例后',this);
  },
  beforeMount:function(){
  showData('挂载到dom前',this);
  },
  mounted: function(){
  showData('挂载到dom后',this);
  },
  beforeUpdate:function(){
  showData('数据变化更新前',this);
  },
  updated:function(){
  showData('数据变化更新后',this);
  },
  beforeDestroy:function(){
  vm.test ="3333";
  showData('vue实例销毁前',this);
  },
  destroyed:function(){
  showData('vue实例销毁后',this);
  }

 });
 function realDom(){
  console.log('真实dom结构：' + document.getElementById('container').innerHTML);
 }
 function showData(process,obj){
  console.log(process);
  console.log('data 数据：' + obj.test)
  console.log('挂载的对象：')
  console.log(obj.$el)
  realDom();
  console.log('------------------')
  console.log('------------------')
 }

 </script>
</html>

那接下来看看效果图：

通过控制台的打印效果可以看出来，实例化 vue 对象大致分为创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。　　

3. Vue 的所有数据绑定指令

　　那现在我们就总结一下 vue 的最大亮点，各种灵活的数据绑定方法。这里主要列举实例详解 {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。

（1）首先是 {{}} 、 v-once 、 v-html 的用法，请看下面的代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数据绑定篇</title>
 </head>
 <body>
 <!--
  数据绑定篇
 -->
 <div id="app1">
<!--1. {{}} v-once v-html-->
  <!--Mustache 标签，也就是双大括号,刷新页面时会显示出双大括号-->
  <button onclick="app1.func()">点我，改变变量message的值</button>
  <br /><br />
  <!--即时绑定，div的内容随变量变化而变化的，绑定内容作纯文本处理-->
  <!--双大括号里边也可以写表达式，和AngularJs一样的-->
  <div>{{message}}</div><br />
  <!--只绑定一次，整个div的所有绑定数据，都只会加载一次，再更新就不会变了-->
  <div v-once>{{message}}</div><br />
  <!--双大括号只能当纯文本显示，v-html 可以直接绑定HTML标签的-->
  <div v-html="h1"></div><br />
 </div>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",  //我们实例化的 app1 的挂载的 元素节点，一般用 id，class，或者tagname也可以，但是多了会冲突
  data:{
  message:"我是变量message的内容！",
  h1:"<h1 style='color: fuchsia;'>我是h1标签</h1>", //注意单引号
  //message改变函数
  func:function(){
   if (this.message == "我是变量message的内容！") {
   this.message = "message的内容改变了！";
   }else{
   this.message = "我是变量message的内容！";
   }
  }

 </script>
</html>

然后看一下效果：

还是分析一下这个小demo。

　　<div>{{message}}</div> Mustache 标签，也就是双大括号,他和 AnjularJs 的双大括号完全相同，就是直接将数据动态绑定到标签中，当变量发生变化的时候，标签内容也是改变，上大括号里面也是可以写表达式的。上述代码是做了一个在button中点击改变变量message的值，然后通过数据绑定使div的text即时变化。

　　<div v-once>{{message}}</div> 他也是数据绑定，但是只绑定一次。要注意 v-once是加载div上的，所以整个div的所有绑定数据，都只会加载一次，再更新就不会变了，所以点击 button时，第二个div的数据并没有发生改变。

　　<div v-html="h1"></div> 是绑定HTML标签，注意他可以直接绑定 HTML模板，但是这一堆HTML标签不能是多层嵌套的。什么意思呢，就是你之间绑定一段标签可以，绑定一个模板也可以，但是如果绑定一个模板，那这个模板内部不能再嵌套模板了。否则无法渲染的。上述代码就是直接导入了一个加了行内样式的h1标签，功能十分强大，比直接操作dom节点强太多了，效率是几何倍的增长。

（2）其次是 v-bind

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数据绑定篇</title>
 <style type="text/css">
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 </style>
 </head>
 <body>
 <!--
  数据绑定篇
 -->
 <div id="app1">
<!--2. v-bind-->
  <!--v-bind 他是专门用来绑定属性的 ，主要用来操作元素的 class 列表和它的内联样式-->
  <!--这个和用 js 直接操作dom节点功能一样，不过简单特别多-->
  <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div>
  <!--还可以直接绑定更改 class-->
  <div v-bind:class="myClass" onclick="app1.func2()"></div>
  -------------------------------------------------------------------------------------
  <div class="img" style="width: 100px;height: 100px;">
  <img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/>
  </div>

 </div>

 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",
  data:{
  myColor:"blue",
  myWidth:100,
  myHeight:100,
  myClass:"aaa",
  mySrc:"img/2.png",
  func1:function(){
   if (this.myColor == "blue") {
   this.myColor = "red";
   this.myWidth = 50,
   this.myHeight = 50
   }else{
   this.myColor = "blue";
   this.myWidth = 100,
   this.myHeight = 100
   }
  },
  func2:function(){
   if (this.myClass == "aaa") {
   this.myClass = "bbb";
   }else{
   this.myClass = "aaa";
   }
  },
  func3:function(){
   if (this.mySrc == "img/2.png") {
   this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg";
   }else{
   this.mySrc = "img/2.png";
   }
  }
  }
 });

 </script>
</html>

然后看一下效果：

那我们解析一下上面的代码。

　　v-bind 他是专门用来绑定属性的，主要用来操作元素的 class 列表和它的内联样式。这一点和AnjularJs的 ng-bind 是完全不同的，要注意！！！

　　<div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div> 这是在直接绑定行内样式style。然后通过绑定点击函数，为各个比那两赋值，达到点击更改div样式的目的。

　　<div v-bind:class="myClass" onclick="app1.func2()"></div> 这个是直接绑定修改 class类名，在页内样式表中有我定义的 .aaa 和 .bbb 两个类名，通过动态修改class名修改样式，这也比 JQuery 直接操作dom节点快捷不少。

　　<img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/> 这是直接绑定属性，动态修改 img 的src 属性。达到点击图像显示不同的图像的效果。

这里要特别强调一下，v-bind 直接绑定的是属性，而不是样式，对于 img ，他的src是属性，但是对于 div ，width 啥的是样式，不是属性，所以 v-bind:width="100+'px'" 不好使.

　　至于 v-bind 属性绑定，也就常用用法也就这么多了。

（3） v-model

　　用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

下面我们看一段代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数据绑定篇</title>
 <style type="text/css">
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 </style>
 </head>
 <body>
 <!--
  数据绑定篇
 -->
 <div id="app1">
<!--3. v-model-->
  <input type="text" v-model="myText" placeholder="请输入："/>
  <div >{{ myText }}</div><br /><br />
  -------------------------------------------------------------------------------------
  <!--绑定单选按钮-->
  <input type="radio" id="one" name="aa" value="男" v-model="picked">
  <label for="one">男</label>
  <br>
  <input type="radio" id="two" name="aa" value="女" v-model="picked">
  <label for="two">女</label>
  <br>
  <span>您选择了: {{ picked }}</span>
  <br><br>
  -------------------------------------------------------------------------------------
  <!--绑定复选按钮-->
  <div onclick="app1.funcCheckedNames()">
  <input type="checkbox" id="jack" value="好帅！" v-model="checkedNames">
  <label for="jack">好帅！</label>
  <input type="checkbox" id="john" value="你是我的男神！" v-model="checkedNames">
  <label for="john">你是我的男神！</label>
  <input type="checkbox" id="mike" value="我爱你，飞哥！" v-model="checkedNames">
  <label for="mike">我爱你，飞哥！</label>
  </div>
  <br>
  <span>您对飞哥的评价: {{ names }}</span><br><br>
  --------------------------------------------------------------------------
  <!--绑定单选列表--><br>
  <select v-model="selected1">
  <option>亲飞哥</option>
  <option>向飞哥表白</option>
  <option>请飞哥吃饭</option>
  </select><br>
  <span>真心话大冒险: {{ selected1 }}</span><br><br>
  ------------------------------------------------------------------------------

  <div onclick="app1.funcselected22()">
  <select v-model="selected2" multiple>
   <option>亲亲</option>
   <option>抱抱</option>
   <option>举高高</option>
  </select>
  </div><br>
  <span>你想和飞哥偷偷干些啥: {{ selected22 }}</span><br>

 </div>

 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",
  data:{
  myText:"",
  picked:"",
  selected1:"",
  //这是复选列表的变量，函数
  selected2:[],
  selected22:"",
  funcselected22:function(){
   this.selected22 = this.selected2.join("　");
  },
  //复选框的函数,及其相关变量
  checkedNames:[],
  names:"",
  funcCheckedNames:function(){
   this.names = this.checkedNames.join("　");
  }
 </script>
</html>

然后看一下效果：

然后解析一下这段代码。这里就不一一详细解释代码了，挑几个典型的详解，其他的便很简单了。

我们就以多选按钮为例：　　

<div onclick="app1.funcCheckedNames()">
 <input type="checkbox" id="jack" value="好帅！" v-model="checkedNames">
 <label for="jack">好帅！</label>
 <input type="checkbox" id="john" value="你是我的男神！" v-model="checkedNames">
 <label for="john">你是我的男神！</label>
 <input type="checkbox" id="mike" value="我爱你，飞哥！" v-model="checkedNames">
 <label for="mike">我爱你，飞哥！</label>
 </div>

//这是复选列表的变量，函数
 selected2:[],
 selected22:"",
 funcselected22:function(){
 this.selected22 = this.selected2.join("　");
 },

这里要强调一下，v-model 动态绑定这种多选框之类的，会以数组的形式存取，所以，我们用 selected2:[], 变量接收选择框的数据，但是我们又不能直接用双大括号显示数据，朋友们可以试验一下，双大括号是纯文本显示，他会把整个数组的中括号，引号，逗号都显示出来，太丑了。所以这里，我用了JQuery的数组分割为字符串的函数 join("　")，把选中的数据分割成字符串，再用一个字符串类型的变量接收数据，这样打印出来就好多了。注意，这里 join("　") 我用的分隔符是空白字符，它占一个汉字的空间，但是不会显示出来。

　　好啦，以上这些就是Vue.js 的基础内容，至于后续的各种渲染，以及组件 API等等，等我们下周再分享。如果感觉我的博客还不错请记得关注我，之前的博客也有精品吆！

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

Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body>  <div id="app"> <input type="radio" valu
vue element动态渲染、移除表单并添加验证的实现

又接到新需求了吧~~ 背景在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内容的表单例如: "工作经历"可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除问题在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值动态新增的表单如何验证动态表单怎么填写对应的 prop ... 好吧,我当时也
vue实现动态表单动态渲染组件的方式(2)

本文实例为大家分享了vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下思路先把所有可能出现的表单/组件写在主页面每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配根据后端返回的数据,动态生成一个slot列表,slot的name属性要与数据的类型匹配,此列表放入一个子组件在主页面引入子组件,把之前主页面写好的各个表单/组件放入子组件标签中,通过匹配slot插槽去渲染组件,没有匹配到插槽的则不会渲染案例 //主页面 <template> <el-
vue实现动态表单动态渲染组件的方式(1)

vue 实现动态表单/动态渲染组件的方式(一),供大家参考,具体内容如下思路先写好各个可能会出现的表单或者自定义的组件,引入. 此时后端可能会给到一个对象型数组,每个对象有要渲染组件的一个类型标识利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件在利用组件的数据通信去收集各个子组件的数据实现demo 三个表单组件,用了element-ui 此处用了自定义组件的v-model来收集子组件的数据 //InputComponent.vue 要渲染的子组件 <
Vue+ElementUI实现表单动态渲染、可视化配置的方法

动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "
Vue数据驱动表单渲染,轻松搞定form表单

form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github| 文档 form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素.目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发.使用 form-creae 可快速.便捷的生成日常开发中所需的各种表单. 下面向大家介绍一下 form-create 使用方法和生成
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
Vue.js自定义指令的用法与实例解析

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义
Vue.js常用指令的使用小结

1.数据渲染:v-text.v-html.{{}} 1.1 v-text 详细:更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. 实例: <div id="app"> <p v-text="message"></p> </div> <script> new Vue({ el:'#app', data: { message:'Hel
vue.js中指令Directives详解

想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令
Vue.js快速入门实例教程

什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <
Vue.js对象转换实例

废话不多说了,直接给大家贴代码了.具体代码如下所示: var app = new Vue({ el: "#app", data: { login: { name: "", psd: "" } }, methods: { submit: function() { //转换成自己想要的对象 var obj = JSON.stringify(this.login); console.log(obj); axios.post("/login&q
基于require.js的使用(实例讲解)

本篇文章总结下require.js使用方法. 1.为什么使用require.js? 使用之前,我的页面的js是这样的 <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script>
js链表操作(实例讲解)

如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function Node(v){ this.value=v; this.next=null; } function ArrayList(){ this.head=new Node(
js图片放大镜实例讲解(必看篇)

1.图片放大镜的思路: 当打开页面时只有图片首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片. 然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片最后当鼠标移开后,小的观察框和放大的图片都会消失. 2.有了基本思路就看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)

相关推荐

随机推荐