02.Vue版helloworld体会MVVM

最新推荐文章于 2021-04-01 13:57:25 发布

屋顶上的小喵

最新推荐文章于 2021-04-01 13:57:25 发布

阅读量181

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/vivian_1122/article/details/88623750

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!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后缀,但是是个对象,这里可以自定方法;

屋顶上的小喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
02.Vue版helloworld体会MVVM

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=d
复制链接

扫一扫