vue的基本操作和用法

关于vue的引入和下载官网都有,可以按照自己需要的版本引入,这里只是个人的学习笔记,记录学习过程,更详细全面还要去vue文档查阅。

vue的基本使用

{{}}的内部可以实现表达式的计算,不过只能实现一个,三元表达式的判断也能实现,也可以调用methods里面的方法

<div id="app">{{ msg }}</div><!-- 要操作的位置以及插入数据的方法{{ 数据 }} -->
<script>
  let vm = new Vue({
    el: '#app',//el是要操作的位置
    data: {//data里面存放数据
      msg: 'massage'
    },
     
    methods: {//methods里面存放方法
      method() {

      }
    }
  })
</script>

指令的用法

v-text && v-html

直接在指令后面插入数据到标签中,功能和双花括号一样,不过这种方法会直接覆盖标签中的内容,渲染表达式时不会出现闪动。
v-text不能解析标签,会将所有元素展示出来。
v-html可以解析html标签,并在解析后展示,但是这种指令容易被跨域脚本攻击,所以使用需谨慎,原则是在同源请求时使用,非同源不使用。

<div v-text="msg1 + msg1">123</div>
<div v-html="msg1 + msg2">123</div>

v-cloak

用来解决处理渲染中表达式时的闪动

<style>
  [v-cloak] {
    display: none;
  }
</style>
<div id="app" v-cloak>{{ msg + msg1 }}</div>

v-model与双向数据绑定

双向绑定表单中的数据,即表单中数据改变,data中数据也会改变,data中数据改变,也会影响页面中展示的数据。
可用于input表单,select下拉表单,多选表单,单选和复选框,以及文本域textarea 代码示例查阅文档来了解如何获取不同表单的内容

  • 原理
    通过动态绑定value属性来让触发事件后的值覆盖原来的值,达到双向绑定的目的
<div id="app">
  <div>{{msg}}</div>
  <!-- 实例效果相同 -->
  <input type="text" :value="msg" @input='handle'>
  <input type="text" :value="msg" @input='msg=$event.target.value'>
  <input type="text" v-model='msg'>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello'
  },
  methods: {
    handle: function(event){
      // 使用输入域中的最新的数据覆盖原来的数据
      this.msg = event.target.value
    }
  }
})
</script>

事件的绑定

绑定方式与简写

点击1为点击的简写,事件绑定后直接跟要执行的程序
点击2点击3是将执行的程序放在了methods对象中,不传参或者只是使用event事件对象时可以省略括号

<button v-on:click='num++'>点击</button>
<button @click='num++'>点击1</button>
<button @click='handle'>点击2</button>
<button @click='handle()'>点击3</button>

事件函数传参

当只使用事件对象时,则可以省略括号,函数默认传入event
当使用其他参数时,在想要使用事件对象,则需要在最后传入$event

<button @click='handle1'>点击1</button>
<button @click='handle2(参数1, 参数2, $event)'>点击2</button>

事件修饰符

  • 用法 直接在事件后面即可,并且可以连续的使用
<button @click.stop='handle'>点击</button>
  • 种类
  1. .stop 阻止事件继续传播
  2. .prevent 阻止默认跳转事件
  3. .capture 使用事件捕获
  4. .self 只允许自身触发事件
  5. .once 事件只触发一次

按键事件修饰符与自定义按键事件修饰符

  • 用法
<!-- 使用按键修饰符 -->
<input type="text" @keyup.delete='clearContent'>
<!-- 使用按键码 -->
<input @keyup.13="submit">
<!-- 使用自定义事件修饰符 -->
<input @keyup.f1="submit">
<script>
  Vue.config.keyCodes.f1 = 112//自定义修饰符
</script>
  • 种类
  1. .enter 回车
  2. .tab 制表符
  3. .delete (捕获“删除”和“退格”键)
  4. .esc 返回
  5. .space 空格
  6. .up 上
  7. .down 下
  8. .left 左
  9. .right 右

鼠标修饰符

  1. .left 左键
  2. .right 右键
  3. .middle 中键

动态属性的绑定

好处是我们可以随时通过更改数据来改变属性的值

<a v-bind:href="url">百度</a>
<!-- 简化写法 -->
<a :href="url">百度1</a>
<script>
  ...
  data: {url: '...'}
  ...
