/**
    vue
        作者：尤雨溪
        类型：MVVM      准确的来说是MV框架
    为什么要学习vue
        1.传统的项目是通过操作dom元素来修改数据的
        2.传统的项目代码分工不明确
        3.传统的项目代码过于累赘
        ......
    MVVM：
        m:model层   数据的增删盖茶
        v:view视图层    类似于HTML的页面模板
        vm:viewModel映射层  model层于view之间的映射层
    vue的特点：
        数据驱动视图
        vue底层原理: Object.definproperty   数据劫持
        vue3.0中    底层原理使用的是 new proxy
        官方对vue的简介
                渐进式的JavaScript框架
    jq项目： 
        1.链式操作dom
        2.抹平了各个浏览器之间的差异
    回流和重绘：
        回流：
        如果对当前元素进行了增删改等操作当前元素又影响了整个布局流那么这个
        过程必定会造成页面的重新绘制这样的过程就是回流
        重绘：
        当改变一个元素的样式(颜色)当前元素不会影响布局流的时候这个过程就叫
        做重绘
    回流必定会发生重绘    重绘不一定会发生回流
    
*/
 
<!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>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{message}}</h2>
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script>
        let vm=new Vue({
            //挂载点   vue只会对当前挂载点下面的元素起作用而对挂载点之外的元素不起作用的
            //值为挂载点的id    底层是通过document。querySeletor来实现的
            el:"#app",
            //data：当前vue管辖范围内所需要用的一些使用
            //当组件所需要的一些状态
            // 如果需要使用的时候则直接调用属性名即可
            data:{
                message:"王文杰"
            }
        })
    </script>
</body>
</html>

初识 vue------简单介绍的更多相关文章

  1. vue简单介绍

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  2. vue 之 介绍及简单使用

    浏览目录 vue的介绍 vue的使用 vue的介绍 简介 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底 ...

  3. 总结Vue第一天：简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  4. 初识Hadoop入门介绍

    初识hadoop入门介绍 Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴定Hadoop不适用我们的项目,但是我会继续研究下去,技多不压身. < ...

  5. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  6. 【浅墨著作】《OpenCV3编程入门》内容简单介绍&amp;勘误&amp;配套源码下载

    经过近一年的沉淀和总结,<OpenCV3编程入门>一书最终和大家见面了. 近期有为数不少的小伙伴们发邮件给浅墨建议最好在博客里面贴出这本书的文件夹,方便大家更好的了解这本书的内容.事实上近 ...

  7. WPF自学入门（六）WPF带标题的内容控件简单介绍

    在WPF自学入门(二)WPF-XAML布局控件的文章中分别介绍StackPanel,WarpPanel,DockPanel,Grid,Canvas五种布局容器的使用,可以让我们大致了解容器可以使用在什 ...

  8. vue（2）—— vue简单语法运用，常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  9. 1-1 Vue的介绍

    简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...

  10. dubbo学习过程、使用经验分享及实现原理简单介绍

    一.前言 部门去年年中开始各种改造,第一步是模块服务化,这边初选dubbo试用在一些非重要模块上,慢慢引入到一些稍微重要的功能上,半年时间,学习过程及线上使用遇到的些问题在此总结下. 整理这篇文章差不 ...

随机推荐

  1. vs2017+opencv配置参考链接

    本人通过以下几篇博客完成vs2017+opencv3.4.1的配置: OpenCV 3.4.1 + VS2017 开发环境搭建 - 简书 WIN10下 VS2017+OpenCv 3.4.1 配置 - ...

  2. UTC ISO 8601

    如果时间在零时区,并恰好与协调世界时相同,那么(不加空格地)在时间最后加一个大写字母Z.Z是相对协调世界时时间0偏移的代号.如下午2点30分5秒表示为14:30:05Z或143005Z:只表示小时和分 ...

  3. 如何使用git send-email发送补丁?

    答: git send-email <patch-name> --to <username>@<example>.com --cc <username> ...

  4. C# WinForm设置窗口无边框、窗口可移动、窗口显示在屏幕中央、控件去边框

    1)窗口去除边框 在组件属性中FormBorderStyle设为None 2)窗口随着鼠标移动而动 添加引用using System.Runtime.InteropServices; 在初始化控件{I ...

  5. SQL Server 中 ROWLOCK 行级锁

    一.ROWLOCK的使用 1.ROWLOCK行级锁确保,在用户取得被更新的行,到该行进行更新,这段时间内不被其它用户所修改.因而行级锁即可保证数据的一致性,又能提高数据操作的并发性. 2.ROWLOC ...

  6. vue父组件如何向子组件中传递数据？

    原文地址 props传参 父组件: <template> <parent> <child :list="list"></child> ...

  7. 《精通并发与Netty》学习笔记（01 - netty介绍及环境搭建）

    一.Netty介绍     Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序.     ...

  8. 《JAVA语言》课问题汇总

    一.阅读相应教材,或者使用互联网搜索引擎,弄清楚反码.补码跟原码这几个概念,然后编写示例程序,对正数.负数进行各种位操作,观察输出结果,与手工计算的结果进行比对,看看Java中的数是采用上述哪种码表示 ...

  9. maven运行工程

    1.cd到工程目录下,执行打包命令-----mvn package 2.cd到工程的target目录执行运行命令 java -classpath myapp-1.0-SNAPSHOT.jar cn.m ...

  10. 在vue中使用Normalize初始化样式

    参考链接:https://www.jianshu.com/p/34533b45aac1