1.vue基础概念
1.什么是vue
vue是一个渐进式的javascript框架
渐进式 : 就是按需逐渐集成功能使用
框架和库 : 库是方法的集合, 一般是个js文件( 例如: jQuery / bootstrap )
框架是拥有自己一套规则和语法
2.开发vue
传统的开发 通过html页面引入vue webpack工程化下开发
3.vue文件
template 必须，提供组件的结构 html 注意：必须要一个根元素 div script 书写js代码 逻辑 style 处理样式，默认支持css 通过lang="less|scss" 可以使用less或者sass 需要安装依赖包
2.vue-cli(脚手架)
因为webpack太难配置了，vue官方提供了vue-cli用于创建一个vue项目
安装
yarn global add @vue/cli
处理化项目
vue create 项目名字
启动项目
yarn serve
目录结构：
关注点：src文件夹下App.vue
3.vue基础API_上半部分
声明式渲染
vue是一个mvvm框架
m: model 数据 v: view 视图 vm: ViewModel 视图模型 vue已经处理 双向数据绑定： v变了m会自动变 m变了，v会自动变 数据驱动思想：vue不推荐操作DOM，直接操作数据
v-bind动态属性
1.作用
1.将表达式的结果插入到当前位置
2.vue 变量改变,元素的属性值也会随之改变
v-on绑定事件
1.作用
绑定事件
2.用法
<a :href="vue变量" @click="事件处理函数">去百度
v-model双向绑定
1.作用
vue 变量和表单元素的 value 进行双向绑定
2.用处
不需要程序员手动操作 DOM 获取 value 值
3.用法
<input v-model="vue变量" type="text" /
4.修饰符
v-html指令
插值表达式
用于设置元素的部分内容
<div>{{msg}}</div>
v-html
用于设置元素的innerHTML
<div v-html="msg"></div>
标签可以生效，但是注意安全，，，，不要对于不可信的内容使用v-html
v-show
1.作用
控制元素的显示隐藏
2.原理
将元素从DOM 树上添加/移除
3.用法
<input v-if="vue变量" v-model="vue变量" type="text" /
v-if
1.作用
控制元素的显示隐藏
2.原理
将元素设置:display:none
3.用法
同 v-if
v-for指令
1.作用
遍历目标结构,根据数据数量渲染标签
2.数组
v-for="item in 数组" v-for="(item, index) in 数组"
4.Vue对象核心成员
1.data
1.作用
存放当前 vue 组件变量的
2.注意事项
1.是一个函数
2.methods
5.特点
1.双向绑定
2.数据驱动视图
如果数据变化了，则视图会自动跟着变
