vue基础语法

1、Vue基础语法

1.1、Vue内置指令

1.1.1、插值

v-text

<template>
  <div>
      <div v-text="msg"></div>
  </div>
</template>

<script>
export default {
    data(){
      return {
       msg: 'hello'
      }
    }
}
</script>

对 data 中的变量值输出，和{{…}}` 模板语法类似。

v-html

<template>
  <div>
      <div v-html="msg"></div>
  </div>
</template>

<script>
export default {
    data(){
      return {
       msg: '<font color=red>hello</font>'
      }
    }
}
</script>

可以对字符串值中的 html 标签内容进行渲染。

1.1.2、条件渲染

v-if / v-else-if

<template>
  <div>
      <div v-if="age > 10">少年</div>
      <div v-else-if="age <= 10">儿童</div>
  </div>
</template>

<script>
export default {
    data(){
      return {
       age: 10
      }
    }
}
</script>

该指令和 javascript 中的判断用法一致，其中 v-else-if 不能单独使用，必须要配合 v-if ，并且要放到 v-if 后面。

v-else

<template>
  <div>
      <div v-if="course > 60 && course <= 100">及格</div>
      <div v-else>不及格</div>
  </div>
</template>

<script>
export default {
    data(){
      return {
        course: 100
      }
    }
}
</script>

v-else 用法和 javascript 中的判断用法一致，必须要跟在 v-if 或 v-else-if 后面，不能单独使用。 v-else 没有值。

v-show

<template>
  <div>
      <div v-show="isShow">Hello</div>
  </div>
</template>

<script>
export default {
    data(){
      return {
        isShow: true
      }
    }
}
</script>

v-show 只是用于显示，值为布尔表达式。

v-if和v-show的区别

v-if 和 v-show 都是用于作为条件渲染的指令，值都是为布尔表达式，值为 true 时显示，值为 false 时不显示；

二者的不同点是：

• v-if 的值为 false 时，浏览器不会渲染该指令修饰的标签；
• v-show 的值为 false 时，是通过 css 样式中的 display:none 来控制元素的显示状态；
• 在使用时，如果元素需要频繁做显示与隐藏操作，优先使用 v-show，以此来节省性能。

1.1.3、列表渲染

v-for渲染数组

普通数组渲染

<template>
  <div>
      <!-- item为数组中遍历出来的每个元素，index是遍历出来的下标 -->
      <p v-for="(item,index) in list" :key="index">
        {{index}} - {{item}}
      </p>
  </div>
</template>

<script>
export default {
    data(){
      return {
        list: ['html','css','js']
      }
    }
}
</script>

渲染对象元素的数组

<template>
  <div>
      <p v-for="(item,index) in list" :key="index">
        姓名：{{item.name}} <br />
        年龄：{{item.age}}
      </p>
  </div>
</template>

<script>
export default {
    data(){
      return {
        list: [
          {
            name: 'tom',
            age: 10
          },
          {
            name: 'jack',
            age: 12
          }
        ]
      }
    }
}
</script>

v-for 渲染对象

<template>
  <div>
    <!-- value表示对象中的值，key表示对象中的属性名 -->
    <p v-for="(value,key) in user" :key="key">{{key}}：{{value}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "tom",
        age: 10,
        sex: "男"
      }
    }
  }
}
</script>

v-for 渲染整数

<template>
  <div>
    <p v-for="i in 10" :key="i">{{i}}</p>
  </div>
</template>

1.1.4、属性绑定

v-bind

<template>
  <div>
    <a :href="url" v-bind:title="title">{{name}}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '百度',
      url: 'http://www.baidu.com',
      title: '百度一下，你就知道'
    }
  }
}
</script>

v-bind 可以绑定所有 html 标签上的属性，以及自定义组件标签的所有属性。简写使用冒号 : 即可。

class和style样式绑定

class样式绑定：

<template>
  <div>
    <!-- 使用数组的结构，绑定多个样式 -->
    <span :class="['active','bold']">Hello</span>
    <!-- 使用对象的结果，设置是否绑定某个样式 -->
    <span :class="{active:isActive, bold:false}">World</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

<style scoped>
.active{
  color: red;
}
.bold{
  font-weight: bold;
}
</style>

style样式绑定：

<template>
  <div>
    <button @click="size += 5">字体变大</button>
    <div :style="{color: 'red', fontSize: size+'px'}">Hello World!</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 16
    }
  }
}
</script>

style 属性绑定后，值为对象类型，键值的书写方式参考 javascript 对象的规范。

1.1.5、事件绑定

v-on

<template>
  <div>
      {{num}}
      <button v-on:click="num++" @mouseenter="handleEnter($evnet)">{{title}}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      title: '鼠标放到这里'
    }
  },
  methods: {
    handleEnter(e){
      // 参数e为事件对象 event
      console.log(e)
      this.title = '点击一下'
    }
  }
}
</script>

v-on 为事件绑定，可以绑定所有的 html 原生事件，简写 @ 。事件函数中使用 $event 可以把当前元素的事件对象传给事件函数。

事件修饰符

• .stop ：阻止事件冒泡；
• .prevent ：阻止浏览器的默认事件；
• .self ：只有触发元素本身时才执行事件函数，冒泡传递的触发无效；
• .once ：该元素上绑定的事件只允许执行一次；
• .capture ：设置事件冒泡序列中事件函数执行的优先级；
• .passive ：取消对 preventDefault() 函数的监听，一般用于优化移动端事件的性能问题；

按键修饰符

• .enter ：回车修饰符
• .space ：空格修饰符
• .esc ：ESC键修饰符
• .up/.down/.left/.right ：方向键修饰符

1.1.6、表单绑定

v-model

输入框

<template>
  <div>
      <!-- 文本输入框 -->
      <input type="text" v-model="text">
      <!-- 文本域 -->
      <textarea v-model="text" cols="30" rows="10"></textarea>
      <p>{{text}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

复选框

<template>
  <div>
      <input type="checkbox" value="1" v-model="nums"> 1
      <input type="checkbox" value="2" v-model="nums"> 2
      <input type="checkbox" value="3" v-model="nums"> 3
      <input type="checkbox" value="4" v-model="nums"> 4
      <p>{{nums}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nums: []
    }
  }
}
</script>

下拉框

<template>
  <div>
     <select v-model="xl">
       <option value="">请选择</option>
       <option value="大专">大专</option>
       <option value="本科">本科</option>
       <option value="研究生">研究生</option>
     </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xl: ''
    }
  }
}
</script>

单选按钮

<template>
  <div>
     <input type="radio" v-model="sex" value="男">男
     <input type="radio" v-model="sex" value="女">女
  </div>
</template>

<script>
export default {
  data() {
    return {
      sex: '男'
    }
  }
}
</script>

1.2、Vue基础选项

1.2.1、computed计算属性

<template>
  <div>
     {{parseDate}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '2020-11-05'
    }
  },
  computed:{
    parseDate(){
      let arry = this.date.split('-')
      return `${arry[0]}年${arry[1]}月${arry[2]}日`
    }
  }
}
</script>

使用计算属性，通过一系列运算后得到新的值，用法和 methods 类似，但是有所不同，当计算属性返回的值发生变化时才重新运算，如果返回的值没有变化，会使用缓存，比 methods 性能高。

1.2.2、watch监听器

<template>
  <div>
     {{num}}
     <button @click="num++">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
  watch: {
    num(newNum,oldNum){
      console.log(newNum,oldNum)
    }
  }
}
</script>

如果要监听的属性是一个对象的话，要使用深度监听，代码如下：

<template>
  <div>
     {{obj.num}}
     <button @click="obj.num++">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        num: 0
      }
    }
  },
  watch: {
    obj:{
      handler(o1){
        console.log(o1)
      },
      deep: true
    }
  }
}
</script>

1.2.3、filter过滤器

<template>
  <div>
     {{date | dateFilter1 | dateFilter2}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '2020-11-05'
    }
  },
  watch:{
    date(str){
      //此处没有执行，证明过滤器对原始数据没有做修改
      console.log(str)
    }
  },
  filters: {
    dateFilter1(date){
      let arry = date.split('-')
      return arry
    },
    dateFilter2(arry){
      return arry.toString()
    }
  }
}
</script>