VUE框架进阶一

    <div id="app">
      <div class="box" :class="{active:isActive}" >hi</div>
      <button @click="changeClick">切换</button>
    </div> 
    <script type="text/javascript">
      var vue=new Vue({
          el:'#app',
          data:{
            isActive:false,
          }, 
          methods:{
            changeClick(){
              this.isActive=!this.isActive
            }
          }     
      })
    </script>
<style>
  .box{
   width: 200px;
   height: 200px;
   background-color: red;
  }
  .active{
    background-color: green;
  }
</style>

3.4 vue的事件修饰符

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

可以直接看官网的事件修饰符，蛮简单的这一块。

事件监听的好处：

1.代码易读、易定位。

2.无需再自己写自己写逻辑处理，直接交给vue处理。和DOM完全解耦，可测性高。

3.自动销毁机制。

3.5 vue的v-for列表渲染

v-for='index，循环取数 in 数组' 不建议在v-for里使用index作为key。因为vue发现key相同的话就不会再更新DOM了。

例：循环数组

 <div id="app">
     <ul>
       <li class="li" v-for=' (item,index) in listMenu'>
         {{item.name}}
         {{index}}
       </li>
     </ul>
    </div> 

      var vue=new Vue({
          el:'#app',
          data:{
            listMenu:[
              {id:1,name:"列表1"},
              {id:2,name:"列表2"},
            ]
          }, 
           
      })

遍历对象：

    <div id="app">
     <ul>
       <li v-for='(val,key) in obj'>
         {{key+val}}
       </li>
     </ul>
    </div> 
      var vue=new Vue({
          el:'#app',
          data:{
            obj:{
            title:"hellod world",
            name:"jack"
          } 
          },
         
      })

attention：当使用v-for的时候一定要给每一个这个元素添加一个:key属性唯一，尽量绑id，因为index可能会出错，理由同上。使用:key的原因是跟踪每一个节点的身份，从而DOM对这个元素再次操作的时候不用再每一条数据都追踪，只用追踪对应的这一条数据。这样会高效。

3.6 v-model的双向数据绑定

例：

页面显示如下：

当更改视图里的hello world时，对应着的数据层里的也会更改。当然更改数据层里的数据视图肯定会跟着改变。

4.侦听器watch的使用

4.1普通监视：

watch:{

'msg':function(newV,oldV) {

console.log(oldV,newV);

}

key：msg是data的属性名，value是监视后的行为。newV：新值、oldV：旧值。

4.2深度监视：Object/Array

当数据为复杂数据类型时就可以使用到深度监视

例：

 <div id="app">
       <button @click='checkedNames[0].name="Tom"'>Tom</button>
    </div> 
      var vue=new Vue({
          el:'#app',
          data:{
           msg:"",
           checked:false,
           checkedNames:[{id:1,name:"Jack"}],
          },
          watch:{ 
            "checkedNames":{
              deep:'true',
            handler:function(newV,oldV) {
              console.log(newV[0].name);
            }
            }      
          }
      })

此时可以监听到数组的变化。

5.计算属性computed

因为用插值表达式对于一些复杂的计算很麻烦，所以这里可以用到简便的computed计算。

computed计算默认只有getter方法。监听计算属性。

例：这样就能实现反转。

    <div id="app">
     <p>{{reverseMsg}}</p>
    </div> 
      var vue=new Vue({
          el:'#app',
          data:{
           msg:"hello world",
          },
          computed:{
            reverseMsg:function() {
              return this.msg.split('').reverse().join('');
            }
          }
      })

最大的优点：能产生缓存，如果数据没有发生变化那就直接从缓存中取。如果数据发生变化就重新计算重新渲染。如果不用计算属性的话，就会重新渲染整个页面，这样性能是不是就更低了。如果页面有大量数据，那是不是性能就更更更低了？

6.计算属性setter方法

简单，不赘述

7 过滤器filter

作用：数据展示更精准。

分为局部和全局的过滤器

局部在每一个实例里使用，不加赘述

全局：

/* 全局，注意没有s */

Vue.filter('过滤器名字',((对应value值)=>{

这里对value值进行操作

}))

EveRockYuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE框架进阶一

1.打包工具：webPack，Gulpvue.js react.js angular.js合称前端三大主流框架。vue注重于构建用户界面的框架，只关注视图层（MVC-V这层），可以和第三方库兼容。框架好处：开发效率高、原生JS（兼容性低）-》（jQuery 解决兼容性，开发模式写法较复杂）-》（前端模板引擎（生成DOM，不再渲染页面。解决写法复杂））=》（angular.js/vue.js（减少不必要的DOM操作，提高渲染效率，双向绑定））框架和库的区别：框架：完整的解决方案，对项目
复制链接

扫一扫