Vue学习笔记

文档:https://v2.cn.vuejs.org/v2/guide

目录

  • [1 第一个Vue程序](#1 第一个Vue程序)
  • [2 data数据对象](#2 data数据对象)
  • [3 v-text](#3 v-text)
  • [4 v-html](#4 v-html)

1 第一个Vue程序

  1. 导入开发版本的Vue.js
bash 复制代码
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  1. 创建div,id为app
bash 复制代码
    <div id="app">
        {{message}}
    </div>
  1. 创建Vue实例对象, 设置el属性和data属性
bash 复制代码
<script>
      var app=new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
      })
</script>

完整代码

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

2 data数据对象

以下data包括 message,school, campus

bash 复制代码
 data:{
            message:"你好 小黑!",
            school:{
                name:"黑马程序员",
                mobile:"400-618-9090"
            },
            campus:["北京校区","上海校区","广州校区","深圳校区"]
        }

显示方式:school.name,campus[1]

bash 复制代码
       {{message}}
        {{school.name}}  {{school.mobile}}
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
        </ul>

完整代码

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        {{school.name}}  {{school.mobile}}
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
        </ul>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
      var app=new Vue({
        el:"#app",
        data:{
            message:"你好 小黑!",
            school:{
                name:"黑马程序员",
                mobile:"400-618-9090"
            },
            campus:["北京校区","上海校区","广州校区","深圳校区"]
        }
      })
   </script>
</body>
</html>

3 v-text

bash 复制代码
data:{
      message:"黑马程序员"
}  
bash 复制代码
<h2 v-text="message"></h2>

字符串拼接,v-text里面拼接的字符串是单引号

bash 复制代码
<h2 v-text="message+'!'"></h2>
<h2>{{message}}!</h2>

完整代码

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-text="message+'!'"></h2>
        <h2>{{message}}!</h2>
    </div>
     <!-- 开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            }  
        })
     </script>
</body>
</html>

4 v-html

bash 复制代码
data:{
       message02:"<a href='http://www.baidu.com'>百度一下</a>"
}
bash 复制代码
 <p v-html="message02"></p>

完整代码

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">  
        <p v-text="message01"></p>
        <p v-html="message01"></p>

        <p v-text="message02"></p>
        <p v-html="message02"></p>

    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message01:"普通的字符串v-text和v-html没有区别",
                message02:"<a href='http://www.baidu.com'>百度一下</a>"
            }
        })
    </script>
</body>
</html>
相关推荐
CAE虚拟与现实1 天前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
蜚鸣1 天前
Vue的快速入门
vue
路边闲人22 天前
vscode启用GEMINI CODE ASSIST插件
ide·vscode·gemini
CAE虚拟与现实2 天前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实2 天前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
Stardep2 天前
ssh远程连接服务器到vscode上“连接失败”
服务器·vscode·ssh
superior tigre2 天前
1.linux环境配置+ssh远程连接vscode调试(问题:无法联网,无法共享粘贴板,不满足运行vscode服务器的先决条件)
linux·服务器·vscode
老黄编程2 天前
VSCode 的百度 AI编程插件
ide·vscode·ai编程
老黄编程2 天前
VSCode AI编程插件
ide·vscode·ai编程
Naiva2 天前
ESP32-C3 入门09:基于 ESP-IDF + LVGL + ST7789 的 1.54寸 WiFi 时钟(SquareLine Studio 移植)
ide·笔记·vscode