Vue学习第一天

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

Vue的工程目录介绍

1. assets存放项目中需要用到的资源文件，html，css，images
2. componets：存放Vue开发中一些公共组件
3. router：vue的路由配置文件
4. views：存放页面文件
5. app.vue：根组件
6. main.js：项目的入口文件，定义了vue的实例并引入根组件app.vue，将其挂载到index.html中id为app的节点上

Vue创建实例的过程

指定配置项中el指定的是挂载点，即渲染的是选择器对应的html标签的内容

data提供的是数据，即内容

{{Name}}

声明式渲染

template是模板的意思，每一个vue文件中必须要有一个，在这里写HTML代码

在script标签中写js代码，在style标签中写css代码

在template里面只允许有一个块状元素，其他所有标签都在这个块状元素内

插值表达式渲染--字符串

插值表达式渲染--数组

插值表达式渲染--对象

响应式特性

响应式：数据变化，视图自动更新

data里面的数据都是响应式数据

访问数据：实例.属性名

修改数据：实例.属性名 = 值

Vue指令

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

指定：带有v-前缀的特殊标签属性

动态解析标签内容

v-html可以动态解析标签内容，写在标签的属性当中

处理用户输入

用户输入就是input、textarea，或者可以将select、单选、复选等当作用户输入来对待

v-model(双向绑定)

首先定义一个基础的HTML代码结构

当我们在下面的input标签中输入内容的时候，上面的框会跟随改变

定义要用到的变量

v-show

作用：控制元素的显示和隐藏

语法：v-show="表达式",表达式的值为true则显示，表达式的值为false则隐藏

v-show的底层原理：本质上是控制css的display：none来控制显示隐藏

更加适合频繁切换显示隐藏的场景

v-if

作用：控制元素的显示和隐藏

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

v-if的原理是：基于条件判断，是否创建或删除元素

适合不频繁切换的场景

v-else和v-else-if

作用：辅助v-if进行判断渲染

语法：

• v-else 直接表达的是否则
• v-else-if="表达式"

v-on

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

可以添加任何事件

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

可以将v-on:替换成@

-
{{count}}

1. v-on:事件名="methods"中的函数名

让提供的所有methods中的函数，this都指向当前实例new出来的Vue，可以提高代码的维护

切换显示和隐藏
Vue
  
  
  

v-on调用传参

按钮

v-bind

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

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

可以把v-bind:属性名改成:属性名

v-for

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

语法：v-for="(item,index) in 数组名"

item表示的是数组的元素

index表示的是数组的下标