Vue复习（1）

1.初识vue

1.引入vue

<script src="./vue.js"></script>

2.第一个vue实例

const  vm = new Vue({
	el:"#app",
    data:{
        username:"carlos",
        age:20
    }
})

2.vue指令

1.内容渲染指令

1.v-text

• 会覆盖元素内部原有的内容

<template>
	<div id="app">
    <h2 v-text="username"></h2>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        username:"carlos",
        age:20,
        gender:"male"
    }
})
</script>

2.{{}}

<template>
	<div id="app">
    <h2>性别：{{gender}}</h2>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        username:"carlos",
        age:20,
        gender:"male"
    }
})
</script>

3.v-html

<template>
	<div id="app">
    <div v-html="info">
        
    </div>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        username:"carlos",
        age:20,
        gender:"male",
        info:"<h4>hello vue!</h4>"
    }
})
</script>

2. 属性绑定指令

1. 介绍

• v-bind属性绑定指令可以为标签的属性动态绑定值
• 可以简写 v-bind:src==:src

2. v-bind使用

<template>
	<div id="app">
      <img v-bind:src="photo"/>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        src:"http://www.taobao/logo.png"
    }
})
</script>

3. 事件绑定指令

1. 介绍

• vue提供 v-on指令为元素绑定事件监听
• v-on可以

2.v-on使用

1.不传参

<template>
	<div id="app">
      <h2>{{count}}</h2>
      <button @click="addCount">+1</button>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        count:0
    },
    methods:{
        addCount(){
            this.count++
        }
    }
})
</script>

2.传参

<template>
	<div id="app">
      <h2>{{count}}</h2>
      <button @click="addCount(n)">+n</button>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        count:0
    },
    methods:{
        addCount(n){
            this.count+=n
        }
    }
})
</script>

3.事件对象参数

<template>
	<div id="app">
      <h2>{{count}}</h2>
        <!-- 在参数中$event是事件对象参数，可以在参数的任意位置 -->
      <button @click="addCount(n,$event)">+n</button>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        count:0
    },
    methods:{
        addCount(n){
            this.count+=n
        }
    }
})
</script>

3.事件修饰符

• 在事件之后添加一些事件修饰符可以阻止一些默认事件
• 常见五种事件修饰符
  • prevent 阻止默认事件
  • stop 阻止事件冒泡
  • capture 捕获模式触发事件处理函数
  • once 绑定的事件只触发一次

<template>
	<div id="app">
      <a href="#" @click.prevent="add"></a>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    methods:{
		add(){
            console.log("add")
        }
    }
})
</script>

4.按键修饰符

<template>
	<div id="app">
      <input @keyup.enter="submit" />
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    methods:{
		submit(){
            console.log("发送成功")
        }
    }
})
</script>

4. 双向数据绑定

1.介绍

• v-model双向数据 绑定数据指令，用于辅助开发者在不操作DOM的前提下，快速获取表单数据

2.使用

<template>
	<div id="app">
      <input v-model="username" />
      <input v-model="password" />
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        username:"",
        password:""
    }
})
</script>

3.修饰符

• number 将数据转化为数字
• trim 去掉值首尾空格
• lazy 在数据输入完毕失去焦点的时候才更新数据，不会实时更新数据

5.条件渲染指令

1.v-if

• 动态移除或创建DOM节点

  <template>
  	<div id="app">
        <p v-if="me">我被展示了</p>
      </div>
  </template>
  
  <script>
  const  vm = new Vue({
  	el:"#app",
      data:{
          me:true,
      }
  })
  </script>
  

2. v-show

• 动态添加或移除display:none;

6.列表渲染指令

1.介绍

• v-for用于基于一个数组渲染一个列表结构

2.使用

<template>
	<div id="app">
        <!--
			这里的item是列表的每一项
			index是 每一项的索引
		-->
      <h2  v-for="(item,index) in list" :key="item.id">{{item.username}}</h2>
    </div>
</template>

<script>
const  vm = new Vue({
	el:"#app",
    data:{
        list:[
            {id:001,username:"carlos",age:20},
            {id:002,username:"lisa",age:19},
            {id:003,username:"jennie",age:20},
            {id:001,username:"rose",age:18},
        ]
    }
})
</script>

3.注意

• 当列表渲染之后，自身的属性也可以访问到item，所以可以指定key为每一项的id