为了账号安全,请及时绑定邮箱和手机立即绑定

Vue(day1)

2019.01.12 11:42 1884浏览

一、起步

<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

开始从下面的几个Vue的使用场景中熟悉Vue:

  • 声明式渲染

<!DOCTYPE html><html><head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>
    <div id="app">
        {{ message }}    </div></body><script type="text/javascript">
    var app = new Vue({        el: '#app',        data: {            message: 'Hello Vue!'
        }
    });</script></html>

看起来就像是简单的模板渲染,但其实Vue已经做了大量工作,这个时候的数据和DOM已经是“响应式”

的了。可以打开浏览器控制台修改app实例,如app.message = 'Hello World!',然后你可以发现html页面也会随之变化。

  • 条件与循环

    使用Vue的指令v-if来决定是否创建该元素。

    <div id="app">
      <p v-if="seen">现在你能看到我</p></div>
    var app = new Vue({  el: '#app',  data: {      seen: true
      }
    });

    使用v-for指令来实现循环:

    <div id="app">
      <ul>
          <li v-for="list in lists">
              {{ list.text }}      </li>
      </ul></div>
    var app = new Vue({  el: '#app',  data: {      lists:[
              {text: '学习js'},
              {text: '学习vue'},
              {text: '学习...'}
          ]
      }
    });
  • 处理用户输入

    使用v-on指令为元素绑定指定事件:

    <div id="app">
      <p> {{message}} </p>
      <button v-on:click="reverseMessage">翻转字符串</button></div>
    var app = new Vue({  el: '#app',  data: {      message: '双向绑定'
      },  methods: {      reverseMessage: function(){          this.message = this.message.split('').reverse().join('');
          }
      }
    });

    使用v-model表单输入和应用状态之间的双向绑定:

    <div id="app">
      <p> {{message}} </p>
      <input type="text" v-model="message"></div>
    var app = new Vue({  el: '#app',  data: {      message: '双向绑定'
      }
    });
  • 组件化应用的构建

    具体请参考:组件化应用的构建

二、指令大全

Vue.js提供了一些指令来方便我们操作页面,而不用我们再去操作Dom,具体详情可移步官网:指令

v-text

更新元素的textContent。如果要更新部分textContent,需要使用 {{ Mustache }} 插值。

v-html

更新元素的innerHtml。注意内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

v-show

根据表达式的真假切换元素的display:none

v-if

根据表达式的真假决定是否创建(渲染)元素。

注意:当和 v-for 一起使用时,v-for 的优先级比 v-if 更高。

v-else & v-else-if

结合v-if使用。

v-for

使用特定语法alias in expression,多次渲染元素或模块。

可使用的表达式:Array | Object | number | string

v-model
  • 限制

    • 表单控件:input | texteara | selecte

    • 组件

  • 修饰符

    • .lazy:取代input监听change事件。

    • .number:将输入的字符串转化为数字。

    • .trim:将输入的字符串过滤掉首位空格。

  • 作用
    在表单控件或组件上创建双向绑定。

v-cloak

无表达式,v-cloak指令保持到元素结束编译,与css规则如:[cloak]:{display: none;}一起使用,使元素在编译完成前保持“影藏”状态。这样做的目的是,元素编译结束后再显示出来,可以解决页面编译渲染时出现的闪烁情况。

v-pre

无表达式,使用v-pre可跳过元素及其子元素的编译过程,加快渲染速度。

v-once

无表达式,使用v-once指令后元素只会编译渲染一次。这样可以在某些场景下提升性能。

