Vue

最新推荐文章于 2022-07-31 19:22:13 发布

努力的Frank

最新推荐文章于 2022-07-31 19:22:13 发布

阅读量280

点赞数

分类专栏：前端文章标签： vue-js

本文链接：https://blog.csdn.net/github_34117641/article/details/78325170

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

（三）vue/angular构建MVVM视图

问题描述

早期前端崇尚mvc，js css dom尽量分开，数据请求是在js中，所以要在js中追加dom。较为麻烦。

实际场景

利用jquery请求一组数据在表格中显示

    $.post('/getArray',{},function(data){
        for(var i in data){
            $('table').append('<tr><td>'+data[i].name+'</td><td>'+data[i].age+'</td></tr>');
        }
    })

这种拼接字符串的方式有没有让你绝望呢。

双向绑定的mvvm模型和加强的dom组件应运而生，典型代表是angularjs（这里指1.x），vue也采用了类似的方式。angularjs2.x在我刚学了1.x后出的，而且变动特别大，简直就是个新框架（心痛）。vue的写法要更简单一些，这里我以vue为例介绍吧。

vue demo

引入vue.js文件，然后下面是常用的功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>;
</head>
<body>
<div id="app">
  <p>{{ text }}</p>-------------------文本双向绑定，双括号中可写js简单语句
  <div v-html='html'></div>-----------innerhtml双向绑定
  <div v-bind:hidden="hidden"></div>--属性值双向绑定
  <input v-model="text"/>-------------input双向绑定（input中修改影响这个值）
  <button v-on:click='f1'>click</button>----------事件监听绑定函数
  <p>{{ text | f2 }}</p>--------------过滤器
  <div v-if='!hidden'>if=true</div>---v-if是否显示(v-show扩展版本)
  <div v-else>if=false</div>
  <p v-for='item in arr'>{{item}}<p>--如果是map则(k,v) in arr
  <mydom txt="xiaogenban"></mydom>-------自定义组件和props
</div>
<script>
//vue对象
new Vue({
  el: '#app',
  data: {
    text: 'Hello',
    html:'<h1>Hello</h1>',
    hidden:true,
    arr:[0,1,2,3]
  },
  methods:{
    f1:function(){
      alert('f1')
    }
  },
  filters:{
    f2:function(v){
      while(v.length<10){
        v+='x';
      }
      return v;
    }
  }
});
//组件声明注意这段代码应该放到new Vue前面
Vue.component('mydom', {
  // 声明 props
  props: ['txt'],
  template: '<p>{{ txt.toUpperCase() }}</p>'
});
</script>
</body>
</html>

这里一次性列出内容较多，但是却不难理解，vue用法和angularjs1很像，不过写法更简洁一些，有种小清新的感觉。双向绑定的可以轻松解决之前的字符串拼接，只需要将$.post回调函数中获得的data绑定到显示的data中即可，用上面的v-for轻松解决。写法非常舒服：

<div id="app">
<table>
  <tr v-for='it in arr'><td>{{it.name}}</td><td>{{it.age}}</td></tr>
</table>
<button v-on:click='f1'>click</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    arr: [],
  },
  methods:{
    f1:function(){
     $.post('/getArray',{},function(ddd){
        this.arr=ddd;
     })
    }
  }
}
</script>

小结

旧的写法中，接收数据后渲染dom，需要往原来dom中append追加，追加的时候往往要拼接字符串非常麻烦。vue和angularjs中通过双向绑定，在接收到数据的时候直接就能改变dom中显示的内容，开发思路上更为清晰了。

努力的Frank

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

（三）vue/angular构建MVVM视图#问题描述早期前端崇尚mvc，js css dom尽量分开，数据请求是在js中，所以要在js中追加dom。较为麻烦。#实际场景利用jquery请求一组数据在表格中显示 $.post('/getArray',{},function(data){ for(var i in data){ $('table'
复制链接

扫一扫

专栏目录