tnblog
首页
登录

03--VueJs 的简单的介绍和基本的代码

442人阅读 2019/10/17 11:32 总访问:11521 评论:0 手机 收藏
分类: Vue课程笔记

Vue.js(官网地址:https://cn.vuejs.org/index.html)

  • Vue.js 是目前最火的一个前端框架,除了开发网站,还可以开发手机App,但是需要借助于Weex

  • Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!

  • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)


    前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;

      在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了程序员的双手,可以更多的时间去关注业务逻辑


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1.引入Vue的包 -->
    <script src="../lib/VueJs/vue-2.4.0.js"></script>
</head>

<body>
    <!-- 将来 实例化(new) Vue 的时候,会控制这个元素中的所有的内容的 -->
    <!-- Vue 实例控制的元素的区域,就是我们 MVVM 中的 Vive 视图层 V -->
    <div id="app">
        <!-- 插值表达式 在 Vue 比较常见 -->
        <p>{{ message }}</p>
    </div>
    <script>
        // 2.创建一个 Vue 的实例
        // 当我们导入包之后,在浏览器的内存中就多了一个 Vue 的构造函数
        // 注意: 我们new出来的 vm 的对象,就是我们 MVVM 的 VM调度者
        var vm = new Vue({
            el: '#app', // 表示,当我们 new 这个 Vue 实例,要控制页面上的那个区域
            // 这里的data 就是 MVVM 中的 M ,专门用来保存 每个页面上的数据
            data: { // data 属性中存放的的是 el 中需要用到的数据
                message: '你好,欢迎学习VueJs' //通过 Vue 提供的指令,
                //很方便的就将数据渲染到页面的上面,程序员就无须操作 DOM 元素
                //[前端的 Vue 之类的框架,不提倡我们去操作DOM元素]
            }
        });
    </script>
</body>

</html>


评价
大概你身上总有我喜欢的味道,所以我一见你就开心的笑
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET
技术交流:群号677373950
欢迎加群交流技术