Vue--安装与HelloWord--MVVM模式小实例

作者：知新_RL | 2024-06-13 05:21:31

踩

helloword mvvm

1.官网下载开发板vue.js文件

2.HelloWorld!

3.MvvM实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>helloworld</title>
        <script src="./vue.js"></script>
        <script>Vue.config.productionTip=false</script>
    </head>
    <body>
        <div id="root">
            <div>
                <input type="text" v-model="todoValue" />
                <button @click="handleBtnClick">提交</button>
            </div>
            <ul>
                <!-- <li v-for="item in list">
                    {{item}}
                </li> -->
                <todo-item v-bind:content="item"
                    v-for="item in list">
                </todo-item>
            </ul>
        </div>
        <script>
        /*     Vue.component("TodoItem",{
                props:['content'],
                template:"<li>{{content}}</li>",
            }) */
            var TodoItem={
                props:['content'],
                template:"<li>{{content}}</li>"
            }
            var app=new Vue({
                el:"#root",
                components:{
                    TodoItem:TodoItem
                },
                data:{
                    todoValue:"",
                    list:[]
                },
                methods:{
                    handleBtnClick:function(){
                        this.list.push(this.todoValue)
                        this.todoValue=""
                    }
                }
            })
        </script>
    </body>
</html>

我用的谷歌浏览器，F12出现了一个错误，，百度了一下，，在表头添加

 <script>Vue.config.productionTip=false</script>

4.然后又出现了一个错误---错误信息不写了--直接上解决办法
---在Chrom浏览器上安装一个插件

--然后解压--添加到浏览器的扩展插件中

转载于:https://www.cnblogs.com/fdxjava/p/10746663.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/711041