vue.js学习第一天，了解vue.js

vue.js是一个前端框架，他与jquery不同，jquery是一个js库，而vue.js是js的前端框架。

vue.js对我们前端页面入侵比较大，而jquery则不然。那我们还为什么要使用vue.js呢，vue.js可以让我们不再关注前端的视图层，只要关注前端的业务逻辑即可；vue.js与jquery并不冲突，但vue.js不建议我们再进行手动的或者使用jquery操作dom元素。我们可以使用jquery进行ajax向后台请求数据或者进行动画操作。jquery可以和vue.js进行搭配使用。vue.js可以提高我们的开发效率，提高页面的渲染效率，双向数据绑定；

vue.js是一个mvvm的结构的

我们先来对比一下后端的mvc模式

vue.js学习第一天，了解vue.js

做过后台的人很多都能理解上面的模式；

而什么是mvvm呢，Model-View-ViewModel

vm是一个调度者，负责将model与view之前的数据进行同步(渲染)

html对应的是view，后期我们使用vue.js创建出来的vm对象(new Vue)就是viewModel，而vm中的data则是model；

下面我们开始第一个demo；

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6    
 7     
 8 </head>
 9 <body>
10     <div id="paraview">
11         <!--网速过慢v-cloak有闪烁问题，但他可以插入文本-->
12         <p v-cloak>pre {{title}} tail</p>
13         <!-- 没有闪烁问题,前后无法插入文本-->
14         <p v-text="title"></p>
15         <!--可以渲染html-->
16         <p v-html="title"></p>
17         <input type="button" value="按钮" v-bind:title="buttonStr" />
18         <p></p>
19     </div>
20 </body>
21      <script type="text/javascript" src="libs/vue.js"></script>
22     <script type="text/javascript">
23         var vm = new Vue({
24             el: '#paraview',
25             data: {
26                 title: '<p>parview software</p>',
27                 buttonStr:'this is a button'
28             }
29         });
30     </script>
31 </html>

View Code