快速入门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从心(javaFollowHeart)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Pyppeteer抓取渲染网页

    GitHub地址是:https://miyakogi.github.io/pyppeteer

    SeanCheney
  • HTTP 实战(三) - HTTP各种特性总览

    8888服务提供的 html,html 文件中又向8887服务发送AJAX请求,这就是跨域了!

    JavaEdge
  • 聊一聊Vue组件模版,你知道它有几种定义方式吗?

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升。

    六小登登
  • Dart 笔记 12 - 异步

    如果将其改变成一个异步函数,返回值将是一个 Future,异步函数要有 async 关键字:

    七适散人
  • Vue实践--引用jq+bootstrap

                $ npm install --save-dev jquery

    问天丶天问
  • 小程序wx.switchTab的跳转传参问题

    这篇文章demo是为了一个粉丝(实力宠粉,手动微笑,哈哈)写的,正好今天周五,时间还是比较多的,不急着回家,因为回家也是玩游戏,留在办公室里面还可以多学习一些知...

    祈澈菇凉
  • React 总结初稿一

    18 年转眼即逝,不同寻常的一样。这一年我毕业了,入坑前端。工作只用 vue ,自己又学了 react , TypeScript ,小程序,这些在工作中从未用到...

    sunseekers
  • RxJava

    我不想说这些乱七八糟的概念了,实际上是我根本说不清,不过观察者模式和回调机制要知道

    spilledyear
  • JavaScript实现input框获取系统默认年月日时分秒

    这是对旧的已上线项目的维护之中优化的一个部分,要求是在input框里面默认当前系统的时间。实现如下图所示的效果。

    祈澈菇凉
  • linux 使用jq对json数据进行操作

    背景: 通过jmeter生成的resultReport报告,在linux上需要获取到报告结果数据。

    小白will

扫码关注云+社区

领取腾讯云代金券