位置:电子教程 > Vue.JS入门教程 推荐学习资源
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入门教程 > Vue.js简介
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Vue.js入门 下一篇: Vue.js编辑器

image.png

Vue.js(读音 /vjuː/, 类似于 view 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的   API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单,本教程基于 Vue 2.x版本测试。

阅读本教程前,您需要了解的知识:

n  HTML

n  CSS

n  JavaScript


入门实例

这里先给大家展示了一个入门案例的代码和效果图

小白教程网www.2d5.net

。大家先了解,我们在接下来小节会教大家如何一步一步使用建立这个页面。

效果图

小白教程网www.2d5.net

image.png

代码
<!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>


上一篇: Vue.js入门 下一篇: Vue.js编辑器
QQ交流群:147415688             广告联系QQ:45157718(微信同号)