Vue自学（2）2020-09-28

最新推荐文章于 2024-07-16 01:47:39 发布

Larrywjk

最新推荐文章于 2024-07-16 01:47:39 发布

阅读量120

点赞数

分类专栏：富士康实习心得文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44423801/article/details/108856982

版权

富士康实习心得专栏收录该内容

35 篇文章 0 订阅

订阅专栏

MVVM模式
model ：用于存放数据
view : 响应用户交互行为
ViewModel：可以理解为自动化调用的Presenter

Presenter：
1.Module改变，修改DOM
2. View响应用户交互时，通知Presenter， Presenter负责更新Module，以及修改DOM

在这里插入图片描述

 <!-- View -->
    <div id="app">
        <input type="button" value="按钮1" v-on:click="show"/>
        <input type="button" value="按钮2" @click="show()"/>
        <!-- 1. 用 @ 来代替 v-on -->
        <!-- 2. 不传递参数时，可以省略括号 -->
        <h3>{{word}}</h3>
    </div>
    <script>
        // Module
        var m = {
            word: 'Hello, World! I am Vue'
        };

        // ViewModel
        var vm = new Vue({
            el: '#app', // 挂载点。
            data: m, // 数据
            // 方法
            methods: {
                // show(x){
                show: function(){
                    console.log('Hello, I am here!');

                    this.word = 'Changed by 隔壁王校长';
                }
            }
        });
    </script>

vue指令的目的
为了实现Js与HTML的分离
HTML的结构应该定义在HTML文件中，而不是散落在JS代码中仅仅通过model去控制View，而不是定义View

js与HTML分离

<!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">
        <input type="button" value="按钮">

    </div>
    <script id="tmp" type="text/x-wangxiaozhang">
        <div>
            <p>%word%</p>
        </div>
    </script>
    <script type="text/javascript">
        // 1. 直接操作DOM
        // function changeDirectly(){
        //     var app = document.getElementById('app');

        //     var div, p;
        //     div = document.createElement('div');
        //     p = document.createElement('p');

        //     p.innerHTML = 'abc';
        //     div.appendChild(p);
        //     app.appendChild(div);
        // }

        // addEventListener('click', changeDirectly);

        // 2. 模板方法
        // function changeDirectly(){
        //     var app = document.getElementById('app');
        //     var html = '';

        //     var htmlTmp = '<div><p>%word%</p></div>';
            
        //     html = htmlTmp.replace(/%word%/g, 'abc');
        //     console.log(html);
            
        //     app.innerHTML = html;
        // }

        // addEventListener('click', changeDirectly);

        // 3. JS与HTML分离
        //    第一步：把模板放到HTML中
        //    第二步：渲染
        //    第三步：模板hide起来

        function changeDirectly(){
            var app = document.getElementById('app');
            var html = '';

            var htmlTmp = document.getElementById('tmp').innerHTML;
            
            html = htmlTmp.replace(/%word%/g, 'abc');
            console.log(html);
            
            app.innerHTML = html;
        }

        addEventListener('click', changeDirectly);

    </script>
</body>
</html>

Larrywjk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue自学（2）2020-09-28

MVVM模式model ：用于存放数据view : 响应用户交互行为ViewModel：可以理解为自动化调用的PresenterPresenter：1.Module改变，修改DOM2. View响应用户交互时，通知Presenter， Presenter负责更新Module，以及修改DOM  <div id="app"> <input type="button" value="按钮1" v-on:click=
复制链接

扫一扫

专栏目录