VUE基础知识点整理 (某马笔记)

置顶一只小鸟儿

已于 2022-11-16 14:00:03 修改

阅读量842

点赞数

分类专栏： 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>

先出现李四点击出现张三

实例来源链接

11.v-on指令补充

12.v-model指令补充

双向数据绑定

13.记事本

新增

1生成列表结构v-for数组

2获取用户输入v-model

3回车,新增数据v-on .enter添加数据

删除

统计

删除

隐藏

因为axios 在我实际的工作中并不会这样使用这里就不学习写笔记了感兴趣的大佬可以去学习一下

最后放一个搬运链接

vue入门基础视频搬运

如果是第一次打开vue项目的话需要下载 vue.js插件和node js环境

vue.js可以直接在idea下载,node js自行百度

解释下vue.js为什么需要node js环境

关于vue项目的启动:

先cd进入-ui页面然后npm install一下

也可以直接open in terminal 进入

若果有错误继续执行

启动文件配置位置

一只小鸟儿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUE基础知识点整理 (某马笔记)

1.Vue基础-el挂载点{{}}双括号写div里的id可以被识别2.Vue基础-data数据对象3.Vue基础 v-text指令3.Vue基础 v-html指令html解析成标签,text解析成内容4.Vue基础 v-on指令v-on和@形式一样小节...
复制链接

扫一扫

专栏目录