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

前端之家收集整理的这篇文章主要介绍了Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

那接下来,我们就开始今天的介绍啦!

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

先看下面的一段代码

<Meta charset="UTF-8">

效果如下:

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

显示出来了吗?",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 实例化对象的生命周期。

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

<Meta charset="UTF-8">

<div id="container">我的声明周期,大家看吧!

那接下来看看效果图:

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

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

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

(1)首先是 {{}} 、 v-once 、 v-html 的用法,请看下面的代码

<Meta charset="UTF-8"> 数据绑定篇

然后看一下效果

还是分析一下这个小demo。

  

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

  

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

  

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

(2) 其次是 v-bind

<Meta charset="UTF-8"> 数据绑定篇
{{ myText }}


------------------------------------------------------------------------------------- dio" id="one" name="aa" value="男" v-model="picked">

你想和飞哥偷偷干些啥: {{ selected22 }}

然后看一下效果

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

我们就以 多选按钮为例:  

Box" id="jack" value="好帅!" v-model="checkedNames">
函数 selected2:[],funcselected22:function(){ this.selected22 = this.selected2.join(" "); },

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

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

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

猜你在找的Vue相关文章