初见Vue
一、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的更多相关文章
- 《微信小程序七日谈》- 第一天：人生若只如初见
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...
- Webpack + vue 搭建
前言: 为何使用webpack? 为何相对于gulp&grunt更有优势 WebPack(前往官网)可以看做是模块打包机:直接分析项目结构,找到JavaScript模块以及其它的一些浏览器不能 ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- sublime text 3中修改tab键为缩进4个空格
1. 菜单栏里点击 Preferences-> Setting-User, 如图 2. 在弹出来的文本里,添加如下两行: { // 注意只有一个大括号,如果之前有属性,如在之前的属性后确保有 , ...
- cocos2d-html5基础
1 环境搭建 版本Cocos2d-html5-v2.2,tomcat7.0 配置tomcat,然后直接解压Cocos2d-html5-v2.2.zip,访问解压后的根目录的index.html就可以看 ...
- mysqldump 工具使用详解——参数选项
mysqldump 简介 mysqldump 是一种用于逻辑备份的客户端工具,它会产生一套能够重新构建数据库或表的SQL语句.所谓逻辑备份:是利用SQL语言从数据库中抽取数据并存于二进制文件的过程.逻 ...
- SpringSercurity基础
创建 spring 配置文件 spring-security.xml intercept-url 表示拦截页面 /* 表示的是该目录下的资源,只包括本级目录不包括下级目录 /** 表示的是该目 ...
- iOS [CIContext initWithOptions:]: unrecognized selector sent to instance 模拟器 iOS 8.4
在模拟器(iPhone 4s,iOS 8.4)中运行应用时, 应用crash在了使用CIContext(options:nil) 这个API的一个纯Swift第三方库. StackOverFlow的解 ...
- Git如何克隆Gitlab？Git本地仓库如何上传Gitlab？
首先确保本机已经安装上Git,其次确认可以正常访问Gitlab服务器 环境: Git:Centos 7.x 192.168.126.138 Gitlab: Centos7.x 192.168.126 ...
- Codeforces Round #408 (Div. 2) B
Description Zane the wizard is going to perform a magic show shuffling the cups. There are n cups, n ...
- 7.1 Java集合概述
List 有序.重复的集合 Set 无序.不可重复的集合 Map 具有映射关系的集合 jdk1.5之后.Java增加了Queue体系集合,代表一种队列集合实现
- 152 Maximum Product Subarray 乘积最大子序列
找出一个序列中乘积最大的连续子序列(该序列至少包含一个数).例如, 给定序列 [2,3,-2,4],其中乘积最大的子序列为 [2,3] 其乘积为 6.详见:https://leetcode.com/p ...
- 分享一个实用任意路数PWM函数
一.什么是PWM? 1.科普一下什么是PWM,嘿嘿,莫闲啰嗦,好好看看,可能大多数人听过,但可能没详细了解过,至此不妨花费几分钟,详细了解哈,PWM中文译名为:脉冲宽度调制,即控制电路在输出频率不变的 ...