vue

es6

react

 

npm init vue@latest

  cd bb
  npm install
  npm run dev

 

属性绑定 ：v-bind  简写：

：title

:  class

：id

 

 

 

 

条件渲染

频繁切换：使用v-show效率高

实质：display隐藏或显示

v-show

实质：销毁与重建

v-if

v-else-if

v-else

 

列表渲染

可以使用 of 作为分隔符来替代 in

 

<li v-for="(value, index) in myObject"> {{ index}}: {{ value }} </li>

v-for遍历数组（2个参数）（属性值，下标）

 

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

 

<li v-for="item in items">
  {{ item.message }}
</li>

第二个参数：表示当前项的位置索引。

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

 

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for遍历对象（3个参数）（属性值，属性名，下标）

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

 

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

 

第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

 

通过key管理状态

重新排序元素

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

 

展示过滤或排序后的结果

组件上使用 v-for

 

事件处理

v-on 缩写 @

内联事件处理器

data() {
  return {
    count: 0
  }
}

 

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

 

方法事件处理器

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

 

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // 方法中的 `this` 指向当前活跃的组件实例
    alert(`Hello ${this.name}!`)
    // `event` 是 DOM 原生事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}

 

事件传参

获取事件对象(e.target)

  <button @click="addCount">add</button>

    <p>{{ count }}</p>

 

data(){

    return{

    count: 0

    }

},

    methods: {

        //event对象

        addCount(e){

           e.target.innerHTML ="ADD"+this.count

           this.count++

        }

    }

}

 

事件传参（获取列表中的内容）

<p @click="getNameHandler(item)" v-for="(item,index) in names" :key="index">{{ item }}</p>

 

data(){

    return{

    names:["sd", "ff", "vf"]

    }

},

    methods: {

        //event对象

        getNameHandler(msg){

          console.log(msg);

        }

    }

}

 

 

事件传参，获取事件（$event）

<div @click="getNameHandler(item,$event)" v-for="(item,index) in names" :key="index"><p>{{ item }}</p></div>

 

data(){

    return{

    names:["sd", "ff", "vf"]

    }

},

    methods: {

        getNameHandler(msg,e){

          console.log(msg);

          console.log(e.target.tagName);    //获取离item最近的标签名

        }

    }

}

事件修饰符 .

 

                         

阻止默认事件 

  e.preventDefault()//阻止默认事件

 <a @click="clikeHandler" href="www.baidu.com">百度</a>

 

 data(){

     return{

     }

    },

    methods:{

    clikeHandler(e){

        e.preventDefault();

        console.log('click');    

    }

} 

   事件修饰符 . prevent

  <a @click.prevent="clikeHandler" href="www.baidu.com">百度</a>

 

data(){

     return{

           

     }

    },

    methods:{

    clikeHandler(e){

        console.log('click');    

    }

}

 

阻止事件冒泡

  e.stopPropagation();

<div @click="clikDiv">

    <p @click="clikP">测试冒泡</p>

  </div>

 

 data() {

    return {};

  },

  methods: {

    clikeHandler(e) {

      console.log("click");

    },

    clikDiv(e) {

      console.log("div");

    },

    clikP(e) {

      e.stopPropagation();

      console.log("p");

    }

  }

事件修饰符 . stop

  <div @click="clikDiv">

    <p @click.stop="clikP">测试冒泡</p>

  </div>

 

 data() {

    return {};

  },

  methods: {

    clikDiv(e) {

      console.log("div");

    },

    clikP(e) {

      console.log("p");

    }

  }

此外还有很多修饰符，请参考官方文档。

数组变化侦测

变更方法

push()，pop()，shift()，unshift()，splice()，sort()，reverse()

替换一个数组

filter()，concat()，slice()    (UI)不会改变原数组

 

 

 

 <button @click="addListHandle">添加数据</button>

    <ul>

        <li v-for="(item,index) in list" :key="index">{{item}}</li>

    </ul>

 

 

 data(){

    return{

    list:[1,2,3]}

    },

    methods:{

            addListHandle(){

                //会引起UI自动更新

                this.list.push("aaa")

                //不会引起UI自动更新                  //需要赋值给原数组UI才会自动更新

                this.list.concat("ddd")

                //会引起UI自动更新

                this.list=this.list.concat(["df"])

            }

       

        }