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;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
怎么样,是不是很容易;
以后的代码都会以这个为模板进行;
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>