vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

Anna Qiao

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量80

点赞数

分类专栏： Vue 文章标签： vue.js html html5

本文链接：https://blog.csdn.net/qq_46103340/article/details/120271018

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue基础

vue简介

一个强大的框架

JavaScript框架
简化DOM操作
响应式数据驱动

第一个vue程序

介绍 — Vue.js (vuejs.org)

安装教程

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

完整版本的jQuery：

<!-- 开发环境版本，包含了有帮助的命令行警告  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者（mini版本的jQuery）：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

第一个vue程序

导入开发版本的vue.js
创建vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<!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 vv "
            }
        })
    </script>
</body>
    
</html>

el：挂载点

vue实例的作用范围是什么呢？

vue会管理el选项命中的元素及其内部的后代元素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CusvPnuB-1631524067864)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210714184128309.png)]$

是否可以使用其他的选择器？

可以，其他选择器都可以正常使用

但是通常都使用id选择器，因为id选择器默认唯一，而其他的选择器可能会造成语义不清晰

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i928X1Ij-1631524067869)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210714184831625.png)]$

是否可以使用其他的DOM元素？

可以使用其他的双标签，不能使用HTML标签和body标签
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIj2AsCx-1631524067873)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210714185627785.png)]$

data:数据对象

vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型的数据时，遵守js的语法即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkpRZRo7-1631524067878)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210714192036777.png)]$

本地应用

v-text

作用：设置标签的文本值（textContent）
默认写法：标签内部 v-text="el挂载点" 差值表达式： {{}}
默认写法会替换全部内容，差值表达式替换指定内容
内部支持写表达式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnWTMovX-1631524067884)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210714193858081.png)]$

v-html

作用：设置元素的innerHTML
内容中有HTML结构会被解析为标签
v-text中内容无论是什么都只会被解析为文本

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IaBbCaN5-1631524067888)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210714195057172.png)]$

v-on

作用：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过关键字this可以访问定义在data中的数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gE8OWpc0-1631524067891)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721102337534.png)]$

v-show

作用：根据真假切换元素的显示状态
原理：修改元素的display，实现显示隐藏
指令后面的内容都会被解析为布尔值，true显示，flase隐藏

在这里插入图片描述

v-if

作用：根据表达式的真假值切换状态
本质：通过操纵dom元素来切换显示状态
表达式的值为true，元素存在dom树中，为false从dom树中移除
与v-show区别：状态切换频繁使用v-show，反之使用v-if

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3XLVwUD-1631524067899)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210727230511652.png)]$

v-bind

作用：为元素绑定属性
v-bind:属性名
简写：:属性名
需要动态的增删class建议使用对象的方式

v-for

作用：根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-model

作用：便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据和表单元素的值一一对应

网络应用

综合应用

Anna Qiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

vue基础vue简介一个强大的框架JavaScript框架简化DOM操作响应式数据驱动第一个vue程序介绍 — Vue.js (vuejs.org)安装教程尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：完整版本的jQuery：<script src="ht
复制链接

扫一扫