vue环境的搭建

最新推荐文章于 2024-03-03 15:02:14 发布

不想写，还得写，写就写，慢慢写

最新推荐文章于 2024-03-03 15:02:14 发布

阅读量1.2k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74331185/article/details/128378914

版权

vue环境的搭建有两种方式，第1种方式：使用script标签的方式引入到网页上，这种方式比较使用学习使用，不太使用实际开发，第2种方式：使用vuecli脚手架方式来进行项目搭建，这种方式比较适合实际企业开发用

1、使用script方式引入

具体的实现步骤有如下

在html页面中通过script标签的方式引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

在body标签之间定义一个div元素，用来作为vue内容渲染的容器
```
<div id="app"></div>
```
创建vue实例

<script>
        /*
            通过new的方式调用构造函数来进行创建vue实例
            Vue的构造函数的参数是一个对象，该对象中的属性
            就是vue的选项，这里边的选项都是固定的
            el:vue挂载目标，这里的值是目标挂载点的选择器
            data:可以是一个对象，也可以是一函数
                对象的属性是自定义的
        */
        const vm=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!~'
            }
        })
    </script>

data选项的后面也可以是一个函数

 /*
            通过new的方式调用构造函数来进行创建vue实例
            Vue的构造函数的参数是一个对象，该对象中的属性
            就是vue的选项，这里边的选项都是固定的
            el:vue挂载目标，这里的值是目标挂载点的选择器
            data:可以是一个对象，也可以是一函数
                对象的属性是自定义的
        */
        const vm=new Vue({
            el:'#app',
            data:function(){
                return{
                    message:'Hello Vue!!!!!!!'
                }
            }
        })

在HTML页面中渲染vue实例的data数据
如果要渲染vue中的data数据的方式很多，但是最常见的是一个插值表达式（双花括号）

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

使用来输出个人介绍

个人介绍
姓名：张三丰
年龄:25
专业：WEB前端
电话：13324567899

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <p id="p1">{{message}}</p>
    <p id="p2">{{message2}}</p>
    <p id="p3">{{message3}}</p>
    <p id="p4">{{message4}}</p>
    <p id="p5">{{message5}}</p>
    <script>
        const vue = new Vue({
            el:"#p1",
            data:function(){
                return{
                    message:"个人介绍",
                }
            }
        })

        const vue1 = new Vue({
            el:"#p1",
            data:function(){
                return{
                    message:"个人介绍",
                }
            }
        })
        const vue2 = new Vue({
            el:"#p2",
            data:function(){
                return{
                    message2:"姓名:张三丰",
                }
            }
        })
        const vue3 = new Vue({
            el:"#p3",
            data:function(){
                return{
                    message3:"年龄:25",
                }
            }
        })
        const vue4 = new Vue({
            el:"#p4",
            data:function(){
                return{
                    message4:"专业:web前端",
                }
            }
        })
        const vue5 = new Vue({
            el:"#p5",
            data:function(){
                return{
                    message5:"电话:12345",
                }
            }
        })
    </script>
</body>
</html>