Vue中v-text、v-html、v-on的基本语法（二）_数据渲染指令v-text和v-html的使用。-优快云博客

本文链接：https://blog.youkuaiyun.com/y2020520/article/details/131252261

文章目录

前言
一、vue中data属性定义对象、数组相关数据
二、v-text、v-html指令使用
三、v-on基本指令使用(一)
四、v-on指令基本使用(二)之在函数中获取vue实例本身this
五、v-on指令基本使用(二)之在函数中传递参数
六、v-on指令基本使用(二)之简化写法@绑定函数和事件定义的两种写法

前言

本文讲述的是Vue的最基本的语法。v-text、v-html、v-on以及v-on事件的简化语法。只是记录自己学习。

文章参考B站视频：
【编程不良人】2021最新Vue全家桶系列教程

一、vue中data属性定义对象、数组相关数据

<script>
   var app = new Vue({
   
        el:"#app", //指定vue实例作用范围
        data:{
     // 用来vue实例定义一系列数据
            msg:"hello vue",
            count:0 ,
            user:{
    id:21,name:"小陈",age:23,salary:23000.23},
            schools:["广州校区","上海校区","北京校区","天津校区"],
            users:[
                {
   id:21,name:"小陈",age:23,salary:23000.23},
                {
   id:22,name:"小李",age:23,salary:23000.23},
                {
   id:23,name:"小何",age:23,salary:23000.23},
                ]
        }
    });//创建一个Vue实例
</script>

在这里插入图片描述

二、v-text、v-html指令使用

v-text 和 v-html: 作用：用来获取vue实例中data属性声明数据。
使用语法：在哪个标签上获取直接在哪个标签上定义v-text v-html ; 在v-text=“属性名”

一、{ {}}取值和v-text取值区别：

{ {}} 取值不会将标签原始数据清空使用v-text取值清空标签原始数据。{ {}} ==》这种方式取值又叫插值表达式

{ {}} 取值存在插值闪烁； v-text v-html取值不存在插值闪烁。
推荐：两种方式都可以使用； { {}} 更加灵活。

二、v-text (innerText) 、v-html （innerHtml）区别：

使用v-text取值：直接将获取数据渲染到指定标签值。

使用v-html取值：先将获取数据进行html标签解析，解析之后再渲染到指定标签中。

<html>
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">
        <h1> {
   {
    msg }<