Vue第二天基础指令

VUE的基本概念

要复习一下什么是表达式，变量是什么。
变量是一个容器，表达式原地都有返回结果，
var a = 10;
console.log(a); // a就是变量, 运行后使用变量里的值再原地打印
console.log(10 + 50); // 10 + 50 就是表达式
console.log(a > 9); // 这叫判断表达式, 原地结果是true
2.

new的作用和含义

new类名（）原地得到一个实例对象，对象上有key值和value值

实例化对象

new类名创造出来的对象，身上包含属性(key ,键(value))对应的值，

什么是属性和方法

let obj = { // 属性指的是a, b, c, d, e这些名字
a: 10,
b: [1, 2, 3],
c: function(){},
d () {},
e: () => {} // 值是冒号:右边的值
}
// 这个格式是固定的, 必须张口就来, 张手就写, 准确率100%

对象的复制和取值

有=（赋值运算符）就是赋值，没有就是取值
let obj = {
a: 10,
b: 20
}
console.log(obj.a); // 从obj对象的a上取值, 原地打印10
obj.b = 100; // 有=, 固定把右侧的值赋予给左侧的键, 再打印obj这个对象, b的值是100了

this的指向口诀

1.在function函数中，this默认指向当前函数的调用者 调用者。函数名（），指向的是函数名
2.箭头函数，this指向外层函数作用域的this值，我们vue一般多用function函数

为何学vue

1.让效率更高，
2.例如数组的遍历原生的js

直接在原有的标签中遍历v-for然后获取一个new vue的对象的data属性里面的arr遍历出来可以直接使用，还是响应式的

vue是渐进式的框架，不是库

库是封装的类型，
框架有自己的规则和元素

我们现在学习vue是在webpack环境中开发，因为这样是最省事，最快的方法

vue的脚手架

前一天哪个webpack的配置环境太麻烦，什么都要自己做，还要配置，我们直接下载一个@vue/cli包来创建脚手架项目
步骤如下：1.全局安装命令：yarn global add @vue/cli
2.查看脚手架版本
vue -V
3.创建项目启动服务：vue create vuecli-demo
4.选择模板：一般默认就行，vue2，然后一直回车
5.进入脚手架项目下, 启动内置的热更新本地服务器
yarn serve
6.只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

目录和代码分析

vuecil-demo # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文件目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文件(网页浏览的是它)
├── src # 业务文件夹
├── assets # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件
├── App.vue # 整个应用的根组件
└── main.js # 入口js文件
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置
├── package.json # 依赖包列表
├── README.md # 项目说明
└── yarn.lock # 项目包版本锁定和缓存地址
我们一般在components这里去创建项目，可以新建文件夹，但是要在mian.js配置一下入口文件，让他们产生关联，不然会报错