</script>

样式绑定

class绑定

一般使用对象方法,数组一般用来包含多个对象的

<style type="text/css">
  .active {
    border: 1px solid red;
    width: 100px;
    height: 100px;
  }
  .error {
    background-color: orange;
  }
  .test {
    color: blue;
  }
  .base {
    font-size: 28px;
  }
</style>
</head>
<body>
  <div id="app">
    <!-- 对象用法,多个中间用逗号隔开 -->
    <div v-bind:class="{test:isTest}"></div>
    <!-- 数组用法 -->
    <div v-bind:class='[activeClass, errorClass]'>测试</div>
    <!-- 使用数组和对象混合 -->
    <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
    <!-- 数据定义好数组直接使用数组 -->
    <div v-bind:class='arrClasses'></div>
    <!-- 数据定义好对象直接使用对象名 -->
    <div v-bind:class='objClasses'></div>
    <!-- 默认class会保留 -->
    <div class="base" v-bind:class='objClasses'></div>
    <button v-on:click='handle'>切换</button>
  </div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      activeClass: 'active',
      errorClass: 'error',
      isTest: true,
      arrClasses: ['active','error'],
      objClasses: {
        active: true,
        error: true
      }
    },
    methods: {
      handle: function(){
        this.objClasses.error = false
        this.isTest = !this.isTest//取反可以实现切换效果
      }
    }
  })
</script>

style绑定

<div id="app">
  <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
  <div v-bind:style='objStyles'></div>
  <div v-bind:style='[objStyles, overrideStyles]'></div>
  <button v-on:click='handle'>切换</button>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      borderStyle: '1px solid blue',
      widthStyle: '100px',
      heightStyle: '200px',
      objStyles: {
        border: '1px solid green',
        width: '200px',
        height: '100px'
      },
      overrideStyles: {
        border: '5px solid orange',
        backgroundColor: 'blue'
      }
    },
    methods: {
      handle: function(){
        this.heightStyle = '100px';
        this.objStyles.width = '100px';
      }
    }
  })
</script>

分支与循环结构

分支结构

  • v-if控制dom的创建和删除用于不常切换 原理是根据条件决定创建哪个标签
<div id="app">
  <div v-if='score>=90'>优秀</div>
  <div v-else-if='score<=90&&score>=80'>良好</div>
  <div v-else-if='score<=80&&score>60'>一般</div>
  <div v-else>比较差</div>
</div>
  • v-show控制dom的显示和隐藏用于频繁切换 原理是设置元素的display:none || block
<div v-show='flag'>测试v-show</div>
<button v-on:click='handle'>点击</button>
<script>
...
handle(){
  this.flag = !this.flag;
}
...
</script>

循环结构

会遍历每一项然后将其打印出来

  • 数组遍历 item是元素,index是元素对应的下标 :key使每个元素有独特的值,可以提升性能,建议总是配合循环使用
<div id="app">
  <div>水果列表</div>
  <ul>
    <li v-for='item in fruits'>{{item}}</li>
    <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
    <li :key='item.id' v-for='(item, index) in myFruits'>
      <span>{{item.ename}}</span> || <span>{{item.cname}}</span>
    </li>
  </ul>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      fruits: ['apple', 'orange', 'banana'],
      myFruits: [{
        id: 1,
        ename: 'apple',
        cname: '苹果'
      },{
        id: 2,
        ename: 'orange',
        cname: '橘子'
      },{
        id: 3,
        ename: 'banana',
        cname: '香蕉'
      }]
    }
  })
</script>
  • 对象遍历
<div id="app">
  <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
<script>
  // 使用原生js遍历对象
  var obj = {
    uname: 'lisi',
    age: 12,
    gender: 'male'
  }
  for(var key in obj) {
    console.log(key, obj[key])
  }
  var vm = new Vue({
    el: '#app',
    data: {
      obj: {
        uname: 'zhangsan',
        age: 13,
        gender: 'female'
      }
    }
  })
</script>

v-if && v-for配合使用

虽然可以配合使用,但是不推荐,v-for优先级要大于v-if所以哪怕不满足也要循环完毕,
可以将要判断的内容计算后在循环,这样就不用同时使用了。

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
<!-- 替换后 -->
...
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
...
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>