js 的另一种框架 Vue框架
Vue框架的的概述
1.什么是MVVM
Vue框架之中与我们之前学的框架不同,它是将一个HTML划分为了
以下三个部分
View:视图部分,含有HTML的各种标签和样式
Model: 模型部分有叫做数据部分
ViewModel: 将数据与标签结合起来(就是决定将数据放在哪一块的HTML的标签上)
2.响应式的框架
Vue的框架有一个特点就是响应式的框架,就是它将数据与标签连接在一起,如果标签上的数据发生变化的话就会造成相应的标签发生变化,这就是一种响应式框架
举例:
<body>
<div id="hello">
<p>{{name}}</p>
<p>{{age+1}}</p>
</div>
<script>
<!--每一个页面都要创建一个Vue的对象-->
var vue=new Vue({
//el: 就是将视图与数据连接在一起
el:"#hello",
//data 就是模型数据
data:{
name:"张三",
age:10
}
});
</script>
</body>
此时如果在浏览器的控制台上添加如下的代码
vue.name="李四";
当按下回车的时候页面上的==张三==就会立刻改为==李四==
将标签与数据绑定时注意:
(1)一定要将统一的父标签与子Vue的对象进行绑定
(2)不要将Vue的对象与<html>
与<body>
进行绑定,建议的是<div>
标签
Vue的计算的属性
可在{{}}里面进行一些简单的计算
javascript
<p>{{name.split("").reverse().join("")}}</p> //对那么进行了反转
但是如果在标签里进行计算的话总会有些不合适,就会失去了MVVM思想的初衷,没有将数据可HTML标签完全的分开,所以Vue对象中还有一个computed 的计算属性
//Vue 对象的计算属性
computed:{
namereverse:function () {
return this.name.split("").reverse().join("");
}
}
v-for 指令
v-for 指令可以用来循环的插入一个data中的数据
举例:在一个表格循环的插入数据
循环的一般的格式为
==v-for=”(p,i) in list==
<div id="hello">
<table width="100%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(p,i) in list">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vue=new Vue({
el:"#hello",
data:{
list:[
{name:"张三",age:10},
{name:"李四",age:20},
{name:"王五",age:30}
]
}
});
</script>
v-if的指令
v-if的指令就是判断是否符合条件,如果符合的话就会显示,如果不符合的话就不会显示
注意v-if的语句中没有else的语句,所以每次都需要调用一次v-if的语句
一般的格式为
v-if=”成立的条件”
举例:如下如果我想达到一个效果:就是data里面有数据的时候就会显示我所需要的表格,但是如果data里面没有数据的话就不会显示这个表
以下是代码
<div id="hello">
<table width="100%" border="1" v-if="list.length>0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(p,i) in list">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
</tr>
</tbody>
</table>
<p v-if="list.length==0">此时没有数据</p>
</div>
<script>
var vue=new Vue({
el:"#hello",
data:{
list:[
// {name:"张三",age:10},
// {name:"李四",age:20},
// {name:"王五",age:30}
]
}
});
</script>
v-bind(属性的绑定)
属性的绑定就是将Vue对象里面的数据与之前的标签的属性连接起来,如果Vue对象的数据发生变化的话就会相应的控制对应绑定的标签的属性
一般的格式为
==v-bind:属性名=”属性的值”==
另一种简写的个格式为
==:属性名=”属性的值”==;
举例
<div id="div1">
<!--将一个value的属性与data里面的val绑定了-->
<input type="text" v-bind:value="val">
</div>
<script>
var vue=new Vue({
el:"#div1",
data:{
val:"hello world"
}
});
</script>
如下所示的代码就是将一个文本框的value的属性与data里面val相互绑定了起来
如果对应的val的变化就会引起文本框的值发生变化
例如在一个浏览器的控制台写入以下的代码:
vue.val=”你好,世界”;
那么文本框的值也会发生变化
事件的处理(v-on)
举例:
<div id="div">
<input type="text" v-on:click="abc()">
<script src="vue.js"></script>
</div>
<script>
var vue=new Vue({
el:"#div",
data:{
},
methods:{
abc:function () {
console.log("100");
}
}
});
v-bind与v-model的区别
v-bind:只能是数据来影响模型
v-model:既可以数据影响模型,也可以是模型来影像数据(又叫做双向的绑定)