Vue常用基础知识

最新推荐文章于 2024-04-29 14:36:43 发布

置顶纯米饭

最新推荐文章于 2024-04-29 14:36:43 发布

阅读量564

点赞数 1

分类专栏： vue 文章标签： vue html javascript css node.js

本文链接：https://blog.csdn.net/qq_23079469/article/details/112461253

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

创建vue

要使用vue就要从创建Vue实例开始

var vm = new Vue({})

一 vue的常用属性

选项	说明
data	Vue实例数据对象
methods	定义Vue实例中的方法
components	定义子组件
computed	计算属性
filters	过滤器
el	唯一根标签
wathch	监听数据变化

下面对个个属性详细说明

1. el

  <div id="app">
    <p>{{name}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: '定义初始数据'
      }
    })
  </script>

用el绑定对应的页面结构

2. data 初始数据

  <div id="app">
    <p>{{name}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: '定义初始数据'
      }
    })
  console.log(vm.$data.name)
  console.log(vm.name)
  </script>

在vue中想要定义变量就可以定义到data中，
访问数据可以通过vm.$data.name这样来访问数据，
另外其实Vue的实例也代理了data对应所以也可以console.log(vm.name)直接访问。
如果想在页面上显示data里的数据，最简单的就是用 “{{ }}” 绑定到页面

3. methods 定义方法

 <div id="app">
    <!-- 为button按钮绑定click事件 -->
    <button @click="showInfo">请单击</button>
    <p>{{msg}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      methods: {
          // 定义事件处理方法showInfo
        showInfo () {
          this.msg = '触发单击事件'
        }
      }
    })
  </script>

如果要定义方法就把方法放到methods里
这里在页面通过 @click=“showInfo” 让按钮的点击绑定了showInfo事件
当data数据改变时，页面上所绑定的数据页面也会实时的进行改变

3. computed 计算属性

 <div id="app">
    <p>总价格：{{totalPrice}}</p>
    <p>单价：{{price}}</p>
    <p>数量：{{num}}</p>
    <div>
      <button @click="num == 0 ? 0 : num--">减少数量</button>
      <button @click="num++">增加数量</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        price: 20,
        num: 0
      },
      computed: {
        // 总价格totalPrice
        totalPrice () {
          return this.price * this.num
        }
      }
    })
  </script>

当需要一些数据随着其他数据的改变而改变时就需要使用到computed

3. watch计算属性

  <div id="app">
    <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
    <input type="text" v-model="cityName">
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        cityName: 'shanghai'
      },
      // 使用watch监听cityName变化
      watch: {
        cityName (newName, oldName) {
          console.log(newName, oldName)
        }
      }
    })
  </script>

想当数据发生变化时，触发事件就使用watch

4. filters 过滤器

有两种方式使用
第一种在插值表达式中使用过滤器

  <div id="app">
    <div>{{message | toUpcase}}</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'helloworld'
      },
      filters: {
        // 将 helloworld 转换为 HELLOWORLD
        toUpcase (value) {
          return value ? value.toUpperCase() : ''
        }
      }
    })
  </script>

第二种 v-bind

  <div id="app">
    <div v-bind:id="dataId | formatId">helloworld</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        dataId: 'dff1'
      },
      filters: {
        formatId(value) {
          // 字符串处理
          return value ? value.charAt(1) + value.indexOf('d') : ''
        }
      }
    })
  </script>

二 Vue数据绑定

1.绑定内链样式

通过 v-bind 将样式绑定给dom原始

<div v-bind:style="{backgroundColor:pink,width:width,height:height}">
  <!-- 绑定样式对象 -->
  <div v-bind:style="myDiv"></div>
</div>

2.绑定样式类

 <div id="app">
    <div v-bind:class="{box}">我是box
      <div v-bind:class="{inner}">我是inner1</div>
      <div v-bind:class="{inner}">我是inner2</div>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        box: 'box',
        inner: 'inner'
      }
    })
  </script>

三 Vue内置指令

指令	说明
v-model	双向数据绑定
v-on	监听事件
v-bind	单向数据绑定
v-text	插入文本内容
v-html	插入包含html的内容
v-for	列表渲染
v-if	条件渲染
v-show	显示隐藏

1. v-model

  <div id="app">
    <input type="text"  v-model="msg">
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'v-model指令'
      }
    })
  </script>

当想实现绑定的值，任意一方改变。所有都改变就使用v-model

2. v-text

  <div id="app">
    <p v-text="msg"></p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是v-text'
      }
    })
  </script>

想在DOM原始内部插入文本内容时，使用v-text

3. v-html

<div id="app">
    <div v-html="msg"></div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '<h2>我是v-html</h2>'
      }
    })
  </script>

与上面的v-text类似，但是这个内容可以是HTML结构的

4. v-bind

<div id="app">
    <input v-bind:value="msg">
  </div>  
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是v-bind'
      }
    })
  </script>

和v-mode一样是用来绑定数据的，但是这个数据改变时，绑定的数据并不会一起改变，两个数据是分离的对象

