# 1、vue基本使用 2. Vue基本使用 2.1传统开发模式对比 ~~~ 原生JS <div id="msg"></div> <script type="text/j avascript"> var msg = 'Hel1o World'; var div = document.getElementById( 'msg') ; div.innerHTML = msg; </script> ~~~ ~~~ jQuery <div id= "msg"></div> <script type="text/javascript" src="js/jquery. js"></script> <script type="text/j avascript"> var msg = 'Hello World' ; $('#msg').html (msg); </ script> ~~~ 2.2 Vue.js之HelloWorld基本步骤 ~~~ Vue的基本使用步骤 1、需要提供标签用于填充数据 2、引入vue.js库文件 3、可以使用vue的语法做功能了 4、把vue提供的数据填充到标签里面 ~~~ ~~~ Vue <div id="app"> <div>{ {msg}}</div> </div> <script type="text/javascript" src="js/vue. js"></script> <script type="text/j avascript"> new Vue ({ el: '#app', data: { msg: ' He lloWorld ' } }) </script> ~~~ 2.3 Vue.js之HelloWorld细节分析 ## 1.实例参数分析 重点 ●el:元素的挂载位置(值可以是CSS选择器或者DOM元素) ●data :模型数据(值是一个对象) 2.插值表达式用法 ●将数据填充到HTML标签中 ●插值表达式支持基本的计算操作 3.Vue代码运行原理分析 ●概述编译过程的概念( Vue语法→原生语法)