四时宝库

程序员的知识宝库

快速入门Vue(快速入门奶瓶选购攻略)

刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

先给大家科普一下:

前端JS框架和前端UI框架的区别

前端JS框架:基于js进行一定封装与一些独立设计的框架 比如:jQuery,Vue,React,angular等等

前端UI框架:基于某种js框架进行设计的UI组件库,就是一些写好的UI组件,拿来就能用,不需要自己写css

比如: 基于JQuery的Bootstrap,jQuery Smart UI 等 基于Vue的iView,Element等 基于React的Material-UI,React Desktop等

对于刚接触的Vue框架的我来说,vue最大的特性,莫过于双向绑定了

单向绑定和双向绑定

Model:数据模型 View:视图

单向绑定:把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。因此,我们不需要进行额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。 例如,我们定义好一个JavaScript对象作为Model,并且把这个Model的两个属性绑定到DOM节点上:

双向绑定:把Model绑定到View的同时也将View绑定到Model上,这样就既可以通过更新Model来实现View的自动更新,也可以通过更新View来实现Model数据的更新。

所以,当我们用JavaScript代码更新Model时,View就会自动更新,反之,如果用户更新了View,Model的数据也自动被更新了。

例如当用户填写表单时,View的状态就被更新了,在浏览器中,当用户修改了表单的内容时,我们绑定的Model会自动更新,那就相当于我们把Model和View做了双向绑定:

Vue的基本结构

//这个div在最外层,将其他的div或者其他元素都包起来<div id="app">...</div><script>const app = new Vue({ //找到对应的dom树,将他转成vue对象 el: '#app', //数据属性:存放数据 data: { message: 'Vue的生命周期' }, //方法属性:存放方法 methods:{ test:function(){ console.info("测试方法") } }, //创建完成状态函数: //组件实例创建完成,属性已绑定,但DOM未生成 //常用于数据的初始化操作 created () { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, //DOM渲染完成 //常用于数据的初始化操作,当需要操作DOM时,在此处进行 mounted: function () { console.group('mounted 挂载结束状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 } })</script>

下面写一个使用例子

<!-- 引入 Vue.js --><script src="//vuejs.org/js/vue.min.js"></script><!-- 引入 iView的样式css --><link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"><!-- 引入 iView --><script src="//unpkg.com/iview/dist/iview.min.js"></script><body><div id="app"> <div style="margin:auto;height: 300px;width: 300px"> <b>View</b><i-input v-model="name" ></i-input><i-input v-model="age" ></i-input><i-button @click="test">测试按钮</i-button><p><b>Data</b></p><p>{{name}}</p><p>{{age}}</p> </div></div></body><script> const app = new Vue({ el: '#app', //找到对应的dom树。将他转成vue对象, //数据属性:存放数据 data: { name:"ken", age:"26" }, //方法属性:存放方法 methods: { test:function(){ this.name = "测试按钮-名称" this.age = "测试按钮年龄" } } })</script>

1.data初始化DOM的值 2.使用v-model属性进行数据绑定 3.Dom的值与data的值双向绑定绑定,相互影响

可看下面动图

这里只做了个小演示,我的vue水平也差不多到这了(hahah~) 我这里使用的iview UI框架,也可以尝试其他的UI框架,UI框架都差不多,只是一些样式和组件

就到这了,感兴趣的可以自己动手试试,有js,Jquery基础的上手很快! 我们被培训了半个小时,就开始动手写了

分享给你的朋友!

"波浪分割线"

THANDKS

· End -

一个立志成大腿而每天努力奋斗的年轻人

伴学习伴成长,成长之路你并不孤单!

java从心 扫描二维码,关注公众号

不错吧?必须好看?

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接