为什么要学习vue
-
公司对vue有要求 BOSS直聘
- 在主流框架：angular、vue、react中，vue最容易学习。
Vue课程介绍和基本概念
课程介绍
-
vue课程安排（22天）
-
vue基础：vue的全家桶（vue/vue-router/vuex/vue-cli）+webpack+ES6
-
vue进阶：项目实战（移动端+PC端）
-
vue介绍
-
vue优点：易用、灵活、高效。
1、易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
2、灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
3、高效：20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
-
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。
渐进式的概念
渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。
框架的概念
Library
-
代表：jQuery art-template moment
-
库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能
-
使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。
例：自己动手用工具榨果汁：
Framework
-
代表：vue、angular、react、bootstrap
-
框架，是一套完整的解决方案
-
使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码
例：用榨汁机榨果汁
库和框架的区别
- 使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
- 使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。
MVVM的概念
- MVVM，一种软件架构模式，决定了写代码的方式。
- M：model数据模型(ajax获取到的数据)
- V：view视图（页面）
- VM：ViewModel 视图模型
- MVVM通过
数据双向绑定让数据自动地双向同步 不在需要操作DOM- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）
Vue中的MVVM
虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例
注意：
1. 在vue中，不推荐直接手动操作DOM！！！
2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！
vue初体验
基本使用步骤
- 安装：
npm i vue - 引入
vue.js文件
<script src="vue.js"></script>
- 创建Vue实例，指定el和data参数
// 创建vue实例，需要指定el和data属性
const vm = new Vue({
// 指定vue的模版，值是一个选择器
el: '#app',
// 提供了vue中使用的数据
data: {
msg: 'hello vue'
}
})
- 在模版中显示数据
<div id="app">
// 通过{
{}}可以显示data中的数据
{
{msg}}
</div>
代码演示：
<body>
<!-- 安装vue npm i vue
2. 引入vue.js
3. 实例化vue
-->
<div id="app">
<h1>{
{msg}}</h1>
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello 01-vue初体验'
}
})
</script>
</body>
注意事项：
- 在开发阶段，一定要引入未压缩版的vue.js，因为压缩版的vue.js去除了警告信息和错误提示
- el不能是
html或者body - vue
html标签要写到模板中 - 模板不可以绑定在
body或标签上 { {}}不可以写在html标签的属性上
插值表达式
插值表达式：{
{}}，也叫Mustache语法，小胡子语法，因为长得像胡子
- 解释：使用
{ {}}（插值表达式）从data中获取数据，并展示在模板中 - 说明：
{ {}}中只能出现JavaScript表达式 - javascript 表达式：
- 特点： 一定有值。
- 常见的表达式有：
- 所有的javascript 数据类型 都是表达式。比如 1 ，‘a’ ，对象、数组，都是表达式。
- 数据类型和运算符的组合 ： 1+ 1 、 true ? ‘a’ : ‘b’ 。
- 识别表达式的技巧： 能出现在等号右边的内容都是表达式。 比如 const a= 1， const b= 1 + 1， const c= true ? ‘a’ : ‘b’
<h1>Hello, {
{ msg }}.</h1> 是
<p>{
{ isOk ? 'yes': 'no' }}</p> 是
<p>{
{ if (isOk){console.log('yes')}}}</p> 不是
<p>{
{ 1 + 2 }}</p>是
<p>{
{let str = 'hello vue'}}</p> 不是
<p>{
{ ['a', 'b', 'c'].map(function(item){return item}) }}</p> 是
<p>{
{ for(let i= 0; i < 10; i++){console.log(i)} }}</p>不是
代码演示：
<body>
<div id="app">
<h1 title="你好啊">hello, {
{msg}}</h1>
<p>{
{isok ? 'yes' : 'no'}}</p>
<p>{
{1+2}}</p>
<p>{
{['a', 'b', 'c'].map(function(item){return item})}}</p
最低0.47元/天 解锁文章
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
