Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多。
那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现。
1. Vue.js 如何绑定到页面中,使用他的功能。
2. Vue 实例化对象的生命周期。
3. Vue 的 所有 数据绑定指令
那接下来,我们就开始今天的介绍啦!
1. Vue.js 如何绑定到页面中,使用他的功能。
先看下面的一段代码:
rush:xhtml;">
<
Meta charset="UTF-8">
效果如下:
上述代码就是点击按钮有弹窗,下面解析一下这段代码。
rush:js;">
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 实例化对象的生命周期。
接下来,我们说一下,一个实例化出来的对象,他的生命周期是啥样的,要经历那些阶段。请看下面一段代码:
rush:xhtml;">
<
Meta charset="UTF-8">
<div id="container">我的声明周期,大家看吧!
rush:xhtml;">
<
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
你想和飞哥偷偷干些啥: {{ selected22 }}
这里要强调一下,v-model 动态绑定这种多选框之类的,会以数组的形式存取,所以,我们用 selected2:[],变量接收 选择框 的数据,但是我们又不能直接用双大括号显示数据,朋友们可以试验一下,双大括号是纯文本显示,他会把整个数组的中括号,引号,逗号都显示出来,太丑了。所以这里,我用了JQuery的数组分割为字符串的函数 join(" "),把选中的数据分割成字符串,再用一个字符串类型的变量接收数据,这样打印出来就好多了。注意,这里 join(" ") 我用的分隔符是 空白字符,它占一个汉字的空间,但是不会显示出来。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。