Vue基础详解

初识Vue

生命周期 

 vue安装

要先下载安装nodejs

安装好后,命令行中输入node -v

出现版本号,表示安装成功

同时因为npm是集成在node中的,只要node安装好,npm也会被安装好

 

 

 为了更加方便敲命令,下载,安装git,

安装好后在一个目录中点击鼠标右键👉git bash here

进入命令行

配置cnpm镜像(国内代理服务器,比从国外下载快很多)

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装vue-cli

cnpm install -g vue-cli

安装好后如下

创建一个基于webpack模板的新项目

vue init webpack my-project

安装依赖

运行项目

 访问相应的网址,进入工程的默认页

 创建好的工程目录

自己动手试一试~

src目录下新建pages目录,pages目录下新建demo1目录

demo1目录下新建文件index.vue

 编写index.vue文件

配置路由,让我们能访问这个页面

index.js

注意:require那一句结尾不要加分号

第二种方式:

访问demo1路径

app.vue中删除下图这一句,默认的vue图标就没有了

生命周期函数举例

index.vue

选项数据

 

 

 data函数:全局变量,放置数据

computed对象:放置各种函数

method对象:放置事件函数

 

 

 

 

 

 

模板语法

 1.data  选项数据中写过

 2.模板中直接嵌入js代码

 

 

 3.指令

v-html:把标签变成该属性对应标签的子标签

 

 

v-bind: 让标签的属性能够与data动态绑定

 

 v-on:绑定事件,简写方式为@

 

4.过滤器

页面

 

计算属性

 1.标签和js杂糅

 2.

 

 Class与Style动态绑定

v-bind指令

\

Class绑定

方式一.

方式二:

方式三:

 

Style绑定

条件渲染

 

如果ok为true

 

理解

 

相当于 

v-show

列表渲染

 

事件处理器

 

 stop 阻止事件冒泡

表单控件绑定

 

 

 

自定义组件 

 组件写法与普通vue页面一致

1.将组件导入页面

 

 

2.注册组件

3.将组件标签放到页面中

提高组件的灵活性(在不同页面可以有不同样式...)

结束时触发的函数

Vue中操作DOM

虚拟dom

只有在monted下才可以操作dom

因为monted阶段,DOM已经生成

过渡效果

点击显示,点击隐藏 

 

路由vue-router

用法二:

\

获取地址栏传过来的参数

query:问号后的参数

 js跳转

状态管理vuex

导入store

src中的main.js

 自己在工程目录的src目录下新建store目录,在store目录中创建index,js

index.js

Slot插槽

常用于组件调用中

vue-resource请求

 

移动组件库Mint UI

 

引入样式