首页 > Web开发 > 详细

1.Vue安装方式及其编写Hello Vue.js

时间:2020-07-15 01:32:03      阅读:47      评论:0      收藏:0      [点我收藏+]

一、Vue常用的安装方式

1.cdn方式安装

开发环境:

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

 

生产环境:

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

 

2.本地安装

进入Vue.is 官网:

https://cn.vuejs.org/v2/guide/installation.html

下载开发或者生产包:

技术分享图片

 

 

3.npm安装

nodejs下载网址:

https://nodejs.org/en/     

ps:如果嫌下载的慢,可以下载其他网站上的,别人有现成的,下载的比较快,直接无脑下一步就ok

 二、编写Vue第一个Hello,Word

1.下载vue本地开发库。

技术分享图片

 

 2.新建项目编写第一个vue程序(开发工具使用:WebStorm开发工具)

技术分享图片

 3.编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-HelloVueJs</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1> <!--通过 {{}} 动态获取值 -->
    <h2>{{name}}</h2>
</div>

<div> {{message}} </div>
<script src="../js/vue.js"></script>
<script>
    //let 变量 /const 常量
    //这种编程范式:声明式编程
    const  app = new Vue({
        el:#app, //用于挂载要管理的元素
        data: { //定义数据
            message:hello Vue.js,
            name:"编程小乐"
        }
    })

    //元素js 的做法(编程范式:命令式编程)
    //1.创建div元素,设置id属性
    //2.定义一个变量,设置id属性
    //3.将message 变量放在前面的div 元素中显示
    //4.修改message的数据:你好啊 vue.js
    //5.将修改后的数据再次替换到div元素中
</script>

</body>
</html>


 4.浏览器运行项目

技术分享图片

ps:以上代码地址下载:www.fuzongle.com

 

1.Vue安装方式及其编写Hello Vue.js

原文:https://www.cnblogs.com/fuzongle/p/13302895.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!