Vue快速入门（1）

最新推荐文章于 2024-08-16 23:32:06 发布

HopeStation

最新推荐文章于 2024-08-16 23:32:06 发布

阅读量184

点赞数

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

本文链接：https://blog.csdn.net/qq_33747081/article/details/106415952

版权

Vue笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue基础

前提

学习Vue，首先需要了解HTML、CSS、Javascript

作用

原生Javascript：开发时代码不简洁、大量重复片段
Jquery框架：简化了常用操作
Vue框架：响应式

第一个程序

官网起步教学

我是利用VsCode编写代码，然后liveServer插件来动态查看代码
这个程序功能，利用vue对象来绑定该div，来改变message的值（这里的message可以换成其他单词，与data处对应即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 快速入门1    </title>
</head>
<body>

    <!-- 创建一个div块，id=app -->
    <div id="app">
        {{message}}
    </div>

     <!-- 创建Vue对象
            el表达式 #根据id为app获取Dom
                绑定值data
    -->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好Vue"
            }
        })
    </script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

运行结果是
在这里插入图片描述

Vue对象结构

从上面程序可以看出Vue对象由两部分组成

el挂载点
data数据对象

下面主要介绍这两部分

el挂载点

var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue! 哈哈"
            }
        })

el作用就是选择Vue实例挂载的元素
data指数据对象
如上程序所示，el其实还可以像jQuery选择器一样，通过类名和标签来选择元素

el:"#app" id选择器推荐
el:"div" 标签选择器
el:".appClass" 类选择器

代码中通过var app = new Vue来创建了一个Vue实例，选择了id=app的div元素，通过data的{{ something }}来绑定值

Vue会管理el选项命中的元素及其内部的后代元素，也就是说data的{{something}}若在元素外部会无效

 <!-- 测试在标签外部 能否使用 -->
    {{message}}

    <div id="app" class="appClass">
        {{message}}
         <!-- 测试在标签内部 能否使用 --><br>
         <span>{{message}}</span>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
        var app = new Vue({
            el:"div",
            //el:"div",
             //el:".appClass",
            data:{
                message:"你好Vue"
            }
        })
    </script>

运行结果如下，也就是说作用范围是：命中的div外部无效，内部有效
在这里插入图片描述

data数据对象

除了上面利用{{something}}字符串类型还可以有arry:[]数组和obj:{}键值对

array类型:用arr[i]来获取
obj{}键值对类型:用obj.xxx获取

程序：

<div id="app" >
        <h3>{{message}} </h3> <br>
        school内容是 {{school}}  <br>
        schoolname是{{school.name}}  <br>
        校区是 {{campus}}  <br><br>
        用无序列表和campus[i]
        <ul>
            <li> {{campus[0]}} </li>
            <li> {{campus[1]}} </li>
            <li> {{campus[2]}} </li>       
        </ul>
       

    </div>

   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
        var app = new Vue({
            el:"#app",
           
            data:{
                message:"data数据对象学习",
                school:{
                    name:"蓝天学校",
                    mobile:"000-xxx-1214"
                },
                campus:["北京校区","上海校区","南京校区"]
            }
        })
    </script>

运行结果
在这里插入图片描述