【Vue学习第一天0603】第一个Vue程序

最新推荐文章于 2024-06-14 23:28:14 发布

简·AI

最新推荐文章于 2024-06-14 23:28:14 发布

阅读量148

点赞数

分类专栏： vue学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_53522458/article/details/125116124

版权

vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、Vue特点

1、JavaScript框架

2、简化Dom操作

3、响应式数据驱动

二、Vue基础

自学网站：Vue.js

1、第一个vue程序

开发环境版本：初学者版本。有提示。

生成环境版本：不适合初学者。速度快、提示少

2、创建步骤

（1）添加vue.js在同一路径下

（2）引用vue.js

<script src="vue.js"></script>

（3）在body中添加代码

    <div id="app">
        {{message}}
    </div>

<script>
    var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
  }
})
</script>

（4）运行live server

（5）源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=\, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
    <title>Vue基础</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

<script>
    var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>
</html>

三、el：挂载点

1、Vue实例的作用范围？

div外部{{message}}不支持，内部可以任意嵌套其他标签。

Vue会管理el选项命中的元素及其内部的后代元素。

2、是否可以使用其他的选择器？

一般使用id选择器，class和div也可以使用，但容易语义不清晰。

3、是否可以设置其他的dom元素?

可以使用其他的双标签，不能使用HTML和BODY。

四、data数据对象

1、Vue中用到的数据定义在data中

比如自定义一个school类型的数据，campus的数组。

在div中用h2标题显示shcool变量——用（数据名）.（+变量名）的形式，如：school.name得到值。

在u1-li中显示数组变量，用数组名[下标]，如campus[0]得到数组的值。

<div id="app">
        {{message}}
        <h2>{{school.name}}  {{school.mobile}}</h2>
   <ul>
       <li>{{campus[0]}}</li>
       <li>{{campus[1]}}</li>
   </ul>
    </div>

<script>
        var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello Vue!',
        school:{
            name:"CSDN",
            mobile:"0001"

        },
        campus:["bilibili","MOOC"]
      }
    })
    </script>

2、data中可以写复杂类型的数据

3、渲染复杂类型数据是，遵守js的语法即可

4、源代码

<!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>data数据对象</title>
    <script src="vue.js"></script>

</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school.name}}  {{school.mobile}}</h2>
   <ul>
       <li>{{campus[0]}}</li>
       <li>{{campus[1]}}</li>
   </ul>
    </div>
    <script>
        var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello Vue!',
        school:{
            name:"CSDN",
            mobile:"0001"

        },
        campus:["bilibili","MOOC"]
      }
    })
    </script>
</body>
</html>

5、运行效果