一、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. Unity3D4.* NGUI制作动态字库

    新建一个工程,这个工程必须没有中文路径,否则会不识别字体!!! 首先导入NGUI插件,这里我用的是NGUI 3.0.2版本的. 在Assets 下创建一个文件夹,用来存放接下来的工作文件 . 这里随便 ...

  2. UVa 1644 Prime Gap (水题，暴力)

    题意:给定一个数 n,求它后一个素数和前一个素数差. 析:先打表,再二分查找. 代码如下: #pragma comment(linker, "/STACK:1024000000,102400 ...

  3. <TLE>奇偶剪枝hdoj1010

    (奇偶剪枝)转自百度百科,讲的非常棒: http://baike.baidu.com/link?url=3g5bW7LszRVOVvFDFp6cL0ZZnAaOLUdpaNjc2leHoxkKU9Eh ...

  4. P5162 WD与积木（多项式求逆+生成函数）

    传送门 题解 比赛的时候光顾着算某一个\(n\)的答案是多少忘了考虑不同的\(n\)之间的联系了--而且我也很想知道为什么推着推着会变成一个二项式反演-- 设\(f_n\)为\(n\)块积木时的总的层 ...

  5. 跟我一起玩Win32开发（23）：渐变颜色填充

    GradientFill函数可以对特定的矩形区域或者三角形区域进行渐变颜色的填充.我们先来看看GradientFill函数到底长得什么样子,帅不帅. BOOL GradientFill( _In_   ...

  6. 排序二叉树 HDOJ 5444 Elven Postman

    题目传送门 题意:给出线性排列的树,第一个数字是根节点,后面的数如果当前点小或相等往左走,否则往右走,查询一些点走的路径 分析:题意略晦涩,其实就是排序二叉树!1<<1000 普通数组开不 ...

  7. sql 语句操作，修改字段中字符串的一部分

    update 表名 set 字段=replace(字段,‘替换的部分’,‘替换后的字符串’): update 表名 set A=replace( A, '海淀', '朝阳') where A like ...

  8. AO-XXXX

    一 AO4419:应用于开关应用或PWM应用的场效应管.

  9. C. Quiz 贪心　＋　数学

    http://codeforces.com/problemset/problem/337/C 题意是给出n个题目,那个人答对了m道,然后如果连续答对了k道,就会把分数double 求最小的分数是什么. ...

  10. java环境变量配置加maven配置

    1.安装JDK开发环境 下载网站:http://www.oracle.com/ 确定之后,单击“下一步”. 2.配置环境变量: 单击“计算机-属性-高级系统设置”,单击“环境变量”.在“系统变量”栏下 ...