vue2快速入门笔记

最新推荐文章于 2024-05-22 22:43:51 发布

梦魇梦狸º

最新推荐文章于 2024-05-22 22:43:51 发布

阅读量678

点赞数

分类专栏：前端文章标签： spring boot linux centos

本文链接：https://blog.csdn.net/RAXCL/article/details/121416254

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

学习目的：开发及扩展个人博客前端页面
使用工具： vscode
安装运行时实时更新插件： live serve

vue基本概念

vue简介

它是一个JavaScript框架
简化了Dom操作
响应式数据驱动
和react基本类似（不过react更加注重函数式编程,vue偏向渐进式）

官方文档

vue的优点

除了以上提到的几点外，来看看vue官方给出的优点：
在这里插入图片描述
比较个性化属于vue的双向数据绑定，和react的状态和属性这两个概念类似（个人见解，如有误区还请指出）

引入vue

开发环境（包含了有帮助的命令行警告）：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产环境（优化了尺寸和速度）：
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

hello vue

作为入门的第一个程序，让我们来向vue问好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue页面</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello vue!"
            }
        })
    </script>
</body>
</html>

vue挂载点

挂载点：el
通过挂载点传入对应的消息
作用范围：vue会管理el选项命中的元素及其内部的后代元素
选择器：
#app：id选择器（推荐使用）
.app：类选择器
dev：标签选择器
不可使用的dom元素：html,body

vue常用标签

v-text

设置标签的文本值
在这里插入图片描述

v-html

作用：设置元素的innerHTML，内容中有html结构会被解析为标签
v_text指定无论内容是什么，只会解析为文本
所以，解析文本使用v_text，需要解析html结构使用v-html
在这里插入图片描述
效果：

v-on

事件绑定，为元素绑定事件
在这里插入图片描述
效果：

案例:计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue页面</title>
</head>
<body>
    <div id="app">
        <button v-on:click="jian">-</button>
        <span>{{shu}}</span>
        <button @click="jia">+</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                shu:1,
            },
            methods: {
                jian:function(){
                    if(this.shu<=0){
                        alert("别点了，最低了")
                    }else{
                        this.shu=this.shu-1;
                    }
                },
                jia:function(){
                    if(this.shu>=10){
                        alert("别点了，最高了")
                    }else{
                        this.shu=this.shu+1;
                    }
                }
            },
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述

v-show

根据表达式的真假，切换元素的显示和隐藏

v-if

根据表达式的真假，切换元素的显示和隐藏(直接操纵dom）

v-bind

设置元素的属性（比如src,title,class）
在这里插入图片描述

v-for

根据数组生成列表结构

v-on

传递自定义参数，事件修饰符

v-model

获取和设置表单元素的值（双向数据绑定）

router-view

route-view是vueRouter的组件，主要是更新路由，可以不用跳转到一个新的页面，不会更新初始化函数mounted和created，只更新标签下所渲染的组件。可以不用引入组件。

<router-link to="/">
	<img v-if="logo" :src="logo" class="sidebar-logo">
	<h1 class="sidebar-title">{{ title }} </h1>
</router-link>

梦魇梦狸º

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2快速入门笔记

前言学习目的：开发及扩展个人博客前端页面使用工具： vscode安装运行时实时更新插件： live servevue基本概念vue简介它是一个JavaScript框架简化了Dom操作响应式数据驱动和react基本类似（不过react更加注重函数式编程,vue偏向渐进式）官方文档vue的优点除了以上提到的几点外，来看看vue官方给出的优点：比较个性化属于vue的双向数据绑定，和react的状态和属性这两个概念类似（个人见解，如有误区还请指出）引入vue开发环境（包含了有帮助
复制链接

扫一扫