Vue.js学习笔记 (1)

最新推荐文章于 2024-05-29 12:00:00 发布

带带大红袍

最新推荐文章于 2024-05-29 12:00:00 发布

阅读量192

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44735610/article/details/107899954

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js学习笔记（1）

学习资料：黑马程序员Vue教程(BV12J411m7MG)

文章目录

Vue.js学习笔记（1）

①Vue基础

Vue简介

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

第一个Vue程序

通过阅读Vue文档：https://cn.vuejs.org/v2/guide/ 写出第一个Vue程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app", //通过id选择器进行识别
            data: {
                message: "Hello Vue!"
                    // message中的值和div中的message相关联
            }
            // data是Vue实例中用到的数据
        })
    </script>
</body>

</html>

第一个Vue程序步骤

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

el：挂载点

在这里插入图片描述
el 的作用？

el是用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围是什么?

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

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

el命中的选择器换成类选择器，标签选择器等其他选择器，但是建议使用ID选择器

是否可以设置其他的dom元素？

不仅支持div标签，还支持其他标签，但是仅支持双标签，另外***html***和***body***标签并不支持

data：数据对象

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

②本地应用

通过Vue实现常见的网页效果
学习Vue指令，以案例巩固知识点
Vue指令指的是，以**v-**开头的一组特殊语法

1.内容绑定，实践基础

（v-text、v-html、v-on基础）

v-text

设置标签的文本值(textContent)

在这里插入图片描述

会把message的值直接替换到h2标签内部，缺点就是无论h2中有什么值都会被message替换。

在这里插入图片描述

解决这个问题的方法就是用大括号代替，叫做差值表达式，这种方法只有大括号内部的值会被替换。其他的内容被原封不动的表达。

总结：

v-text指令的作用是：设置标签的内容（textContent）
默认写法会替代全部内容，使用**差值表达式{{}}**可以替换指定内容
内容支持写表达式

v-html

设置标签的innerHTML

在这里插入图片描述

如果data只是文本，则和v-text没有什么区别

在这里插入图片描述

如果data是html语句，则会被解析出来

在这里插入图片描述

总结：

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

v-on基础

为元素绑定事件

在这里插入图片描述

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

计数器案例

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
</head>

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add: function() {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("别点了，最大了")
                    }
                },
                sub: function() {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("别点啦，最小了")
                    }
                }
            }
        })
    </script>
</body>

</html>

结果展示：
在这里插入图片描述
案例总结：

创建Vue示例时：el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this关键字获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为{{}}
v-html指令的作用是：设置元素的innerHTML

带带大红袍

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记 (1)

Vue学习笔记（1）学习资料：黑马程序员Vue教程(BV12J411m7MG)文章目录Vue学习笔记（1）①Vue基础Vue简介第一个Vue程序第一个Vue程序步骤el：挂载点data：数据对象②本地应用1.内容绑定，实践基础v-textv-html计数器案例①Vue基础Vue简介JavaScript框架简化Dom操作响应式数据驱动第一个Vue程序通过阅读Vue文档：https://cn.vuejs.org/v2/guide/ 写出第一个Vue程序<!DOCTY
复制链接

扫一扫