Vue--安装与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浏览器上安装一个插件

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

vue项目的启动---npm run dev---后边的dev也可能是别的-通过查看package.json--scripts:{service}配置项
按键启动例子：webstrom软件是通过点击npm命令框--启动dev或者serve