Vue-快速入门

浅浅的程序员

已于 2022-05-06 20:51:46 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端框架

于 2022-04-29 21:57:16 首次发布

本文链接：https://blog.csdn.net/T_if_else/article/details/124482719

版权

参考视频黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili

一、导包

要先把最主要的Vue包导入才能正式的开始学习，参考文档介绍 — Vue.js (vuejs.org)

运行第一个vue程序：

<!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>Document</title>
    
</head>
<body>
    <div id="app">
        {
  { massage }}
        
    </div>
//两种环境可选
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            massage:'你好',
         
        }
    })
</script>
</body>

</html>

el 挂载

针对以下代码的 el （挂载）属性

var app = new Vue({
        el:"#app",
        data:{
            massage:'你好',
            
        }
    })

id选择器 el:"#app" ->推荐

class选择器 el:".app"

标签选择器 el:"div" 等各种标签标签仅支持双标签并且不支持body、html标签

data 数据

对应的值可以在里面用{ {key}}表示，数组使用下标表示发，同时

v-text

v-text指令的作用是：设置标签的内容（trxtContent）

默认写法会替代全部的内容，使用差值表达式{ {}}可以替换指定的内容

<body>
    <div id="app">
        <h2 v-text="massage +'!'"> </h2>
        <h2 v-text="info"></h2>
        <h2>{
  {massage}}+!</h2>  <!-- 可实现拼接操作 -->
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            massage:'你好',
            info:"小谭工作室"
        }
    })
   
</script>
</body>

显示内容：

v-html

v-html指令的作用是：设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么，只会解析为文本

解析文本使用v-text，需要解析html结构使用v-html

<body>
    <div id="app">
        <h2 v-text="massage"> </h2>
        
        <h2 v-html="massage"></h2>
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            massage:"<a href='https://www.baidu.com'>百度一下</a>"
        }
    })
</script>
</body>

显示内容