day1-vue

1.vue是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据动态渲染页面

渐进式：循序渐进

框架：一套完整的项目解决方案

vue使用方式：1.vue核心包开发——场景： 局部，模块改造 2.vue核心包&vue插件，工程化开发——场景：整站，开发

优点：大大提升开发效率 缺点：需要理解记忆规则——>官网

2.vue实例：

创建vue实例，初始化渲染

1.准备容器

2.引包(开发版本包 / 生产版本包) 官网

3.创建实例

4.添加配置项=>完成渲染

vue官网：v2.cn.vuejs.org

3.插值表达式: {{ }}

是一种 Vue 的模板语法

1.作用: 利用表达式进行插值, 渲染到页面中 表达式: 是可以被求值的代码, js引擎会将其计算出一个结果

2.语法: {{ 表达式 }}

注意: 使用语句必须存在 支持的是表达式, 而非语句 不能在标签属性中使用{{ }}来插值

4.Vue 核心特性: 响应式

比如: 数据的响应式处理-->响应式: 数据变化, 视图自动更新

5.Vue指令

Vue会根据不同的 指令 , 针对标签实现不同的 功能

1.指令: 带有v- 前缀的特殊 标签属性 v-html : 设置元素的innerHTML--语法 : v-html="表达式"

6.v-show vs v-if

1.v-show

作用 : 控制元素显示隐藏

语法 : v-show = "表达式" 表达式值 true 显示, false 隐藏

原理 : 切换 css 的 display: none 来控制显示隐藏

场景 : 频繁切换显示隐藏的场景

2.v-if

作用 : 控制元素显示隐藏 ( 条件渲染 )

语法 : v-if = "表达式" 表达式值 true 显示, false 隐藏

原理 : 根据 判断条件 控制元素的 创建 和 移除

场景 : 要么显示 , 要么隐藏 , 不频繁切换的场景

7.v-on

作用 : 注册事件 = 添加监听 + 提供处理逻辑

语法 :

1.v-on:事件名 = "内联语句"

2.v-on:事件名 = "methods中的函数名" 可传参数

简写 : @事件名

8.v-bind

作用 : 动态的设置html的标签属性

语法 : v-bind:属性名="表达式"

8.v-for

作用 : 基于数据循环 , 多次渲染整个元素

遍历数组语法 : v-for="(item, index)" in 数组

v-for中的key

作用 : 给列表项添加的唯一标识 , 便于Vue

9.v-mode

作用 : 给表单元素使用 , 双向数据绑定 可快速 获取 或 设置 表单元素内容

数据变化--->视图自动更新 视图变化--->数据自动更新