js框架之Vue框架

最新推荐文章于 2023-03-01 16:26:35 发布

sunlichao123

最新推荐文章于 2023-03-01 16:26:35 发布

阅读量657

点赞数

本文链接：https://blog.csdn.net/weixin_40843624/article/details/82695645

版权

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：既可以数据影响模型，也可以是模型来影像数据（又叫做双向的绑定）

sunlichao123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js框架之Vue框架

js 的另一种框架 Vue框架Vue框架的的概述1.什么是MVVMVue框架之中与我们之前学的框架不同，它是将一个HTML划分为了以下三个部分 View：视图部分，含有HTML的各种标签和样式 Model：模型部分有叫做数据部分 ViewModel：将数据与标签结合起来（就是决定将数据放在哪一块的HTML的标签上）2.响应式的框架Vue的框架有一个特点...
复制链接

扫一扫