Vue学习日志：初识VUE（1）
2017-11-14 23:17
459 查看
一、概念
Vue.js（读音 /vjuː/，类似于 view）
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue
生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
二、安装
1、兼容性
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容
ECMAScript 5 的浏览器。
2、开发版本
直接下载并用script标签引用，Vue会被注册成一个全局变量。
CDN：
推荐：unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览
npm 包资源。
也可以从jsdelivr或cdnjs获取，不过这两个服务版本更新可能略滞后。
3、NPM
在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或Browserify 模块打包器配合使用。
Vue.js 也提供配套工具来开发单文件组件
# 最新稳定版
$ npm install vue独立构建 vs 运行时构建
有两种构建方式，独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。
模板编译用于编译 Vue 模板字符串成纯 JavaScript 渲染函数。如果你想用 template 选项， 你需要编译。
模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项，你就需要编译器。
。独立构建包含模板编译器并支持 template 选项。 它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。
。运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。运行时构建比独立构建要轻量30%，只有 16.39 Kb min+gzip大小。
默认 NPM 包导出的是 运行时 构建。为了使用独立构建，在 webpack 配置中添加下面的别名：
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}4、命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
# 全局安装
vue-cli$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
在安装之前要检测自己的node和cpm，国内建议使用cnpm
5、开发版本
重要: Github 仓库的 /dist 文件夹只有在新版本发布时才会更新。如果想要使用 Github 上 Vue 最新的源码，你需要自己构建。
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build6、Bower
独立下载版本或通过 Bower 安装的版本已用 UMD 包装，因此它们可以直接用作 AMD 模块。
三、简单介绍
1、声明式渲染
个人理解就是数据的绑定。
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
2、条件和循环
条件渲染和列表渲染
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
<div id="app-2">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
</script>
</body>
</html>
3、用户输入处理
todo
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
<div id="app-2">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>4、组件化应用构建
组件模板化
Vue.js（读音 /vjuː/，类似于 view）
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue
生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
二、安装
1、兼容性
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容
ECMAScript 5 的浏览器。
2、开发版本
直接下载并用script标签引用，Vue会被注册成一个全局变量。
CDN：
推荐：unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览
npm 包资源。
也可以从jsdelivr或cdnjs获取，不过这两个服务版本更新可能略滞后。
3、NPM
在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或Browserify 模块打包器配合使用。
Vue.js 也提供配套工具来开发单文件组件
# 最新稳定版
$ npm install vue独立构建 vs 运行时构建
有两种构建方式，独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。
模板编译用于编译 Vue 模板字符串成纯 JavaScript 渲染函数。如果你想用 template 选项， 你需要编译。
模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项，你就需要编译器。
。独立构建包含模板编译器并支持 template 选项。 它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。
。运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。运行时构建比独立构建要轻量30%，只有 16.39 Kb min+gzip大小。
默认 NPM 包导出的是 运行时 构建。为了使用独立构建，在 webpack 配置中添加下面的别名：
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}4、命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
# 全局安装
vue-cli$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
在安装之前要检测自己的node和cpm，国内建议使用cnpm
5、开发版本
重要: Github 仓库的 /dist 文件夹只有在新版本发布时才会更新。如果想要使用 Github 上 Vue 最新的源码，你需要自己构建。
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build6、Bower
# 最新稳定版本 $ bower install vue7、AMD模块加载器
独立下载版本或通过 Bower 安装的版本已用 UMD 包装，因此它们可以直接用作 AMD 模块。
三、简单介绍
1、声明式渲染
个人理解就是数据的绑定。
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
2、条件和循环
条件渲染和列表渲染
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
<div id="app-2">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
</script>
</body>
</html>
3、用户输入处理
todo
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
<div id="app-2">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>4、组件化应用构建
组件模板化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ol>
<!--现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，
即其内容可以是动态的。我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
<script type="text/javascript">
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其他什么人吃的东西' }
]
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue学习日志：计算属性（4）
- Vue学习日志：事件处理器（8）
- Vue学习笔记一：初识vue
- Vue学习之初识Vue框架
- Python学习日志第一篇——初识Python
- vue学习日志（1）
- vue学习日志（二）
- 《视觉SLAM十四讲》学习日志(二)——初识SLAM
- Linux学习日志:linux文件系统初识
- Rust日志学习（一）—— 初识Rust log
- Vue学习日志：模板语法（3）
- Python学习日志之Python数据结构初识
- Vue学习日志：条件渲染（6）
- Python学习日志之Python数据结构初识
- Python学习日志之Python数据结构初识
- 小Y的Python学习日志--初识Python
- 初识VUE,万般留恋,看数据似在眼前（VUE学习第一课）
- Vue2.0基础学习（3）--- 一个简单的实例学习
- vue组件学习6（props传参）
- 学习DirectDraw日志