VUE于WPF中MvvM模式异同

因为在学VUE和WPF，又由于它们都采用了Mvvm模式，所以这里做一个简单的对比记录，方便记忆1.Vue意义上的ViewModel和View通常在一个页面，通过new Vue创建ViewModel，el指定页面View中的id并关联起来，data提供json数据以供绑定，methods提供函数以供绑定。代码如下：<body><div id="vue_det">...

习明然

3493人浏览 · 2019-12-11 23:35:34

习明然 · 2019-12-11 23:35:34 发布

因为在学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页面申明部分添加命令控件引用，之后通过<别名：控件名称>调用。

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^