WebStorm新建vue项目之HelloWorld

Vue.js的引入之HelloWorld基本步骤

    • 写在前面
    • 说明
    • 步骤
    • 运行结果
    • 写在后面

写在前面

第一次写这种教程,搜了一下网上的感觉比较繁琐,需要配环境啥的,这个方法只需引入一个js文件即可。适合刚入手写几个简单的项目用。

说明

电脑Windows10系统,用的编程软件是WebStorm ,没有安什么环境,(目前hello world能运行,复杂的还没进行测试)

步骤

  1. 新建一个空项目
    WebStorm新建vue项目之HelloWorld_第1张图片
  2. 在项目上右键新建一个文件夹js
    在这里插入图片描述

3.点击链接获取: vue.js.
WebStorm新建vue项目之HelloWorld_第2张图片
选择开发版本将vue.js下载到本地。

4:将vue.js拷贝到js文件夹下
在这里插入图片描述
5.右键项目(untitlend1)新建一个hello.html文件(项目结构)
WebStorm新建vue项目之HelloWorld_第3张图片
将代码复制到hello.html文件中,即可运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div><!--插值表达式-->
    <div>{{1+2}}</div>
    <div>{{msg + '---' + 123}} </div>
</div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
            Vue的基本使用步骤
            1、需要提供标签用于填充数据
            2、引入vue.js文件
            3、可以使用vue的语法做功能了
            4、把vue提供的数据填充到标签里面
         */
    var vm = new Vue({
        el: '#app',<!--元素的挂载位置-->
        data:{    <!--模型数据-->
            msg: 'hello'
        }
    });
    </script>

</body>
</html>

运行结果

WebStorm新建vue项目之HelloWorld_第4张图片

写在后面

小白一枚,刚接触vue,过程可能写的不是很详细,有什么不足和错误,希望大家能够指出 :-)

你可能感兴趣的:(程序人生,vue.js,vue)