Vue学习之基础及部分指令小结(一)

发布时间:2019-06-29 14:00:10发布者:Mr.Zhang阅读(1,533)

一、理解MVC和MVVM的关系: 

MVC:Model View Controller (模型 视图 控制器)

  分别为:业务逻辑、界面、用来调度View和Model层

MVVM:Model View ViewModel

    M:每个页面中单独的数据;

    V:每个页面中的HTML机构;

    VM:调度者,V从VM中获取数据,实现数据的双向绑定!

 

二、VUE代码实现MVVM:

前期为了理解VUE.JS,先采用引入的方式进行VUE的操作:

 

三、部分vue指令:

1、v-cloak:能解决插值表达式{{  }} 闪烁的问题,只会替代自己的占位符,不会把整个元素的内容清空;

2、v-text:默认没有闪烁问题的,但是会覆盖元素中原本的内容;

3、v-html:可以解析成HTML;

4、v-bind:是vue中,提供的用于(单向)绑定属性的指令,里面可以写合法的JS表达式,简写为:   ;

 5、v-on:事件绑定机制(可以绑定像点击事件一样);

6、v-if:元素是否移除或者插入(根据表达式的真假判断);

7、v-show:元素是否显示或者隐藏;

 8、methods:定义了当前vue实例所有可用的方法:

  (在定义的vue实例中,若要调用methods中的方法或要获取data上数据,需要this代表实例对象,实例会监听data中所有数据上的改变,只要一变化,就会自动把最新的数据,从data上同步到页面中去。这样程序员只需要关心数据,不需要考虑如同重新渲染DOM)

     var_this =this  (代表最初的对象)

  ES6:  箭头函数=> 表示其内部的this永远和外部的this保持一致。

9、事件修饰符:

stop:阻止冒泡;

prevent:阻止默认行为;

capture:添加事件侦听器时使用事件捕获模式;

self:只当事件在该元素本身(比如不是子元素)触发时触发回调;

once:事件只触发一次。

10、v-model:双向数据绑定(在表单元素中用如:input\select\checkbox)

四、vue中通过属性绑定为元素设置class类样式和style行内样式:

1、class样式:

①:数组样式;

②、三元表达式;

③、数组中嵌套对象;

④、直接使用对象;

2、style行内样式:

①、直接在元素上通过:style的形式,书写对象;

②、将样式对象,定义到data中,并直接引到:style中;

③、在;style中通过数组,引用多个data上的样式对象。

五、v-for:

1、v-for遍历,操作数组、对象;

<p v-for="count in 10">第 {{ count }} 循环 </p>
<p v-for="(val,key,i) in user">值是:{{ val }}--键是:{{ key }}--索引: {{ i }}</p>

in后面可以是数组、对象数组、对象、数字。

2、key属性只能使用number 获取String;

key在使用的时候,必须使用v-bind属性绑定的形式指定key值;

在组件中,使用v-for循环时,若有问题,必须在使用时,指定唯一的字符串/数字类型:key值。

