位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > 使用Notepad(记事本)建立第一个Vue.js页面
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 编辑器类型 下一篇: 使用Dreamweaver建立第一个Vue.js页面

我们这里演示的是Windows7系统。

n  1步:找到电脑左下角,点击开始图标,如下图。

image.png

n  2步:点击所有程序,找到附件,如下图


image.png

n  3步:点击附件,找到记事本,如下图。

image.png

n  4步:打开记事本后,复制我们下面第一个Vue.je代码的内容到记事本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue入门第一个vue页面</title>
<!--引用互联网中vue.js的代码,后面会讲解如何引用本地vue.js的代码-->   
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
     <!--显示代码-->
     <div id="app">
       <!--显示变量message的内容,也就是显示”Hello Vue.js!“-->     
       <p>{{ message }}</p>
     </div>
     <!--脚本代码-->
     <script>
             new Vue({
               el: '#app',
               data: {
                      message: 'Hello Vue.js!'
               }
             })
     </script>
</body>
</html>

image.png

n  5步:点击文件,然后点击保存(或者按快捷键Ctrl+S)“第一个Vue页面.html”;按内容填写即可。


image.png

image.png


n  6步:点击我们刚才保存的“第一个vue页面.html”,电脑会用默认浏览器打开,如下。


image.png

附:我们也可以选中该文件,右键,打开方式,选择其他浏览器(我们这里选择谷歌浏览器)


image.png

效果如下图


image.png



上一篇: 编辑器类型 下一篇: 使用Dreamweaver建立第一个Vue.js页面
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)