1.vue简介,vue是一个构建用户界面的框架。是一个轻量级mvv框架,和angular一样是所谓的双向数据绑定,数据驱动和组件化的前端开发,通过简单的api

实现响应式的数据绑定和组合试图组件,容易上手,小巧。

2.安装vue-devtools插件,便于在chrome中调试vue,配置是否允许vue-devtools检查代码,方便调试,生产环境设置为false,vue.config.devtools = false;

vue.config.productionTip=false;阻止启动生产消息。

3.常用指令。

v-model 双向数据绑定,一般用于表单元素。

v-for 对数组或对象进行循环操作,使用是v-for 不是v-repeat 

v-on 用来绑定时间,用法:v-on :时间 = ‘函数’

v-show/v-if 用来显示或隐藏元素,v-show 是通过display实现,v-if 是每次删除后在创建

4.事件和属性

v-on:click = " 简写 @click=""   

$event 事件对象,里面包括事件相关信息,如事件源,时间类型,偏移量等

事件冒泡,原生js方式,依赖于事件对象,vue方式,不依赖于事件对象,@click.stop 来阻止事件冒泡;

键盘事件:@keydown.13 或keydown.enter  

事件修饰符  .stop  调用event.stopPropagation();

v-bind 用于属性绑定,用法 v-bind:属性=“”   举例 v-bind:src="" 简写  :src=""

5。模板

vue.js 使用基于html的模板语法,将dom绑定到vue实例中的数据模板就是{{}}  用来进行绑定数据显示在页面中

双向绑定  v-model 

单项绑定  {{}} 可能会出现闪烁问题, 也可以使用v-text  v-html

其他指令  v-once 数据绑定一次  v-pre 不变异,直接原样显示

6.过滤器

用来过滤模型数据,在显示之前进行数据对的处理和筛选

语法: {{data | filter(参数) |filter(参数)}}

内置过滤器,2.0之后都删掉,如果使用可以借助第三方库  如lodash data-fns 日期格式化 accounting.js 货币格式化以及自定义

7.发送ajax请求

vue本身不支持发送ajax请求,需要使用vue-resourc axios等插件实现,建议使用axios

axios是一个基于promise的http请求客户端,用来发送请求

基本用法:

axios.get(url[,options]);  传参方式,url或者params传参

axios.post(url,data,[options]);

注意:axios默认发送数据时,数据格式是request payload,并非我们床用的form data格式,所以参数必须要以键值对像是传递

,不能以json形式传参

传参的方式: 自己拼接键值对,使用transformrequst 在请求发送前将请求数据进行转换,或者使用qs模块进行转换

axios不支持跨域请求,可以使用vue-resource 发送跨域请求。

跨域发送请求: this.$http.get(url,[options]);    this.$http.post(url,[options]);

8.vue生命周期

vue实例从创建到销毁过程成为生命周期

9。计算属性

计算属性也是用来存储数据,具有这俩个特点:数据可以进行逻辑处理操作,对计算属性中的数据进行监视。

10.vue实例属性和方法

属性 vm.$el  vm.$data vm.$options vm.$refs

方法 vm.$mount()  vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm.$watch(data,callback)

11,自定义指令

自定义全局指令   vue.directive (指令id,定义对象)

12.过度(动画)

vue在插入更新或一处dom时,提供多种不同方式应用过程,本质还是使用css动画,

基本用法: 使用transition组件,将要执行动画的元素保函在改组件内

结合第三方动画库  animater.css 一起使用

  <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>  


13.组件

组件是vue最强大的功能之一,组件可狂战html元素,封装重用代码,组件是自定义元素对象。

定义组件方式,a>先创建组件构造器,然后由组件构造器创建组件。b>直接创建

引用模板讲组件内容放在模板<template>中引用,组件中数据data;function  和vue实例存储数据不同

componect :is=""  组件,多个组件使用同一个挂的点,动态切换,

      keep-alive 缓存组件,避免从新创建,效率比较高

使用方法  <keep-alive><componect :is="">   

数据传递:父子组件,在一个组件内部又定义了另一个组件,称为父子组件。

       子组件只能在付组件中使用,默认情况下,子组件不能访问付组件数据。每个组件的作用域是独立的。

       组件间数据的通信:在调用组件时,绑定想要获取的付组件的数据,在子组件内部,使用props选项来生命获取

的数据,接收来自付组件的数据。例子:props:['msg']   props可以是数组,也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验,设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值,

对象必须使用函数返回。

组件中的数据有三种形式:data  props computed 

付组件访问子组件数据方式:

a.在子组件中使用vm.$emit(事件名,数据) 出发一个自定义事件,事件名自定义

b.付组件在使用子组件的地方监听子组件出发事件,并在付组件中定义方法,用来获取数据

单项数据流:

props是单项绑定的,当付组件的属性变化时,将传导给子组件,但是不会反过来,而且不允许子组件直接

修改付组件中的数据

解决方案: a.如果子组件享把他作为局部数据来使用,可以将数据存入另一个变量在操作

b.如果子组件想修改数据并同步付组件,使用.sync  2.3开始支持,或者将付组件数据包装成udixiang,

然后在子组件中修改对象的属性。

非父子组件间通信:

可以通过一个空的vue实例来作为中央事件总线,用他来出发事件或监控事件

var Event = new Vue();    空对象

Event.$emit(事件名,数据);  发送数据

Event.$on(事件名,data=>{})  监听接收数据

slot内容分发:

用来获取组件中的元内容,就是组件标签中的内容;

获得指定标签内容可以给标签定义  slot="s1"   获取  <slot name="s1"/>

14.vue-router 路由

