• 初识 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>
  • 相关阅读:
    Flex 加载资源方式
    java在linux系统下开机启动无法使用sudo命令的原因
    Android SDK 1.5中文版 (Application基础—5)
    还原ORACLE DUMP 的值
    JAVA操作windows共享目录
    [C++] 解释一下m_pfnCreateObject
    Android SDK 1.5中文版 (Application基础—4)
    O7_DICTIONARY_ACCESSIBILITY&REMOTE_OS_AUTHENT
    Android SDK 1.5中文版 (Application基础—3)
    Android SDK 1.5中文版 (Application基础—2)
  • 原文地址:https://www.cnblogs.com/wangwenjie98/p/11653763.html
Copyright © 2020-2023  润新知