一、What

官方定义：是一套用于构建用户界面的渐进式框架。这，what？不明觉厉，我反正现在还是不知道，在这之前，就只知道Vue.js是用来渲染数据的，其实它的核心库只关注视图层。不多说，用多了就知道了。

二、How

因为Vue.js本身就是JavaScript脚本，那么要使用它，就必须要引入。可以使用在线的方式引入，这里选择使用NPM包管理器下载到本地，然后再引用。

命令如下：

npm init -f # 初始化一个含有package.json的空项目

npm install vue # 安装vue

然后就将vue的所有脚本下载了下来，vue结构如下：

lichen-pc% ls node_modules/vue

dist  LICENSE  package.json  README.md	src  types

三、Do Now

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <!-- 3.数据渲染根元素-->

    <div id="app">

    {{ msg }} <!-- 插值模板语法 {{}}-->

    </div>

    <!-- 1.引入vue-->

    <script type="text/javascript"  src="../node_modules/vue/dist/vue.js">

    </script>

    <!-- 2.创建实例化vue对象-->

    <script type="text/javascript">

    // new出vue对象

    new Vue({

        el: "#app", // 数据渲染的目标根元素

        template: ``, // 模板(可选)

        // 从服务端接收到的数据

        data: function() {

            // 模拟出服务端返回的数据

            return {

                msg: 'Hello Vue'

            }

        }

    });

    </script>

</body>

</html>

在浏览器中打开该HTML页面，就会发现数据成功渲染了。

初见Vue的更多相关文章

  1. 《微信小程序七日谈》- 第一天：人生若只如初见

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  2. Webpack + vue 搭建

    前言: 为何使用webpack? 为何相对于gulp&grunt更有优势 WebPack(前往官网)可以看做是模块打包机:直接分析项目结构,找到JavaScript模块以及其它的一些浏览器不能 ...

  3. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  4. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  5. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  6. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  7. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  8. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  9. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. View Programming Guide for iOS ---- iOS 视图编程指南(二)---View and Window Architecture

    View and Window Architecture 视图和窗口架构 Views and windows present your application’s user interface and ...

  2. django上课笔记4-复习数据库操作-复习模板-Seccion-详细cookie和session的区别

    一.复习数据库操作 字段类型 字符串 EmailField(CharField): IPAddressField(Field) URLField(CharField) SlugField(CharFi ...

  3. 037--pymysql和SQLAchemy

    一.pymysql操作 1.执行SQL #!/usr/bin/env python # -*- coding:utf-8 -*- import pymysql # 创建连接 conn = pymysq ...

  4. bzoj 3173: [Tjoi2013]最长上升子序列【dp+线段树】

    我也不知道为什么把题看成以插入点为结尾的最长生生子序列--还WA了好几次 先把这个序列最后的样子求出来,具体就是倒着做,用线段树维护点数,最开始所有点都是1,然后线段树上二分找到当前数的位置,把这个点 ...

  5. 不常见偏门的Bug，Spring Boot IDEA 静态资源 图片访问404，初学者之殇

    用过Idea朋友都知道,它有一个非常让人喜欢的功能就是:打算在某个a目录下创建一个hello.class文件,那么你仅需要右键点击New-Java Class- 然后输入名字:a.hello 即可. ...

  6. selenium中Xpath和CSS Selector的使用方法

    一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...

  7. Educational Codeforces Round 46 (Rated for Div. 2) B. Light It Up

    Bryce1010模板 http://codeforces.com/problemset/problem/1000/B 思路:先用两个数组sumon[]和sumoff[]将亮着的灯和灭的灯累计一下. ...

  8. EOJ Monthly

    ###2018.10 A.oxx 的小姐姐们 oxx 和他的小姐姐(们)躺在图书馆前的大草坪上看星星. 有强迫症的 oxx 想要使得他的小姐姐们正好躺成一块 n×m 的长方形. 已知小姐姐的形状是 1 ...

  9. 浅析String

    浅析String String的设计结构: 首先我们看一下 String的源码 public final class String     implements java.io.Serializabl ...

  10. SpringMVC和MyBatis的整合

    这里我们需要用到一个关键的jar包——Spring-MyBatis,它会帮你将MyBatis代码无缝地整合到Spring中.具体可以参考http://www.mybatis.org/spring/zh ...