mvvm模式详解
本文最后更新于91 天前,其中的信息可能已经过时,如有错误请发送邮件到2289035571@QQ.COM

mvvm

MVVM是model-view-modelview的简写

img

MVVM模式的组成部分

模型

  • 模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。

视图

  • 就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。

视图模型

  • 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。

绑定器

  • 声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中,绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时,声明性数据绑定技术的出现是实现该模式的一个关键因素。

MVVM框架与MVC框架的区别

mvc 和 mvvm 其实区别并不大。都是一种设计思想,主要区别如下:

1.mvc 中 Controller演变成 mvvm 中的 viewModel

2.mvvm 通过数据来驱动视图层的显示而不是节点操作。

3.mvc中Model和View是可以直接打交道的,造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互,而是通过中间桥梁ViewModel来同步

4.mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验

MVVM代码展示

1.前端界面展示,将显示的字段以及命令绑定

img

前端xaml代码展示:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="QQ" FontSize="40" Foreground="White" Background="#BABEF2"/>
    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0"   Text="账号: " FontSize="25" VerticalAlignment="Center" HorizontalAlignment="Right"/>
        <!--Text 绑定字段:UserName-->
        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding UserName}" FontSize="25" VerticalAlignment="Center" Width="200" HorizontalAlignment="Left"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Text="密码: " FontSize="25" VerticalAlignment="Center" HorizontalAlignment="Right"/>
        <!--Text 绑定字段:Password-->
        <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Password}" FontSize="25" VerticalAlignment="Center" Width="200" HorizontalAlignment="Left" />
        <CheckBox Grid.Row="2" Grid.ColumnSpan="2" Content="记住密码" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <!-- 绑定命令:Command  使用命令代替了原本的Button按钮点击事件-->
        <Button Grid.Row="3" Grid.ColumnSpan="2" Content="安全登录" Command="{Binding LoginAction}"  FontSize="32" Foreground="White" Background="Blue"/>
    </Grid>
</Grid>

2.Model数据模型

public class LoginModel
{
    private string _UserName;

    public string UserName
    {
        get { return _UserName; }
        set { _UserName = value; }
    }

    private string _Password;

    public string Password
    {
        get { return _Password; }
        set { _Password = value; }
    }

}

3.命令类,定义命令。替代按钮的点击事件

public class RelayCommand : ICommand
{
    //命令是否能够执行
    readonly Func<bool> _canExecute;
    //命令需要执行的方法
    readonly Action _execute;

    public RelayCommand(Action action, Func<bool> canExecute)
    {
        _execute = action;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        if (_canExecute == null)
        {
            return true;
        }
        return _canExecute();
    }

    public void Execute(object parameter)
    {
        _execute();
    }

    public event EventHandler CanExecuteChanged
    {
        add
        {
            if(_canExecute != null)
            {
                CommandManager.RequerySuggested += value;
            }
        }
        remove
        {
            if(_canExecute != null)
            {
                CommandManager.RequerySuggested -= value;
            }
        }
    }

}

4.定义ViewModel类,此类继承INotifyPropertyChanged

public class LoginVM : INotifyPropertyChanged
{
    public LoginVM()
    {

    }
    LoginModel _loginModel = new LoginModel();

    public string UserName
    {
        get { return _loginModel.UserName; }
        set
        {
            _loginModel.UserName = value;
            RaisePropertyChanged(UserName);
        }
    }

    public string Password
    {
        get { return _loginModel.Password; }
        set
        {
            _loginModel.Password = value;
            RaisePropertyChanged(Password);
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    /// <summary>
    /// 登录方法
    /// </summary>
    void LoginFunc()
    {
        if (UserName == "111" && Password == "222")
        {
            MessageBox.Show("尊敬的用户,您已登录成功");
        }
        else
        {
            MessageBox.Show("登录失败,请重新输入密码");
            UserName = string.Empty;
            Password = string.Empty;
        }
    }

    bool CanLoginExecute()
    {
        return true;
    }

    public ICommand LoginAction
    {
        get
        {
            return new RelayCommand(LoginFunc, CanLoginExecute);
        }

    }
}

5.MainWindow

/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new LoginVM();
    }
}
觉得有帮助可以投喂下博主哦~感谢!
作者:Lincol
本文链接:https://www.lincol29.cn/mvvm%e6%a8%a1%e5%bc%8f%e8%af%a6%e8%a7%a3
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议转载请注明文章地址及作者哦~
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