Vue笔记

Vue 笔记

  • 基本格式
var app = new Vue() （{     
    el: '#app',//绑定的元素id为‘app’  
    data: {
        //存放数据,与html直接绑定
        name：ZHANGSAN,
        age: 18
    },
    methods: {
        //存放函数
        onClick: function() {
            console.log('clicked');
        }
    }
}）；

  • 指令

    • v-model

      数据的双向绑定。

      • lazy、trim、number修饰符
        <div id="app">
      <input type="text" v-model.lazy="name">
      //惰性更新，只有当鼠标blur的时候，才更新。
      <input type="text" v-model.trim="age"> 
      //把用户输入的值前后空格去掉，优化数据库存储
      <input type="text" v-model.number="phone">
      //用于价钱、年龄等一切数字类型的数据，转换成数字类型
      {{name}}
  </div>
      • 类型 
          <div id="app">
      <label>
          男
          <input v-model="sex" value="male" type=“radio”>
          //用v-model替代name属性
      </label>
      <label>
          女
          <input v-model="sex" value="female" type=“radio”>
      </label>
      <textarea v-model="article"></textarea>
      <select v-model="from">
          <option value="1">北京</option>
          <option value="2">上海</option>
      </select>
      <select v-model="dest" multiple>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
      </select>
  </div>
  
  data: {
      sex: female，
      article： sfhusdigheyufdgisfvsvgd，
      from: 1，
      //select的默认值为1，即value值为1的北京。
      dest: []//多选select框的dest为数组
  }
  //input的type="checkbox",即复选框时，sex为一个数组，data: {sex: []},可取默认值[male]。

    • v-bind(省略为：)

      用于绑定数据和元素属性

      e.g.

      <style>
     .active {
          background: #a10;
     }
  </style>
  
  //传对象，active是要添加的类，值在css中定义，在isActive为true的时候添加。
  <a v-bind:class="{active: isActive}"></a>

  <a v-bind:class="klass" v-bind:href="url"><img v-bind:src="img"></a>
  
  data: {url: http://baidu.com,img:"xxxx",klass: btn btn-default，isActive: true}

    • v-show
      e.g. <span v-show="sex">性别：</span>
      //data里面没有sex，所以这个span标签不会显示。

    • v-if

      与v-show的功能类似。不同的是，假如v-if为false，该元素直接在DOM中被删除，而v-show只是将该元素隐藏起来，实际上这个元素永远存在，相当于display：none。

    • v-for

      专门用于迭代的指令。一般用于迭代对象组成的数组。

      e.g.

      <div id="app">
     <ul>
         <li v-for="food in foodList">{{food.name}}: ￥{{food.discount? food.price * food.discount : food.price}}</li>
         //三元运算符，假如discount存在，则返回打折后的价格，否则返回原价。
         //foodList是一个迭代的目标，food是里面的每一项，这每一项又是个字符串。
     </ul>
 </div>

      <script>
  var app = new Vue({      
    el: '#app',
    data: {       
       foodList: [
         {
            name: '葱',
             price: 10,
             discount: .5
         },
         {
             name: '姜',
             price: 5,
             discount: .8
          },
         {
             name: '蒜',
             price: 7
         },
       ],
       }
  })
 </script>

    • v-on（省略为@）

      用于绑定事件。

      e.g.

       <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick"></button>
 //绑定多个事件，当鼠标进入的时候，触发onEnter函数，鼠标出去的时候，触发onOut函数。

 <form v-on:keyup.enter="onKeyup" v-on:submit="onSubmit($event)">
 //当用户按下一个键且这个键是enter时，执行onKeyup函数。
 //$event是关键词，传的是事件对象。vue封装之后，可写成v-on:submit.prevent="onSubmit"。
     <input type="text">
     <button type="submit">提交</button>
 </form>

 methods: {
     onClick: function() {
         console.log('clicked');
     },
     onEnter: function() {
         console.log('mouse enter');
     },
     onOut: function() {
         console.log('mouse leave');
     },
     onSubmit: function(e) {
         //禁止浏览器的默认提交行为，将事件传进来
         e.preventDefault();
         console.log('Submitted');
     }，
     onKeyup: function() {
         console.log('entered');
     },
 }

    • 控制流指令v-if、v-else-if、v-else

      e.g.

        <div id="app>
      <div v-if="role == 'admin' || role == 'superAdmin'">
          管理员你好
      </div>
      <div v-else-if="role == 'hr'">
          待查看简历列表：
      </div>
      <div v-else>
          您没有权限访问此页面
      </div>
  </div>
  data: {role: 'hr'}

  • 自定义指令

      <style>
      .card {
          width: 200px;
          background: #ccc;
          padding: 10px;
          margin: 5px;
      }
  </style>

  <div> id="app">
      <div> v-pin：true.bottom.left="card1.pinned" class="card">
          <button @click="card1.pinned = !card1.pinned">定住/取消</button>
          hhhhhhhhh
      </div>
      <div> v-pin="card2.pinned" class="card">
          hhhhhhhhh
      </div>
  </div>

  Vue.directive('pin',function(el,binding) {
      var pinned = binding.value;
      var position = binding.modifiers;
      var warning = binding.arg;

      if(pinned) {
          el.style.position = 'fixed';

          for(var key in position) {
              if(position[key]) {
                  el.style[key] = '10px';
              }//key代表的就是top、bottom、left、right
          }
          if (waring == 'true') {
              el.style.background = 'yellow';
          }
      }
      else {
          el.style.position = 'static';
      }
  })//回调函数，el指vue会把pin指令所在的整个元素传进来,binding是一个对象，指指令传进来的值和其他基本信息，这里的pinned就是指令的绑定值：card1.pinned和card2.pinned。
  new.Vue({
      el:'#app',
      data: {
          card1:{
              pinned: false;
          }
          card2:{
              pinned: false;
          }
      )
  })

    binding: 一个对象，包含以下属性：

    name: 指令名，不包括 v- 前缀。

    value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。

    oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

    expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

    arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

    modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

  • 计算属性

    通过其他的数据算出新的数据，并且将新数据缓存下来，当其他的数据没有发生改变时，调用缓存的数据，大大优化性能，这也是跟methods不一样的地方，methods每次被调用都会重新计算。

    e.g.

<div id="app">
    <table border="1">
        <thead>
            <th>学科</th>
            <th>分数</th>
        </thead>
        <tbody>
            <tr>
                <td>数学</td>
                <td><input type="text" v-model.number="match"></td>
                //用number修饰符避免分数被当成字符串
            </tr>
            <tr>
                <td>物理</td>
                <td><input type="text" v-model.number="physics"></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" v-model.number="English"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>

var app = new Vue({
    el: '#app',
    data: {
        match: 90,
        physics: 85,
        English: 50,
    },
    computed: {
        sum: function () {
            return parseFloat(this.math) + parseFloat(this.physics) + parseFloat(this.English);
        }，//this指代实例化出来的app,parseFloat把字符转化为数字，此时可不用添加number修饰符。
        average: function() {
            return Math.round(this.sum / 3);
        }
    }
})

  • 全局和局部组件

    • 定义一个全局组件

        Vue.component('alert', {
  //第一个参数传的是组件在vue里面的名字
      template: '<button @click="on_click">弹弹弹</button>',
      methods: {
          on_click: function () {
              alert('HHH');
          }
      }
  });

      定义一个域，规定这个组件存放的位置，即生存空间。

        new Vue({
      el: '#seg1'
  });

      html

        <div id="seg1">
      <alert></alert>
  </div>

    • 定义一个局部组件

        new Vue({
      el: '#seg1',//将组件定义在sge1这个域里面作为局部变量。
      components: {
          alert: {
              template: '<button @click="on_click">'弹弹弹</button>',
              methods: {
                  on_click: function () {
                      alert('HHH');
                  }
              }
          }
      }
  })

      • 以上代码可写成下面的形式：

          var alert_component = {
      template: '<button @click="on_click">'弹弹弹</button>',
      methods: {
          on_click: function () {
              alert('HHH');
          }
      }
  };

  new Vue({
      el: '#seg1',
      components: {
          alert_component
      }
  })

  • 配置组件

    html

      <div id=app">
  <like></like>
  </div>

  <template id="like-temponent-tpl">
      <button :class="{liked: liked}" @click="toggle_like()">赞 {{like_count}}</button>
  </template>

    css

      <style>
      .liked {
          background: deeppink;
      }
  </style>

    js

      Vue.component(like',{
  template: '#like-temponent-tpl',
      data: function () {
          return {
              like_count: 10,
              liked: flase,
          }
      },
  methods: {
      toggle_like: function () {
          if (!this.liked)
              this.like_count++;
          else
              this.like_count--;
          
          this.liked = !this.liked;
      }
  }
  })

  • 组件通信

    • 父子通信

      e.g.

        <div id="app">
      <user username="hhh"></user>
      //修改username的值，动态改变href的路径。
  </div>

  Vue.component('user',{
      template: '<a :href="\'/user/\' + username"> {{username}}</a>',
      pros: ['username'],//传你需要传进来的东西，与html组件里的对应，这里对应html调用的user组件里的username
      methods: {
      
      }
  })  

  new Vue({el: '#app',})

    • 子父通信

      e.g.

        <div id="app">
      <balance></balance>
  </div>

  Vue.component('balance',{
      template: `
      <div>
          <show @show-balance="show_balance"></show>
          //当父组件收到子组件发出事件后，把默认为false的show-balance改成true。
          <div v-if="show">您的余额为0</div>
      </div>`，
      methods: {
          show_balance: function(data) {
              this.show = true;
              console.log('data:',data)
          }
      }
      data: function() {
          return {
              show: false,
          }
      }
  });
  Vue.component('show',{
      template： `<button @click="on_click()">显示余额</button>`，
      methods: {
          on_click () {
              this.$emit('show-balance',{a: 1,b: 2});//用于触发一个事件，在组件show上监听
          }
      }
  });

  new Vue({
      el: '#app',
  })

    • 任意及平行组件通信

      e.g.

        <div id="app">
      <hhh></hhh>
      <zzz></zzz>
  </div>

  var Event = new Vue();//事件调度器，调度每一条事件。

  Vue.component('hhh',{
  template: `
      <div>说: <input @keyup="on_change' v-model="i_said"/></div>
  `,
  methods: {
      on_change() {
          Event.$emit('hhh-said-something',this.i_said)
      }//用于触发事件，事件的名称是hhh-said-something，第二个参数是传递hhh说话的内容。            
  }
  data: function() {
      return {
          i_said: '',
      }
  }

  })

  Vue.component('zzz',{
  template: `<div>hhh说：{{hhh_said}}</div>`,
  data: function() {
      return {
          hhh_said: '',
      };
  }
  
  //生命周期，挂载完成。初始化完毕。用于监听on_change
  mounted: function () {
      var me = this;//用一个变量缓存指代
      Event.$on('hhh-said-something',function (data){
          me.hhh_said = data;
      });
  }

  })

  • 过滤器（优化用户体验）

    e.g.

      <div id="app">
      {{ price | currency('USD') }}
      //过滤器的名字为currency，把价格传到过滤器里面,price相当于一个默认参数，对应val，USD是第二个参数，这里对应unit。
  </div>

  Vue.filter('currency',function(val,unit) {
      val = val || 0;
      unit = unit || 元；
      return val + unit；
  })

  new Vue({
      el:'#app',
      data: {
          price: 10,
      ]
  })

  • 混入mixins

    重复功能和数据的储存器。定义了一部分可复用的方法或者计算属性。

    e.g.

      var base = {
      methods: {
          show: function() {
              this.visible = true;
          },
          hide: function() {
              this.visible = false;
          },
          toggle: function() {
              this.visible = ！this.visible;
          },
      }
      data: function() {
          return {
              visible： false，
          } 
      }
  };
  
  Vue.component('tooltip',{
      template: `
      <div>
          <span @mouseenter="show" @mouseout = “hide”>ahhh</span>
          <div v-if="visible">
              啊哈哈哈
          </div>
      </div>
      `,
      mixins: [base],
      data: function() {
          return {
              visible: true,
          }
      }//覆盖mixins，相当于继承和重写
  });

  Vue.component('popup',{
      template: `
      <div>
          <button @click="toggle">popup<button>
          <div v-if="visible">
              <span @click="hide">X</span>
              <h4>title</h4>
              hhhhhhhhhhhhhh
          </div>
      </div>
      `,
      mixins: [base],
  });

  new Vue({
      el: '#app',
      data: {}
  })

  • 插槽slots

      .panel {
      max-width: 300px;
      border: 1px solid #999;
      margin-bottom: 15px;
  }

  .panel > * {
      padding: 15px;
  }

  .panel .title {
      border-bottom: 1px solid #999;
  }

  .panel .footer {
      border-bottom: 1px solid #999;
  }

  <div id="app">
      <panel>
          <div slot="title">我是题目</div>
          <div slot="content">我是内容</div>
          <div slot="footer">查看更多</div>
          //对应slot里的内容
      </panel>
  </div>

  <template id="panel-tpl">
      <div class="panel">
          <div class="title">
              <slot name="title"></slot>/
          </div>
          <div class="content">
              <slot name="content"></slot>
          </div>
          <div class="footer">
              <slot name="footer">更多信息</slot>
              //可以添加一个默认值“更多信息”
          </div>
      </div>
  </template>

  Vue.component('panel',{
  
  })

  new Vue({
      el: '#app',
      data: {}
  })···

  • 例子

