Vue入门01-vue初识

最新推荐文章于 2022-06-28 15:12:38 发布

Sophie_U

最新推荐文章于 2022-06-28 15:12:38 发布

阅读量490

点赞数

文章标签： vue 框架 mvc 界面

本文链接：https://blog.csdn.net/Sophie_U/article/details/54896689

版权

一、vue入门

1.1 vue是什么？？

vue是一套构建用户界面的渐进式框架，是一个MVVM框架（库），和angular类似。

MVVM：Model , view ,viewModel 是一种开发的架构模式，MVVM和MVC类似，中是用ViewModel来替换了Controller，实现数据的双向绑定功能；
MVC：Model，View，Controller，一种开发的架构模式，它主张数据与视图分离，通过Controller来协调两者来实现目标功能。Model层负责数据的CURD操作等，而View视图层则负责数据内容的呈现，M和C是独立的两个模块，它们之间的联系是通过Controller控制器建立的，即处理数据显示的逻辑则在C层。而前端的MVC架构，C层相对很薄，一些业务逻辑主要写在View层。
MVVM，MVP，及MV*都是在MVC架构模式的基础之上衍生出来的一些模式。

1.2 vue与其他框架（angular,react）的对比

1、与react对比
共同点：

1)使用 Virtual DOM
2)提供了响应式（Reactive）和组件化（Composable）的视图组件。
3)将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。
区别：
1）组件的渲染功能，react是依靠jsx进行模板编写的，即将html最终编译成js代码渲染到页面，在vue中则是通过template模板来实现。
2）状态管理的不同，react社区里有flux,redux进行状态管理，vue则是采用vuex进行状态管理。
2、与angular1对比
在语法上，vue和angular是很相似的。
1）、数据绑定上：angular采用的是双向数据绑定，而vue在不同的组件间强制使用的单向数据流。
2)、指令与组件： vue的指令只封装DOM操作，而组件而是独立单元（有自己的视图和数据逻辑），而angular中有可以通过自定指令来创建一个组件。
3)、性能：vue没有使用脏检查机制，所以性能相对而言更容易优化。在angular中，当监测的数据越多，使用watcher就多，作用域内的每次变化都要重新计算，这相当耗性能。
vue：简单，易上手，框架小巧，适合个人维护项目，移动端项目。一片html代码配合上json，在new出来的vue实例上进行操作。
angular：框架相对要大很多，更适合PC端项目，所有属性和方法都挂在$scope对象上。
共同点：都不兼容IE低版本
区别：
用法上：
应用定义：

    Angular：
        1）、angular的应用定义与数据绑定
        var app=angular.module("app",[]);
        app.controller("appCtrl",function($scope){
            $scope.msg="angular数据"
        });
        2）、html方  ：伪代码
        <html  ng-app="app">
        <div  ng-controller="appCtrl" >
            {{msg}}
    Vue：
        1）、实例化vue对象
            var vm= new Vue({
                el:"#box",
                data:{
                    msg:"vue数据"
                },
                methods:{
                    show:function(){...}
                }
            });
        2）、html伪代码
            div id=box
            {{msg}}

二、常用指令

2.1 使用vue的两大步骤：
1、引入vue文件
2、准备一段要使用的html代码:使用{{expression}}表达式用于代表要渲染的数据
3、实例化vue，此实例就是mvvm中的vm。

     var vm=new Vue({
        el:'选择器',
        data:{
            key:'value'//数据值
        }   
        })

如上：el代表使用vue绑定的元素的选择器，data则是要渲染的数据，其值可以是多种类型（string,number,boolean,array,object）
2.2 数据的遍历 v-for
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vendor/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg">
        <ul>
            <li v-for="value in dataArr">{{$index}} ---{{value}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(key,value) in dataJson">
                {{key}} {{value}}
            </li>
        </ul>
    </div>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                msg:'hello world',
                dataArr:['apple','orange','banana'],
                dataJson:{
                    a:'apple',
                    b:'banana',
                    c:'orange'
                }
            }
        })
    </script>
</body>
</html>

2.3 vue事件绑定 v-on：eventName，简写@
v-on指令绑定事件
1、v-on:click 绑定点击事件
2、在vue实例内，methods内放事件响应函数

 <button v-on:click="show()">按钮</button>

window.onload=function(){
            //data内放数据，methods放函数
            var vm=new Vue({
                el:"#box",
                data:{
                    msg:'hello world',
                    dataArr:['apple','orange','banana'],
                    dataJson:{
                        a:'apple',
                        b:'banana',
                        c:'orange'
                    }
                },
                methods:{
                    show:function(){
                        console.log(this)
                        this.dataArr.push('tomato')
                    }
                }
            })
        }

2.4 v-show 显示
v-show指令用于控制元素的显示与隐藏

    <div v-show="displayed" style="width: 200px;height: 200px;background: red;"></div>
    <script>
        window.onload=function(){
            //data内放数据，methods放函数
            var vm=new Vue({
                el:"#box",
                data:{
                    displayed:true
                },
                methods:{
                    show:function(){
                       this.displayed=!this.displayed
                    }
                }
            })
        }

    </script>

如上：通过v-show指令结合vm实例的displayed数据控制元素显示隐藏
2.5 v-bind 绑定属性,简写 :

在vue中给标签属性绑定值时，用 v-bind:属性名=“数据名”
或者简写形式： :属性名=“数据名”
例1：绑定图片的url

 <img v-bind:src="url" :width="w" />

 new Vue({
    data:{
        url:'img.jpg',
        width:'200px'
    }
    })

例2：绑定class和style属性
：class=“class的值” 或 v-bind:class=”值 ”
：style=”” 或 v-bind:style=”“

 <style>
    .red{
        color: red;
    }
    .blue{
        background: blue;
    }
</style>
<script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    a:{
                        color:'red',
                        backgroundColor:'gray'
                    },
                     json:{
                        red:true,
                        blue:true
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="a">文字...</strong>
        <strong :class="json">文字...</strong>
    </div>
</body>

Sophie_U

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue入门01-vue初识

一、vue入门1.1 vue是什么？？vue是一套构建用户界面的渐进式框架，是一个MVVM框架（库），和angular类似。 MVVM：Model , view ,viewModel 是一种开发的架构模式，MVVM和MVC类似，中是用ViewModel来替换了Controller，实现数据的双向绑定功能； MVC：Model，View，Controller，一种开发的架构模式，
复制链接

扫一扫