v-bind
  • 作用

    为元素动态地绑定一个或多个特性(attributes + properties);或绑定一个组件的prop到表达式中。

  • 缩写::

  • 修饰符

    • .prop:被用来绑定DOM的property。(与attribute是有区别的

    • .camel:(2.1.0+) 将 kebab-case 特性名转换为 camelCase。

    • .sync: (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。

  • 特殊

    在绑定classstyle属性时支持数组或对象等特殊类型。

v-on
  • 作用

    为元素绑定事件监听。

  • 缩写:@

  • 期望

    Function | Inline Statement | Object

  • 修饰符

    • .stop - 调用 event.stopPropagation()

    • .prevent - 调用 event.preventDefault()

    • .capture - 添加事件侦听器时使用 capture 模式。

    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

    • .native - 监听组件根元素的原生事件。

    • .once - 只触发一次回调。

    • .left - (2.2.0) 只当点击鼠标左键时触发。

    • .right - (2.2.0) 只当点击鼠标右键时触发。

    • .middle - (2.2.0) 只当点击鼠标中键时触发。

    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

三、练习

我们可以通过一些实际的例子来熟悉一下Vue指令的相关用法。

文字跑马灯
  • 需求:让文字滚动起来。

  • 分析:要让文字达到滚动效果,就是随时间变化将字符串的末尾字符移动到头部,或是反过来。总结起来就是每隔一段时间操作一次字符串。另外需要一个按钮来控制文字的滚动效果。

  • 实现:

    <div id="app">
      <p>{{ message }} </p>
      <button @click="changeMessage"> {{ btn }} </button></div>
    var app = new Vue({  el: '#app',  data: {      message: '0123456789',      btn: '开始',      status: true,      intervalId: undefined
      },  methods: {      changeMessage: function(){          var THIS = this;
              THIS.status = !THIS.status;          if(!THIS.intervalId){
                  THIS.intervalId = window.setInterval(function(){
                      THIS.message = THIS.message.toString();//防止纯数字报错
                      var len = THIS.message.length;
                      THIS.message =  THIS.message.charAt(len-1) + THIS.message.slice(0, len - 1);
                  }, 1000);
              }          if(THIS.status){
                  THIS.intervalId = clearInterval(THIS.intervalId);
                  THIS.btn = '开始';
              }else{
                  THIS.btn = '暂停';
              }
          }
      }
    })
  • 利用表单双向绑定实现简单的计算器

    <div id="app">
      <input type="text" v-model="x" @input="calculate">
      <select v-model="smybol" @change="calculate">
          <option value="+" selected="true">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
      </select>
      <input type="text" v-model="y" @input="calculate">
      <input type="button" value="=" @click="calculate">
      <input type="text" v-model="value"></div>
    var app = new Vue({  el: '#app',  data: {      x: 0,      y: 0,      value: 0,      smybol: "+"
      },  methods: {      calculate: function(){          var THIS = this;          var x = window.parseFloat(THIS.x);          var y = window.parseFloat(THIS.y);          var S = x + THIS.smybol + y;
              THIS.value = window.parseFloat(eval(S));
          }
      }
    })
  • 使用v-bind动态修改元素classstyle

    • class

      <!DOCTYPE html><html><head>
          <title>Vue1</title>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
          <style type="text/css">
              .red{            color: #abc;
              }        .italic{            font-style: italic;
              }        .larg{            font-size: 30px;
              }    </style></head><body>
          <div id="app">
              <p>规则,就是用来打破的</p>
              <!--原生class写法-->
              <p class="red italic larg">规则,就是用来打破的</p>
              <!--v-bind场景一:使用数组-->
              <p :class="['red','italic','larg']">规则,就是用来打破的</p>
              <!--场景二:使用三元表达式-->
              <p :class="['red','italic',flag?'larg':'']">规则,就是用来打破的</p>
              <!--场景三:使用数组对象-->
              <p :class="['red','italic',{larg:flag}]">规则,就是用来打破的</p>
              <!--场景四:直接使用对象-->
              <p :class="{red:false, italic:true, larg:true}">规则,就是用来打破的</p>
              <!--动态绑定-->
              <p :class="app_class">规则,就是用来打破的</p>
          </div></body><script type="text/javascript">
          var app = new Vue({        el: "#app",        data: {            flag: false,            app_class: {red:true, italic:true, larg:true}
              }
          });</script></html>
    • style

      <!DOCTYPE html><html><head>
          <meta charset="utf-8">
          <title>Test</title>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body>
          <div id="app">
              <!--原生写法-->
              <h1 style="color: #abc;font-size: 30px;font-style: italic;">Jinx的含义就是Jinx.</h1>
              <!--使用对象-->
              <h1 :style="{color:'#217352','font-style':'30px','font-style':'italic'}">Jinx的含义就是Jinx.</h1>
              <!--使用数组-->
              <h1 :style="[{color:'#FF9800','font-style':'30px'},{'font-style':'italic'}]">Jinx的含义就是Jinx.</h1>
              <!--动态绑定-->
              <h1 :style="[sty1, sty2]">Jinx的含义就是Jinx.</h1>
          </div>
      
          <script type="text/javascript">
              var vm = new Vue({            el: "#app",            data: {                flag: false,                sty1: {color:'#aa9800','font-style':'30px'},                sty2: {'font-style':'italic'}
      
                  }
              });    </script></body></html>

作者:风之之

原文出处:https://www.cnblogs.com/fzz9/p/10256913.html 

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消