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模式

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

而什么是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

怎么样,是不是很容易;

以后的代码都会以这个为模板进行;

v-bind指令可以将属性的值解析为变量

如:<input type="text" v-bind:value="textStr" />

这里的textStr会被解析为变量,既然是变量,就可以写js表达式 如改写为v-bind:value="textStr+'123'"等,v-bind可以省略不写,只保留冒号

在new Vue对象中添加methods对象可以绑定事件;

<input type="button" value="按钮" v-bind:title="buttonStr" v-on:click="btnClick" />

data: {
                title: '<p>parview software</p>',
                buttonStr:'this is a button'
            },
            methods: {
                btnClick: function () {
                    alert('点击了');
                }
            }

v-on:可以简写为@,即@click="btnClick"

v-model是唯一的数据双向绑定指令;

<input type="text" v-bind:value="buttonStr" />
<input type="text" v-model="buttonStr" />

v-bind只能做到数据的单向绑定,而v-model才能做到双向绑定;

v-for可以做循环;

listData:['test1','test2','test3','test4'];

<p v-for='(item,i) in listData'>{{item}}</p>

上面的listData数组里面保存对象仍然是可以解析的,大家可以自行尝试;

同样可以循环对象;

person:{

name:'张飞',

age:56

}

<p v-for='(value,key) in person'>{{value}}------{{key}}</p>

<p v-for='i in 10'>{{i}}</p>

 所有的指令中的代码都是解析执行的,所以,例如上面的v-for里面可以执行一个方动态查询出一个集合进行遍历;

如:<p v-for='item in search()'>{{item}}</p>

上面的代码是可行的;