使用vue.js 开发spa 单页面应用,根绝不同url地址,显示不同内容,但实现在统一页面红,称单页面应用。

bower info vue-router    cnpm install vue-router -S

<div id="itany">
<div>
<!-- 使用router-link组件来定义导航,to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</div>
</div>


<script>
//1.定义组件
var Home={
template:'<h3>我是主页</h3>'
}
var News={
template:'<h3>我是新闻</h3>'
}


//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]


//3.创建路由实例
const router=new VueRouter({
routes, //简写,相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});


//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知识点:<style scoped> /* scoped表示该样式只在当前组件中有效 */

路由嵌套和参数传递:

a.查询字符串   login?name=tome&pwd=123     显示  {{$route.query}}

b。rest风格url       regist/alice/324    显示获取 {{$router.params}}

路由实例的方法:

router.push();  添加路由,功能和<route-link> 相同,都是跳转页面

router.replace() 替换路由,和上功能一样,不产生历史记录

单文件组件:

.vue 文件称单文件组件,是vue.js 自定义的文件格式,一个.vue文件就是一个单独的毒箭,在文件内封装了

单独的js  css html

.vue文件由三部分组成  template style  script

vue-loader 浏览器本身不认识你.vue文件,所以必须对.vue文件加载解析,此时需要vue-loaderleisi 的loaderhaiyou 

很多,html-loader css-loader style-loader  babel-loader  需要注意vue-loader 是计划于webpack的

webpack 是一个前端资源模块化加载器和打包工具,

安装相关模板:

cnpm install vue-template-compiler -D //预编译模板
    合并:cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

运行测试:  npm run dev

15.脚手架 vue-cli

    vue-cli是一个vue脚手架,可以快速构建项目结构,

常用项目模板: webpack 保函EsLint代码么规范检查和unit单元测试,

webpack-simple 没有代码检查和单元测试

browserify 使用的也比较多

browserigy-simple

安装vue-cli,配置vue命令环境 
    cnpm install vue-cli -g
    vue --version
    vue list
 初始化项目,生成项目模板
    语法:vue init 模板名  项目名
 进入生成的项目目录,安装模块包
    cd vue-cli-demo
    cnpm install
 运行
    npm run dev  //启动测试服务
    npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
 使用webpack模板
    vue init webpack vue-cli-demo2
    ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格
16.模块化开发

   首先在一个目录下 vue init webpack-simple vue-cli-demo 创建项目

  进入目录  cd vue-cli-demo       cmpn install   然后  npm run dev  运行测试

cmpn install vue-router -S       -S是生产依赖的意思;

编辑main.js  import VueRouter form ''vue-router'     vue.use(Vue/router); 使用之后全局都可以用

编辑app.vue  编辑 router.config,js 

cnpm install axios -S

使用axios俩种方式:

a.在使用axios的组件中,都要引入axios  import axios from 'axios'      axios.get('url').then(resp ->{resp.data});.catch(eorr->){}

        b.在main.js 中全局引入  import axios from 'axios'  并添加到vue原型中 vue.prototype.$http=axios;  然后其他组件可以

vue.$http.get(); 或 this.$http.get();

为自定义组件添加事件:

比如自定一个button   vue注册    默认不能绑定@click=send   这样写  @click.ntaive=send 就可以

17ui库  element ui

是一个ui的组件库,是饿了么提供的一套基于vue 2.0的组件库  可以快速开发网址,提高效率

  element ui  pc端   mintui  移动端 官网  element.eleme.io

cnpm install element-ui -S

npm run dev

在main.js 引入并使用这个组件  import ElementUI from 'elemtn-ui'  import element-ui/lib/eheme=default/index.css

vue.use(ElementUI);  这种引入方式是引入全部的组件内容

在webpack.confgi.js 中添加loader   test:/\.css$/,loader:'style-loader!css-loader'

cnpm instal  style-loader -D    字体字库loader配置

webpack配置更改要重启

动态样式  是使用less

使用less  安装loader   less  less-loader  配置  test:/\.less$/,loader:less-loader     指定style l ang=less  必须指定样式

自定义全局组件:

全局组件:可以在main.js 中使用vue.use 进入全局引入,然后在其他组件中都可以使用

创建 。vue组件,创建index.js文件   import Login from './Login.vue'
export default {
install:function(Vue){
Vue.component('Login',Login);
}
}

普通组件:每次使用都要引入,如axios

18.vuex 状态管理模式,采用集中式存储,管理应用所有组件的状态,简单说集中管理数据,类似于react中的redux,基于flux

前段状态管理框架。

基本使用:nmp install vuex -S

创建store.js 文件,vuex相关配置。在main.js 中导入,import store fomr './store.js    main.js 配置store选项,子组this.$store

import vue fomr vue  import vuex from vuex   vue.use(vuex);

vuex核心store  相当于一个容器,一个store实例中包含一下属性和方法:

getters 获取属性

actions 定义方法  动作,如流程判断  异步请求   const action={ 方法名(context){})}   context 对象有comit  dispatch state

commit 提交的意思,修改数据唯一方式, conmit('add) 提交一个叫add的变化

mutations 定义变化

var state= { count:6}   //创建store对象   const store=new Vuex.Strore{{state}}; vargetters ={count)(){return state.count}} export default store;

编辑 app。js 编辑store,  作为计算属性:computed:(){return this.$store.state.count};

方式一   this.#store访问  方式二  mapGetters mapActios访问

mapGetter 获取属性

mapActions 获取方法

导入辅助函数  import {mapGetter} from vuex

computed:mapGetters{('count')}









Logo

前往低代码交流专区

更多推荐