vue基础-01-重点

vue 基础-day01-重点

01-基础-vue 是什么

1. vue前端js框架
2. 库: API需要自己调用
3. 框架: 满足条件 很多API自动触发

02-基础-为什么学vue

1. 传统开发模式: JQ+Reaquire.js+arttemplate+gulp
2. react / angular / vue

03-基础-vue 能做什么

1. 几乎没有DOM操作
2. 适合SPA项目开发
3. 传统网站

04-基础-vue 特点

1. 数据驱动视图 (双向数据绑定)
2. M-V-VM
3. 通过指令增强html,通过表达式{{}}使用数据
4. 组件化(封装html/css/js)

05-基础-一些链接

vue官网->需要收藏

06-基础-vue 三种安装方式

1. 本地文件
2. cdn
3. npm i vue

基础课阶段用的是第一种

vue不兼容<=IE8

07-基础-HelloWorld

需求: 把数据渲染到页面中

1. 提供容器div#app
2. 引入vue.js
3. 实例化Vue对象
4. 设置选项 比如 el和data等
5. 在视图中{{data中的数据}}

08-基础-实例选项-el

作用: 指定/设置 Vue实例所管理的视图区域

el值: 通常是id选择器

注意: el不能管理html或者body

09-基础-实例选项-data

作用: 声明数据的

data中的数据用法

1. 视图 {{msg}}
2. js中 vm.msg 或者vm.msg=新值

特点:响应式的 -> 数据变化时-> 视图中使用数据的位置自动更新

10-基础-实例选项-methods

作用: 声明函数

1. js代码 vm.fn()
2. js代码 this.fn()
3. 视图中 {{fn()}}
4. 视图中 v-on:click="methods中的方法名()"

11-基础-术语解释-插值表达式

作用: 将数据动态渲染到页面上

1. {{data中的数据}}
2. {{msg+"xyz"}}
3. {{a>b?"10":"20"}}

注意: {{变量声明/if/for}}不能写

12-基础-术语解释-指令

1. 代码位置:开始标签
2. v-开头
3. 每个指令都是取代之前的dom操作 每个指令作用和赋值方法不同

13-基础-系统指令-v-text 和 v-html

作用: 替换标签全部内容

不同: v-html可以渲染标签字符串->不安全

最常用: {{msg}}

14-基础-系统指令-v-if 和 v-show

场景:页面布局时 如果某些标签时而显示, 时而隐藏

条件渲染 : 根据bool值 true->显示 false->不显示

v-if和v-show

v-if 插入和移除

v-show display是否为none

如果标签显示和隐藏切换频繁 -> v-show

15-基础-系统指令-v-on

作用: 绑定事件

语法: @事件名.修饰符="methods中的方法()"

注意: $event

修饰符: once和prevent

16-基础-系统指令-v-for-数组

场景: 页面布局时 多个位置出现重复标签结构时

作用: 根据容器的内容 遍历对应的元素

语法: v-for="(v,i) in data中的数组名list"

17-基础-系统指令-v-for-对象

        <li v-for="(v,k,i) in per">{{v}}---{{k}}---{{i}}</li>

18-基础-系统指令-v-for-key

v-for使用 :key="i"

<li v-for="(v,i) in list" :key="i">{{v}}</li>

<li v-for="(v,k,i) in per" :key="i">{{v}}</li>

嵌套写法

 <ul>
            <li v-for="(v,i) in list" :key="i">
                <span>索引是:{{i}}</span>
                <span>元素是:{{v}}</span>
            </li>
        </ul>

19-基础-系统指令-v-bind-基础用法

作用: 绑定标签的任何属性

场景:当标签的属性的值 是变化/变量/要改值的

语法: <p :属性="data中的数据名"></p>

v-bind没讲完->style和class还没讲

20-基础-系统指令-v-model-基础用法

作用: (只能)绑定表单元素

单行文本输入框

        <input type="text" v-model="msg">

v-model

21-基础-表格案例-效果演示

1. 表格数据渲染
2. 添加商品
3. 删除商品

注意: html+css需要准备

22-基础-表格案例-列表渲染

准备

1. 容器
2. 引入
3. 实例化
4. 设置选项

表格渲染

1. 提供list数据
2. 找到重复的标签
3. v-for
4. 使用v-for的参数

处理无数据时的渲染

1. 找到条件渲染的标签
2. v-if
3. 确定v-if值的条件->bool->条件表达式 list.length===0