VUE基础知识点整理 (小破站自学笔记)

置顶一只小鸟儿

已于 2024-10-06 09:37:22 修改

阅读量872

点赞数

分类专栏： vue 文章标签： vue.js javascript elementui

于 2022-03-08 16:51:28 首次发布

本文链接：https://blog.csdn.net/theshy08/article/details/123354323

版权

vue 专栏收录该内容

4 篇文章 11 订阅

订阅专栏

这篇博客详细介绍了Vue.js的基础知识，包括el挂载点、data数据对象、v-text和v-html指令的使用，以及v-on、v-if/v-show指令的区别。重点讲解了v-for指令和methods方法，阐述了v-model的双向数据绑定原理，并通过图片切换和记事本实例展示了Vue在实际应用中的操作。同时，讨论了v-if和v-show在性能和应用场景上的差异，强调了最佳实践。

摘要由CSDN通过智能技术生成

1.Vue基础-el挂载点

{{}}双括号写div里的id可以被识别

v-text指令的作用设置元素的文本值简写为{{}}

2.Vue基础-data数据对象

3.v-text指令

4.v-html指令

html解析成标签,text解析成内容

5.v-on指令

v-on和@形式一样

小节

6.v-show指令

7.v-if指令

v-show和v-if的区别和联系

定义:

v-show严格意义上说“条件隐藏”。浏览器首先把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那。除了初始化渲染，其他时候都不会再走相关生命周期了。
v-if是真正意义上的“条件渲染”。浏览器先判断符不符合条件，符合了再渲染，否则不渲染DOM，浏览器中找不到这个DOM。每次切换一次会重新走一次生命周期

性能方面:

v-show性能更高,因为v-show只能动态的改变样式，不需要增删DOM元素。如果项目很大，推荐多用v-show

语法:

v-show不支持<template>语法

8.v-bind指令

v-bind指令的作用是:为元素绑定属性

可以简写为:

demo

总结

9.应用实例-图片切换

注:这里可以用v-show代替v-if使用,但是不建议使用,v-if多配合v-else使用.

10.v-for指令

methods方法

1.我们可以使用 methods 属性给 Vue 定义方法，methods 的基本语法：

var vm = new Vue({
    methods:{
        // 在此时定义方法，方法之间使用逗号分隔
        方法名:function(){}
});

2.在 methods 方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问。

<script>
  new Vue({
    el: '#app',
    data(){
      return{
        number: 1000
      }
    },
    methods:{
      show: function(){
        console.log(this.number);
      }
    }
  });
</script>

如果是在 Vue 构造函数外部，可以使用 vm.方法名 定义或调用方法，还可以通过 vm.$data.属性名 来访问 data 中的数据。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
    <h1>点击按钮修改名字</h1>
    <div id="app">
        <p>{{message}}</p>
        <button @click="change">点我改名</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data() {
                return{
                    message: "李四"
                }
            },
            methods:{
                change(){
                    this.message = "张三"  // 改变data中属性的值
                }
            }
        })
    </script>
</body>
</html>

先出现李四点击出现张三

实例来源链接