本文最后更新于201 天前，其中的信息可能已经过时，如有错误请发送邮件到2289035571@QQ.COM
感谢 TurboAI对本博客的的大力赞助。 创作不易，如果您觉得有帮助，请支持LIncol29!
mvvm
MVVM是model-view-modelview的简写
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.前端界面展示，将显示的字段以及命令绑定
前端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();
}
}