Vue.js入门学习（1）

最新推荐文章于 2024-06-12 08:41:10 发布

SophiaWoo

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量734

点赞数

分类专栏：大二暑假学习日志文章标签： vue 前端 mvvm 框架 vue.js

本文链接：https://blog.csdn.net/sophiawoo/article/details/51908614

版权

大二暑假学习日志专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概述：

Vue.js 是一个轻量级的简单灵活可拓展的数据驱动的组件，可进行组件化的UI构建。简单来讲，Vue.js 聚焦在MVVM模式的ViewModel层，通过双向数据绑定连接视图和模型。

他和其他同类框架的比较可以参考http://cn.vuejs.org/guide/comparison.html

安装：

学习一个东西，从安装开始。你可以选择通过<script>标签来引用，也可以用npm install vue或者bower install vue来安装。

最简单的demo：

安装完，先来个hello world体验一下。简单来说，就是一个HTML 模板 + JSON 数据，再创建一个 Vue 实例。

<!DOCTYPE html>
<html>
    <head>
        <title>vue demo</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
          {{ message }}
        </div>
        <script>
            new Vue({
              el: '#app',
              data: {
                message: 'Hello Vue.js!'
              }
            })
        </script>
    </body>
</html>

是不是很简单就单向绑定了一个数据。

想要进行双向绑定，先来看一个概念：v-model，类似angularJS里的ng-model，当v-model改变时，双重花括号指代的内容也会跟着改变，例子如下：
<!DOCTYPE html>
<html>
    <head>
        <title>vue demo</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
          <p>{{ message }}</p>
          <input v-model="message">
        </div>
        <script>
            new Vue({
              el: '#app',
              data: {
                message: 'Hello Vue.js!'
              }
            })
        </script>
    </body>
</html>

看完这两个例子，把文档过一遍。在后面的学习中，将具体学习vue.js的指令和组件，并搭配webpack尝试构建项目。

关于webpack的入门，下午看了一篇博客，作者从零开始讲，非常适合我这种入门自学的菜鸟学生，在这里mark一下（http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/）

资料传送： http://cn.vuejs.org/

SophiaWoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门学习（1）

概述：Vue.js 是一个轻量级的简单灵活可拓展的数据驱动的组件，可进行组件化的UI构建。简单来讲，Vue.js 聚焦在MVVM模式的ViewModel层，通过双向数据绑定连接视图和模型。他和其他同类框架的比较可以参考http://cn.vuejs.org/guide/comparison.html安装：学习一个东西，从安装开始。你可以选择通过标
复制链接

扫一扫