MVVM思想,快速生成代码片段的配置

72 阅读1分钟

MVVM是将数据与视图分开,M-model模型 V-view视图 VM-视图模型 更改数据通过核心VM更新视图。视图变化通过VM来改数据,无需写大量JS代码。 Vue没有完全遵循MVVM思想,但是设计受到这个思想的启发,如v-model el:“#app”,提供的data数据给id=app的标签,及在内的标签渲染时提供数据。

 <div id="app">
        <input  type="text" v-model="msg"/>
    </div>
  
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:1
            }
        })
    </script>

快速生成代码:

image.png

image.png

"vue": {
		 	"prefix": "vv",
		
			"body": [
				"<script>",
				"const vm= new Vue(",
					 "{",
						"data:{",
					   " $1",
					   " } ,",
						"el:$2",
					" }",
				" )",
			"</script>"
		
		],
	
}

vue是提示信息,vv是简写,body内字符型数组,将数组元素一行一行生成,以,隔开。在JS代码内才能生成代码片段。body数组内都可以写。