Vue

简介

  1. Vue:一款渐进式JavaScript框架,渐进式是指逐步实现新特性;如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点。
  2. Axios:前端通信框架;因为Vue的边界很明确,就是为了处理DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然页可以使用JQuery提供的Ajax通信功能。
  3. JQuery:熟知的JavaScript框架,优点:简化了DOM操作;缺点:DOM操作太频繁,影响前端的性能;在前端眼里使用它仅仅是为了兼容IE6、7、8.
  4. Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发理念,与微软合作,采用了TypeScript语法开发;对后台程序员友好,对前端程序员不太友好,最大的缺点是版本迭代不合理。

MVVM模式的实现者

  1. Model:模型层,在这里表示JavaScript对象
  2. View:视图层,在这里表示DOM(HTML操作的元素)
  3. ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
  4. 在MVVM架构中,是不允许 数据 和 视图 直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者
  5. ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
  6. ViewModel能够监听到视图的变化,并能够通知数据发生变化
  7. Vue.js是MVVM模式的实现者,他的核心是实现了:DOM监听和数据绑定

Vue环境搭建(IDEA)

  1. 安装Vue.js插件
  2. 引入js库
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

练手

注意:Vue的Script要放在最后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

</head>
<body>
    <h1 id="one">
        {{massage}}
    </h1>
    <script>
        var vm = new Vue({
            el: "#one",
            data: {
                massage:"第一次使用Vue"
            }
        });
    </script>
</body>
</html>

Vue之computed

  1. methods:定义方法,调用方法使用currentTime1(),需要加括号
  2. computed:定义计算属性,调用属性使用currentTime2,不需要带括号;this.massage是为了能够让currentTime2观察到数据变化而变化。
  3. 如果计算属性中的值发生了变化,则缓存就会刷新。可以使用页面的console对massage赋值进行测试。
  4. 结论:调用方法时,每次都需要重新进行计算,计算过程会产生系统开销,如果是一个不经常改变的值,此时我们可以将这个不经常改变的值缓存起来,使用Vue的计算属性可以很方便的做到这一点,(计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,解决系统开销)
    示例:
<!--计算属性-computed-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
  currentTime1:{{currentTime1()}}
  <br>
  currentTime2:{{currentTime2}}
  <br>
  message1:{{message1}}
</div>
<script>
  var vm = new Vue({
    el:"#one",
    data:{
      message1:"fff",
    },
    methods:{
      currentTime1:function (){
        return Date.now();
      }
    },
    computed:{
      currentTime2:function () {
        this.message1;
        return Date.now();
      }
    }
  });
</script>
</body>
</html>

Vue-slot(插槽操作)

<!--slot插槽操作-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
  <todo>
    <todo-head slot="todo-head" v-bind:title="head_content"></todo-head>
    <todo-content slot="todo-content" v-for="item in items_content" v-bind:item="item"></todo-content>
  </todo>
</div>
<script>
/*  创建一个组件
<slot name="todo-head"></slot> 使用slot绑定其他组件
*/
  Vue.component('todo',{
    template:'<div>' +
                '<slot name="todo-head"></slot>' +
                  '<ul>' +
                    '<slot name="todo-content"></slot>' +
                  '</ul>' +
              '</div>',
  });
  //创建一个组件
  Vue.component('todo-head',{
    props:['title'],
    template:'<div>{{title}}</div>',
  });
  //创建一个组件
  Vue.component('todo-content',{
    props:['item'],
    template:'<li>{{item}}</li>',
  });
  var vm = new Vue({
    el:"#one",
    data:{
      head_content:'这是个列表',
      items_content:['A','B','B'],
    }
  });
</script>
</body>
</html>

Vue自定义事件

//自定事件内部逻辑:使用事件A,事件A调用事件B,最终B调用C执行事件C

<!--自定义事件-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
  <todo>
    <todo-head slot="todo-head" v-bind:title="head_content"></todo-head>
    <todo-content slot="todo-content" v-for="(item,index) in items_content"
                  v-bind:item="item" v-bind:index="index" v-on:remove_b="removeItem(index)"></todo-content>
  </todo>
</div>
<script>
  /*  创建一个组件
  <slot name="todo-head"></slot> 使用slot绑定其他组件
  */
  Vue.component('todo',{
    template:'<div>' +
            '<slot name="todo-head"></slot>' +
            '<ul>' +
            '<slot name="todo-content"></slot>' +
            '</ul>' +
            '</div>',
  });
  //创建一个组件
  Vue.component('todo-head',{
    props:['title'],
    template:'<div>{{title}}</div>',
  });
  //创建一个组件
  Vue.component('todo-content',{
    props:['item','index'],
    template:'<li>{{item}}{{index}}<button v-on:click="remove">删除</button></li>',
    methods:{
      remove:function (index) {
        //自定事件内部逻辑:使用事件A,事件A调用事件B,最终B调用C执行事件C
        this.$emit('remove_b',index);
      }
    }
  });
  var vm = new Vue({
    el:"#one",
    data:{
      head_content:'这是个列表',
      items_content:['A','B','C'],
    },
    methods: {
      removeItem:function (index) {
        this.items_content.splice(index,1);
      }
    }
  });
</script>
</body>
</html>
posted @ 2021-08-08 20:32  争取做百分之一  阅读(29)  评论(0)    收藏  举报