02.Vue版helloworld体会MVVM_helloword mvvm

作者：你好赵伟 | 2024-06-13 05:33:02

踩

helloword mvvm


<!DOCTYPE html>
<html lang="en">
 
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1.引入vue.js -->
    <script src="./vue1026.js"></script>
</head>
 
<body>
    <div id="app">
      <!-- 5.使用{{}}展示文本 -->
        <p>{{msg}}</p>
    </div>
    <script>
        // 2.创建一个vue实例，这个实例可以监管html代码
        var vm = new Vue({
            // 3.通过el属性指定vue实例监管范围，它的值是一个id
            el: '#app',
            // 4.通过data属性保存数据
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>
 
</html>

★配置用户代码片段

文件-首选项-用户代码片段-输入html
vue + tab


{
    /*
        // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and 
        // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
        // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
        // same ids are connected.
        // Example:
        "Print to console": {
            "prefix": "log",
            "body": [
                "console.log('$1');",
                "$2"
            ],
            "description": "Log output to console"
        }
    */
    "Vue": {
        "prefix": "vue",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "\t<head>",
            "\t\t<title>$1</title>",
            "\t\t<meta charset=\"UTF-8\">",
            "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "\t\t<script src=\"./vue.js\"></script>",
            "\t</head>",
            "\t<body>",
            "\t\t<div id=\"app\"></div>",
            "\t\t<script>",
            "\t\t\tvar vm = new Vue({",
            "\t\t\t\tel: '#app',",
            "\t\t\t\tdata: {",
            "",
            "\t\t\t\t}",
            "\t\t\t})",
            "\t\t</script>",
            "\t</body>",
            "</html>"
        ],
        "description": "vue - Defines a template for a vue & html5 document"
    }
}

1.框架和库的区别？


a.框架是一套完整的解决方案，对项目的侵入性大，如果需要更换框架，则需要重新架构整个项目;
 
b.库（插件），提供某一个小功能，对项目的侵入性小，如果某个库无法完成某个需求，可以很容
 
易切换到其他库实现需求；

2.MVC和MVVM的关系图解

MVC是后端的分层开发概念;


MVVM是前端视图层的概念,把前端的视图层,分成了三个部分,model.view,vmviewmodel(核心调度者)
M:保存页面中每个单独的数据;
VM:它是一个调度者,分割了M和V,V层想要获取和保存数据的时候,都要由VM做中间的处理;
V:每个页面中的HTML结构;


前端页面中使用MVVM的思想,主要是为了让我们开发更加的方便,因为MVVM提供了数据的双向绑定.
 
数据的双向绑定是由VM提供的;

3.Vue基本代码和MVVM之间的对应关系


el:指定要控制的区域;
data:是个对象,指定了控制的区域内要用到的数据;
methods虽然带了个s后缀,但是是个对象,这里可以自定方法;

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】