初识 vue------简单介绍

/**
    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>
posted @ 2019-10-11 13:54  文杰_豆豆  阅读(204)  评论(0编辑  收藏  举报