VUE初识

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

优点，大大提高开发效率

缺点，需要记忆语法规则

构建用户界面

创建vue实例，初始化渲染

1：准备容启

2：引包，开发版本和生产版本

3.创建vue实例 new Vue（）

4.指定配置项，渲染容器

1）el 指定挂载点   2）data提供数据

插值表达式

插值表达式：是一种vue的模板语法

1。作用，利用表达式进行插值，并渲染到界面上

表达式：是可以被求值的代码，js引擎会将其计算出一个结果

2.语法{{}}

3.注意点（1）使用的数据必须存在data

支持的是表达式，并非语句

不能在标签语句中使用{{}}插值

{{XX.toUpperCase()}}

{{或者拼接字符串}}

{{三元逻辑计算符}}

结论，如果得出结果的，都可以写入

不能直接写入标签的属性值

vue 响应式处理

数据变化，试图自动更新

安装vue开发者工具

vue指令

根据不同的指令，实现不同的功能

带有v-xx的标签

v-html解析标签内容

v-show 控制元素隐藏

v-show =“true” 控制底层的css，场景频繁的切换

v-if控制元素，显示隐藏（条件渲染）根据逻辑判断，加载语句和移除 不频繁的切换

v-else if   v -else 配合if一起使用

v-on监听事件的 注册事件，添加事件的监听+提供逻辑处理

语法，v-on：事件名=“内联语句”，

v-on：事件名 =“method中的函数名” v-on可替换为@

事件名加方法函数名

v-on调用传参 fn（a，b）

动态设置src路径 把内容写在标签里，用bind

简写：属性名 表达式

V-for 多次渲染整个元素

v-for="(item,index) in list " {{item}}

语法key属性，唯一标识

v-for,会尝试原地修改元素（就地复用）

key作用:
给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。注意点:
1.key 的值只能是字符串 或 数字类型
2.key 的值必须具有 唯一性
3.推荐使用 id 作为 key(唯一)，不推荐使用 index 作为 key(会变化，不对应)

v-model 给表单元素使用进行双向数据绑定，可以快速获取 设置 单元表格内容

Vue 指令 v-model
1.作用:给 表单元素 使用，双向数据绑定>可以快速 获取 或 设置 表单元素内容
0据变化视图自动更新
2视图变化数据自动更新
2.语法: v-model='变量