vue基础(1)

一、vue中常用的指令

1.内容绑定，事件绑定

v-text:设置标签的内容(textContent),默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

v-html:设置元素的innerHTML,内容中有html结构会被解析为标签

v-on:为元素绑定事件，事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据

v-on补充:事件绑定的方法写成函数调用的形式，可以自定义传入参数

//doit是methons中的方法
<input type="button" @click = "doit(34,'fuck')" value="点我打印">

事件的后面跟上.修饰符可以对事件进行限制，.enter可以限制触发的按键为回车

//say是methods里面的方法
<input type="text" @keyUp.enter = "say">

v-if:根据表达式的真假切换元素的显示状态，本质是通过操纵Dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除

v-show:操纵元素的状态，利用display:none属性设置元素是否显示

v-bind:为元素绑定属性，完整的写法是v-bind:属性名，简写的话可以直接省略v-bind,只保留:属性名，需要动态的增删class建议使用对象的方式

v-for:根据数据生成列表结构，经常和数组结合使用，语法（item,index）in 数据，item和index可以结合其它指令一起使用，数组长度的更新会同步到页面上，是响应式的

v-model:便捷的设置和获取表单元素的值，绑定的数据的值会和表单元素相关联，双向绑定

计数器案例

• data中定义数据num
• methods中添加两个方法:比如count(递增)，reduce(递减)
• 使用v-text将num设置给li标签
• 使用v-on将cound,reduce分别绑定给+，-按钮
• 当数字减少到0时不再减少

<div id="app">
        <ul>
            <li class="first" @click="count">+</li>
            <li class="second">{{num}}</li>
            <li class="last" @click="reduce">-</li>
        </ul>
    </div>

let app = new Vue({
            el:"#app",
            //计数器中间的数据
            data:{
                num:0
            },
            //计数器涉及到的方法
            methods:{
                //控制数量增加
                count:function(){
                    this.num+=1
                },
                //控制数字减少，且数字不会降为负数
                reduce:function(){
                    this.num-=1
                    if(this.num<0){
                        this.num = 0
                    }
                }
            }
        })

图片切换案例

<div id="app" >
        <!-- 向后切换图片的按钮 -->
        <button @click = "preview">图片切换</button>
        <img :src="imgSrc[index]" alt="" @click="imgChange">
    </div>

#app{
            display: flex;
            width: 400px;
            height: 400px;
            background-color: pink;
            align-items: center;
            
        }
        img{
            margin: 0 auto;
            width: 300px;
            height: 350px;

let app = new Vue({
            el:"#app",
            data:{
                //保存图片地址的数组
                imgSrc:["C:/Users/abc/Pictures/Saved Pictures/刻情.png","C:/Users/abc/Pictures/Camera Roll/preview.jpg"],
                index:0
            },
            methods:{
                // 向前切换图片的函数
                imgChange:function(){
                    this.index+=1
                    if(this.index>=this.imgSrc.length){
                        this.index = this.imgSrc.length-1
                    }
                },
                //向后切换图片的函数
                preview:function(){
                    this.index-=1
                    if(this.index<0){
                        this.index = 0
                    }
                }
            }
        })

属性绑定

属性绑定就是使用vue中的v-bind指令来绑定属性的值

<div id='app'>
    //利用v-bind绑定图片的路径，将图片的地址变成一个变量
    <img v-bind:src="img1">
    //利用v-bind绑定a标签的的路径
    <a v-bind:href="baidu">百度</a>
	<img :src="img1" >
</div>
<script>
        new Vue({
        el: '#app',
        data: {
          baidu:"http://www.baidu.com/index.html",
          img1:"地址"		
        }
    })

</script>

二、事件绑定

1.事件绑定的指令

v-on:“事件函数名”,函数传参时就带括号，不传参时都可以

v-on也可以简写成@，例如

<button @click="fn"></button>

2.事件的this

let vm = new Vue({
    el:'选择器',
    data:{
        
    },
    methods:{
        fn(){
            //这里的this指的是vm这个实例对象
            console.log(this)
        },
        fn2:()=>{
            //这里的this指向windows对象
            console.log(this)
        }
    }
})

3.事件修饰符

语法：@事件名.事件修饰符

stop：阻止冒泡

capture：事件在捕获阶段执行

prevent：阻止默认行为

once：事件只触发一次

self：只有e.target是自身才触发事件

事件修饰符也可以链式调用

语法：@事件名.事件修饰符.事件修饰符，但是逻辑不能冲突

三、样式绑定

1.class样式绑定

• class的值可以是数组

  <style>
  	.box1{样式}
  	.box2{样式}
  </style>
  <div :class="["box1","box2"]">
  </div>
  

• class的值可以是变量

  //这里的box是vue实例data里面的属性
  <div :class="box">
  </div>
  

• class的值可以是对象

  //对象的键名是类名，值是布尔值，代表是否使用该类的样式
  <div :class="{box1:true,box:true}">
  </div>
  

2.style样式绑定

• style的值可以是对象并且对象的值可以是变量

  <div :style="{color:'red',width:'200px'}">
      777
  </div>
  

• style的值可以是变量

  <div :style="box">
      777
  </div>
  //vue实例中的data
  data:{
      box:{
          color:'red',
          width:'200px'
      }
  }
  

• style的值可以是数组

  <div :style="[box1,box2]">111111</div>
  //vue实例中的data
  data:{
      box1:{
          color:'red',
          width:'200px'
      },
      box1:{
          backgroundColor:'blue'
      },
  }