我要评论js 的另一种框架 vue框架
vue框架的的概述
1.什么是mvvm
vue框架之中与我们之前学的框架不同，它是将一个html划分为了
以下三个部分
view：视图部分，含有html的各种标签和样式
model： 模型部分有叫做数据部分
viewmodel： 将数据与标签结合起来（就是决定将数据放在哪一块的html的标签上）
2.响应式的框架
vue的框架有一个特点就是响应式的框架，就是它将数据与标签连接在一起，如果标签上的数据发生变化的话就会造成相应的标签发生变化，这就是一种响应式框架
举例：
{{name}}
{{age+1}}
<script> var vue=new vue({ //el: 就是将视图与数据连接在一起 el:"#hello", //data 就是模型数据 data:{ name:"张三", age:10 } }); </script>此时如果在的控制台上添加如下的代码
vue.name="李四";
当按下回车的时候页面上的==张三==就会立刻改为==李四==
将标签与数据绑定时注意：
（1）一定要将统一的父标签与子vue的对象进行绑定
（2）不要将vue的对象与
标签
vue的计算的属性
可在{{}}里面进行一些简单的计算
javascript
{{name.split("").reverse().join("")}}
//对那么进行了反转但是如果在标签里进行计算的话总会有些不合适，就会失去了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==
| 姓名 | 年龄 |
|---|---|
| {{p.name}} | {{p.age}} |
v-if的指令
v-if的指令就是判断是否符合条件，如果符合的话就会显示，如果不符合的话就不会显示
注意v-if的语句中没有else的语句，所以每次都需要调用一次v-if的语句
一般的格式为
v-if=”成立的条件”
举例：如下如果我想达到一个效果：就是data里面有数据的时候就会显示我所需要的表格，但是如果data里面没有数据的话就不会显示这个表
以下是代码
| 姓名 | 年龄 |
|---|---|
| {{p.name}} | {{p.age}} |
此时没有数据
<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:属性名=”属性的值”==
另一种简写的个格式为
==:属性名=”属性的值”==;
举例
<script> var vue=new vue({ el:"#p1", data:{ val:"hello world" } }); </script>
如下所示的代码就是将一个文本框的value的属性与data里面val相互绑定了起来
如果对应的val的变化就会引起文本框的值发生变化
例如在一个浏览器的控制台写入以下的代码：
vue.val=”你好，世界”;
那么文本框的值也会发生变化
事件的处理（v-on）
举例:
<script src="vue.js"></script>
<script> var vue=new vue({ el:"#p", data:{ }, methods:{ abc:function () { console.log("100"); } } });v-bind与v-model的区别
v-bind：只能是数据来影响模型
v-model：既可以数据影响模型，也可以是模型来影像数据（又叫做双向的绑定）
网友评论