5. v-on

  <div id="app">
    <p>{{msg}}</p>
    <button v-on:click="showInfo">请单击</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {msg: '请单击按钮查看内容'},
      methods: {
        showInfo () {
          this.msg = '我是v-on指令'
        }
      }
    })
  </script>

对点击各种事件进行绑定，如上代码对click事件进行了绑定
在这里插入图片描述
上面这些是可以进行绑定的事件

6. v-for

  <div id="app">
    <div v-for="(item,key) in list" data-id="key">
      索引是：{{key}}，元素内容是：{{item}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3]
      }
    })
  </script>

常用于在页面上循环显示列表

7. v-if 和 v-show

  <div id="app">
    <div v-if="isShow" style="background-color:#ccc;">我是v-if</div>
    <button @click="isShow=!isShow">显示/隐藏</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

这两个都是用于动态的显示或隐藏。
v-if是直接对原始进删除和重建
v-show是使用display进行隐藏
所以性能上来说v-show的性能比v-if好

学生列表案例

  <div id="app">
    <button @click="add">添加学生</button>
    <button @click="del">删除学生</button>
    <table border="1" width="50%" style="border-collapse: collapse">
      <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr align="center" v-for="item in students">
        <td>{{item.grade}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        students: []
      },
      methods: {
        // 添加学生信息
        add () {
          var student = {grade: '1', name: '张三', gender: '男', age: 25}
          this.students.push(student)
        },
        // 删除学生信息
        del () {
          this.students.pop()
        }
      }
    })
  </script>

四 Vue事件

1.事件监听

(1). 在触发事件时执行JavaScript代码

<div id="app">
    <button v-on:click="count+=Math.random()">随机数</button>
    <p>自动生成的随机数是{{count}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 0
      }
    })
  </script>

v-on 可以直接执行JavaScript代码

(2). 使用键盘修饰符监听按键

<div id="app">
    <input type="text" v-on:keyup.enter="submit">
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        submit () {
          console.log('表单提交')
        }
      }
    })
  </script>

这里当按下enter时触发命令

2.事件修饰符

修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件行为
.capture	事件捕获
.self	将事件绑定自身，只有自身才能触发
once	事件只触发一次

（1） .stop 阻止事件冒泡

  <div id="app">
    <div v-on:click="doParent">
      <button v-on:click="doThis">事件冒泡</button>
      <button v-on:click.stop="doThis">阻止事件冒泡</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: { 
        doParent () {
          console.log('我是父元素单击事件')
        },
        doThis () {
          console.log('我是被单击元素事件')
        }
      }
    })
  </script>

默认是会触发两个触发的事件的。想要不触发父级原始的事件, 就使用 .stop。这样就不会触发冒泡了

（2） .prevent 阻止默认事件行为

  <div id="app">
    <a href="https://www.baidu.com" v-on:click.prevent>阻止默认行为</a>
    <a href="https://www.baidu.com">不阻止默认行为</a>
  </div>
  <script>
    var vm = new Vue({
      el: '#app'
    })
  </script>

有些html具有自身的特性，比如 a 标签，点击时会自动跳转，假如自动跳转与事件发生冲突，可以使用.prevent阻止a标签的默认行为

（3） .captrue 事件捕获

<div id="app">
    <div v-on:click.capture="doParent">
      <button v-on:click="doThis">事件捕获</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        doParent () {
          console.log('我是父元素的单击事件')
        },
        doThis () {
          console.log('我是当前元素的单击事件')
        }
      }
    })
  </script>

默认的冒泡顺序是先执行内部事件再执行外部事件，而事件捕获是相反的。假如想先执行外部事件，则可以加上.capture，让其绑定的是事件捕获

（4） .self 自身触发

<div id="app">
    <div class="Odiv1" v-on:click.self="doParent">a
      <div class="Odiv2" v-on:click="doThis">b</div>
    </div>
    <div class="Odiv1" v-on:click="doParent">c
      <div class="Odiv2" v-on:click.self="doThis">d</div>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: { 
        doParent () {
          console.log('我是父元素的单击事件')
        },
        doThis () {
          console.log('我是当前元素的单击事件')
        }
      }
    })
  </script>

点击b区域，触发 doThis事件方法执行，点击d区域时doThis和doParent会以此执行

（5） .once 只触发一次

  <div id="app">
    <button v-on:click.once="doThis">只执行一次</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        doThis () {
          console.log('我是当前元素的单击事件且只执行一次')
        }
      }
    })
  </script>

当执行事件执行一次时，可以使用这个

纯米饭

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue常用基础知识

vue准备考试了，我在这里对vue的基础知识进行一个汇总。创建vue要使用vue就要从创建Vue实例开始var vm = new Vue({})一 vue的常用属性选项说明dataVue实例数据对象methods定义Vue实例中的方法components定义子组件computed计算属性filters过滤器el唯一根标签wathch监听数据变化下面对个个属性详细说明1. el <div id="app"
复制链接

扫一扫

专栏目录