VUE于WPF中MvvM模式异同
因为在学VUE和WPF，又由于它们都采用了Mvvm模式，所以这里做一个简单的对比记录，方便记忆1.Vue意义上的ViewModel和View通常在一个页面，通过new Vue创建ViewModel，el指定页面View中的id并关联起来，data提供json数据以供绑定，methods提供函数以供绑定。代码如下：<body><div id="vue_det">...
因为在学VUE和WPF，又由于它们都采用了Mvvm模式，所以这里做一个简单的对比记录，方便记忆
1.Vue意义上的ViewModel和View通常在一个页面，通过new Vue创建ViewModel，el指定页面View中的id并关联起来，data提供json数据以供绑定，methods提供函数以供绑定。代码如下：
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
</script>
</body>而WPF中是分开的，ViewModel中含有各种属性，可以通过后台代码和DataContext关联起来，也可以通过框架同意注册ViewModel到ViewModelLocator，然后页面进行DataContext引用，之后就可以通过Binding绑定在ViewModel中定义的各属性数据，通过Command绑定定义的各命令。代码如下：
<Button Style="{StaticResource NormizeStyle}" Command="{Binding CloseAppCmd}" Visibility="{Binding NormalVisible}"/>
private Visibility _normalVisible;
public Visibility NormalVisible
{
get => _normalVisible;
set => Set("NormalVisible", ref _normalVisible, value);
}
public OperatorViewModel()
{
NormalVisible = Visibility.Collapsed;
}
ublic RelayCommand CloseAppCmd => new Lazy<RelayCommand>(() => new RelayCommand(() =>
{
NormalVisible = Visibility.Visible;
})).Value;
2.Vue中的v-bind 类似于WPF中的Binding，用于内容绑定，Vue中可以缩写为:，后面紧跟参数名称=‘’参数值‘’(区别，v-model是紧跟=‘’参数值‘’)。而WPF中没有缩写，在控件属性中通过{}绑定内容，并指定Binding及其绑定内容的路径，它通常是ViewModel中定义的属性。
3.Vue中的v-on 类似于WPF中的Command，用于事件绑定，Vue中可以缩写为@，后面紧跟事件类型名称。而WPF中没有缩写，在控件默认的事件中触发命令，也可以通过事件转命令来触发命令。
4.Vue中的ViewModel在页面定义，其数据由json组成，也就是键值对，在view页面使用时通过指定键名来进行绑定。标签外部内容绑定方式为{{键名}}，标签内部绑定方式为v-model="键名"。而WPF中并非json格式，支持各种类型的属性，绑定通常在控件内部，绑定方式为{Binding Path=属性名}。
5.Vue中的过滤器类似于WPF中的值转换器，用于对原始的数据进行一些过滤转换后再显示，这里Vue中的使用和定义方式分别为
{{message | reverse | uppercase}}
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})而在wpf中的使用和定义方式分别为
Binding="{Binding Path=Type, Converter={StaticResource ToTypeNow}}"
public class ThicknessSplitConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
//...
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}6.Vue提供的按键别名更丰富.enter.tab.delete (捕获 "删除" 和 "退格" 键).esc.space.up.down.left.right.ctrl.alt.shift.meta都是，书写方式类似为<input v-on:keyup.enter="submit">，而在WPF中相对较少有exit、focus等
7.Vue中的组件类似于WPF中的用户控件，通过Vue.component(组件命名, 组件内容)定义全局组件，局部组件只是定义在new Vue内部，然后再在View页面中通过<组件名称></组件命名>调用。而在WPF中，没有全局和局部的概念，通过新建用户控件，然后在View页面申明部分添加命令控件引用，之后通过<别名：控件名称>调用。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)