<p v-for = "item in list " :key  = " item.id "> </P>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    
    <style>
      /* 自定义两组样式,来控制transition内部的元素实现动画 */
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.8s ease;
      }
      /* 自定义前缀 */
      .my-enter,
      .my-leave-to {
        opacity: 0;
        transform: translateY(150px);
      }
      .my-enter-active,
      .my-leave-active {
        transition: all 0.8s ease;
      }
      /* 定义动画小球 */
      .ball {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: red;
      }
    </style>
    <link rel="stylesheet" href="./lib/animate.css" />
  </head>
  <body>
    <div id="app">
      <p>{{ msg }}</p>
      <div v-text="msg2"></div>
      <div v-html="msg2">123123</div>
      <input
        type="button"
        value="按钮"
        :title="mytitle + '123'"
        v-on:click="show"
      />
      <input type="button" value="按钮1" @click="flag=!flag" /><br />
      <!-- transition元素,把被动画控制的元素包裹起来!固定的! -->
      <transition>
        <h3 v-if="flag">这是个会移动并且渐隐渐现的H3文字</h3>
      </transition>
      <input type="button" value="按钮2" @click="flag2=!flag2" /><br />
      <transition name="my">
        <h6 v-if="flag2">这是个会移动并且渐隐渐现的H6文字</h6>
      </transition>
      <br />
      <br />
      <br />
      <br />
      <br />
      <!-- 使用第三方的CSS实现动画 -->
      <input type="button" value="按钮3" @click="flag3=!flag3" /><br />
      <transition
        enter-active-class="bounceIn"
        leave-active-class="bounceOut"
        :duration="{ enter : 1000 , leave : 2000 }"
      >
        <h2 v-if="flag3" class="animated">这是个会蹦蹦跳跳的H2文字</h2>
      </transition>
      <!-- 跑马灯效果 -->
      <!-- 绑定点击事件 -->
      <br />
      <br />
      <br />
      <br />
      <br />
      <input type="button" value="浪起来" @click="lang" />
      <input type="button" value="低调" @click="stop" />
      <h4>{{ msg3 }}</h4>
      <h4>{{ msg4 }}</h4>
      <!-- 双向数据绑定v-model -->
      <input type="text" v-model="msg4" /><br />
      <!--计算器 -->
      <input type="text" v-model="n1" />
      <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model="n2" />
      <input type="button" value="=" @click="calc" />
      <input type="text" v-model="result" />
      <br />
      <br />
      <!-- 定义动画小球 -->
      <input type="button" value="快从碗里出去" @click="flag4=!flag4" />
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
      >
        <div class="ball" v-show="flag4"></div>
      </transition>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "欢迎学习",
          msg2: "<h1>哈哈!我是一个大大的H1</h1>",
          mytitle: "这是一个自己定义的title",
          msg3: "猥琐发育,别浪~~!",
          intervalId: null, //在data上定义 停止定时器ID
          msg4: "大家都是好学生!",
          n1: 0,
          n2: 0,
          result: 0,
          opt: "+",
          flag: false,
          flag2: false,
          flag3: false,
          flag4: false
        },
        methods: {
          show: function() {
            alert("hello");
          },
          lang() {
            //为防止越点越快,设定条件必须是在停止的条件下点击才开启定时器
            if (this.intervalId != null) return;
            //为了停止方便停止定时器,必须进行定义为this
            //加入定时器,为解决this指向问题,使用了ES6的箭头函数=>,表示前后的this一致
            this.intervalId = setInterval(() => {
              // conso le.log(this.msg3)
              //获取到头的第一个字符
              var start = this.msg3.substring(0, 1);
              //获取后面的
              var end = this.msg3.substring(1);
              //重新拼接
              this.msg3 = end + start;
            }, 400);
          },
          stop() {
            //停止定时器
            clearInterval(this.intervalId);
            //虽然停止了定时器但是没有给器重新赋值为Null
            //每当清除了定时器后,重新给器赋值为null
            this.intervalId = null;
          },
          calc() {
            //计算器算法
            // switch(this.opt){
            //     case'+':
            //         this.result=parseInt(this.n1)+parseInt(this.n2)
            //         break;
            //     case'-':
            //         this.result=parseInt(this.n1)-parseInt(this.n2)
            //         break;
            //     case'*':
            //         this.result=parseInt(this.n1)*parseInt(this.n2)
            //         break;
            //     case'/':
            //         this.result=parseInt(this.n1)/parseInt(this.n2)
            //         break;
            // }
            //投机取巧方式,开发中少有
            var codeStr = "parseInt(this.n1)" + this.opt + "parseInt(this.n2)";
            this.result = eval(codeStr);
          },
          beforeEnter(el) {
            el.style.transform = "translate(0,0)";
          },
          enter(el) {
            el.offsetwidth;
            el.style.transform = "translate(150px,400px)";
            el.style.transition = "all 1s ease";
            done();
          },
          afterEnter(el) {
            this.flag4 = !this.flag4;
          }
        }
      });
    </script>
  </body>
</html>

 





本文转自博客园,原文地址:https://www.cnblogs.com/21-forever/p/11104581.html