欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js框架之Vue框架简介

程序员文章站 2023-12-10 22:51:10
 js 的另一种框架 vue框架 vue框架的的概述 1.什么是mvvm vue框架之中与我们之前学的框架不同,它是将一个html划分为了 以下三个部分 view:视图部分,含有html...

    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}}
    <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里面没有数据的话就不会显示这个表
    以下是代码

    
    

    姓名 年龄
    {{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:既可以数据影响模型,也可以是模型来影像数据(又叫做双向的绑定)

    </script>