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>
相关推荐
lanhuazui1033 分钟前
【Vscode】显示多个文件 & 打开多个文件时实现标签栏多行显示
vscode·编辑器
张较瘦_4 小时前
环境搭建 | [入门级]VSCode(Cursor|Trae|Qoder)搭建Java(Springboot3)企业开发环境全流程
java·ide·vscode
麦麦大数据4 小时前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
天赐细莲6 小时前
(Linux) WSL 通过 VSCode 连接不执行 profile 问题(登录Shell问题)
linux·运维·vscode
七仔的博客7 小时前
Vue视差标题背景
vue·博客·动画·视差
梁辰兴7 小时前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
暮色驶过苍茫15 小时前
VSCode 配置 SSH 远程连接
ide·vscode·ssh
Olrookie19 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
duansamve19 小时前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
java_强哥1 天前
vue3-tree-org实现组织架构图展示
vue