VUE-基础 第一天
自我介绍
- 周淑刚
- 1229127923
- 工作经历：java开发 Android开发 前端开发 传智播客讲师
课程介绍
- vue基础
- vue项目
- 团队实战
- node中间层
vue是什么
- 是一个JS框架
- jquery 是一个库 bootstrap ui框架
- 库：提供一些API 工具函数 需要我们主动调用
- 框架：提供一套完整的解决方案 不需要主动的调用API 按照框架的约定完成功能
- 学习框架：学习它的约定 规则。
vue做什么
- 网站开发 适合做SPA（single page application）类型的网站开发
- 原理使用的技术 history.pushState() hash 地址栏#后的标识
- 传统网站 多个页面组成的网站 也可以使用
vue的特点
- 数据驱动视图->修改数据->视图修改 不需要操作dom
- 双向数据绑定->表单数据
- 使用M-V-VM开发思想 （MVC开发思想，分层开发思想，提高可维护性）
- 不支持IE8以下包含IE8
vue为什么学习它
- vue react angular
- angular 市场占有率 版本有断层 typescript
- react 现在使用最广泛的流行框架
- vue 最热的流行框架 入门简单
vue基础-安装
- 直接下载
- cdn地址
- npm 安装 npm i vue
vue基础-体验
<div id="app">
<p>
{{message}}
</p>
</div>
<script>
const message = 'hi vue'
const vm = new({
el:'#app',
data:{message}
})
</script>
vue-选项-el
- 作用：指定管理的视图区域
- 指定方式：通过选择器 或者 dom对象
- 不能指定 body html 标签做为视图
vue-选项-data
- 作用 指定vm中的响应式数据
- 注意：数据的使用需要提前申明
vue-选项-methods
- 作用：定义函数 提供给vm实例去使用
- 注意：fn(){} 推荐写法 不推荐使用箭头函数
- 函数中的this就是vm实例
vue-术语-插值表达式
- 在视图中渲染简单数据
- 可以使用 运算及函数 但是不建议使用
- 不能使用 分支循环语句 定义变量 ..
vue-术语-指令
- 以v-开头的特殊属性 vue支持的个数是有限的
- 增强元素标签的功能
vue基础-指令-v-text&v-html
- 作用都是替换使用该指令的元素的内容
- text 是文本输出 html 是html格式输出
- 扩展：xss攻击
vue基础-指令-v-if&v-show
- 切换元素的显示和隐藏
- v-if 是移除 添加
- v-show 显示和隐藏 display:none
- v-if 一次渲染的时候 v-show 频繁切换的时候使用
vue基础-指令-v-on
- 在vue中绑定事件
- 语法： v-on:事件名.事件修饰符=“fn()” v-on可以简写为@
- 注意：如果需要使用事件对象 固定写法 $event
- 事件修饰符：prevent once
vue基础-指令-v-bind
- 给任何属性绑定数据
- 语法： v-bind:属性名称=“数据名称” 简写 v-bind 去掉即可
- class style 特殊 待会再讲
vue基础-指令-v-for
- 变量数组和对象
- 数组 语法： v-for="(item,i) in list"
- 对象 语法： v-for=“(v,k,i) in obj”
- 补充 ： 在每一项数据 追加一个属性 :key=“唯一标识” 建议如果有ID使用ID没有考虑索引
vue基础-指令-v-model
- 只提供给表单元素进行数据双向绑定
- 这是一个语法糖：原理 通过v-bind绑定input的value属性，监听input事件触发时获取input的值在去修改data中的数据