<div id="app">
    <div>
        <input type="text" v-model="name">
        <span v-show="name">你的名字是：{{name}}</span>
    </div>
    <div>
        <input type="text" v-model="age">
        <span v-show="age">你的年龄是：{{age}}</span>
    </div>
    <div>
        <input type="text" v-model="sex">
        <span v-show="sex">你的性别是：{{sex}}</span>
    </div>
</div>



<script>
    var app = new Vue({
        el: #app,
        data: {
            name: ZHANSGAN,
            age: 18           
        }
    })
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue笔记
    ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,973评论 1赞 4
  • Vue笔记
    VUE介绍 Vue的特点构建用户界面，只关注View层简单易学，简洁、轻量、快速渐进式框架 框架VS库库，是一封装...
    多多酱_DuoDuo_阅读 2,742评论 1赞 17
  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0赞 29
  • 第七章：vue.js组件详解Ⅰ（基础篇）
    组件（Component）是Vue.js最核心的功能，也是整个架构设计最精彩的地方，当然也是最难掌握的。...
    六个周阅读 5,652评论 0赞 32
  • vue笔记
    笔记 1.定义变量（{}）；最后有分号 //var a=new Vue({ })需要写入括号 //el：元素未加 ...
    一壶清酒醉风尘阅读 175评论 0赞 0