vue全家桶基础

看网课过程中随笔记录，不全面没条理，有错误欢迎指正。

vue基础

文档
cn.vuejs.org
cli.vuejs.org
router.vuejs.org
vuex.vuejs.org/zh/

环境搭建

vue-cli@3
vue@2.5

1 npm install -g @vue/cli (淘宝cnpm替代安装)
#OR
2 yarn global add@vue/cli

创建命令：vue create vue-learn
新手babel+eslinte

Successfully created project vue-learn

npm run reserve

windows用户要安装git，用gitbish操作

viecli可视化界面

模板语法

vue文件组成部分

<template>

<script>

<style>

文本

<span>Message:{{msg}}</span>

原始HTML

<p>Using mustaches:{{rawHtml}}</p>
<p>Using v-html directive:<span v-html="rawHtml"></span></p>

<div v-html="msg1">

特性

<div v-bind:id="dynamicld"></div>

表达式

{{number+1}}{{ok?'YES':'NO'}}{{message.split(").reverse().jion(")}}

//一句话，必有返回值

porps 属性
传参入口

data(){
  return{
  msg1:'<span style="color:red;">HelloWorld</span>',
  seen:true，
  money:100,
  a:1
  }
}//是一个方法 多实例共享data 为什么data必须是函数

指令

<p v-if="seen">你现在看到我了</p>
<p v-else>你失败了</p>

cn.vuejs.org
教程

自定义指令

npm touch 指令

钩子函数

textcontent属性

binding.value

功能：不复杂到组件，比语句复杂，用自定义指令。
修饰符

<form v-on:submit.prevent="onSubmit">...</form>

prevent是修饰符

缩写

<a v-bind:href="url">...</a>
<a:href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

样式与遍历

计算属性

应用场景：具有依赖关系的数据监听

computed:{
  b:function(){
  return this.money-this.a;
  }
}

类与样式

对象语法
适合较多的class名或者动态的class
数组语法
适合较少的class

条件&列表渲染

按值索引，看虚拟DOM要不要变
循环
基础
if else 、for的模板处理
复杂
复杂模板的分组循环

组件

props:组件的参数传递
传送事件

父子组件通信

com标签

slot :灵活，复用性强。无限抽象组件，组
件抽象到和业务逻辑无关。
多个slot加name，然后给输出标签加属性slot=a(例)
可应用：动态加footer

vue想用的好，组件理解要深刻。

路由基础

vue-router

a,b页面跳转

import Vue from 'vue';
import VueRouter from 'vue-router'
import pageA from './pages/a.vue'
import pageB from './pages/b.vue'

Vue.use(VueRouter)
//配置一个路径
const routes ={
  {
   path:'/pagea',
   component:pageA//可自由命名
  }，{
   path:'/pageb',
   component:pageB//可自由命名
  }
}

const router = new VueRouter({ 
  routes
})

export default router

在vue关联项目。

配置

路由对应页面配置
配置实例化
dom结点，html文件挂载vue实例的结点必加

<router-view></router-view>

页面组件都渲染到这下面
不编译<template>
配置vue.config.js

router-link
（nuex-link）

Vuex基础用例

多组件共用数据
State也是数据，虽然不在data
State，Mutation，Action

vuex文档开始部分store的实现

ES6解构赋值

ES6模块导出
export default

mapActions：关联
mapState（看文档）
Action通过mutation改数据（见文档）

vuex高级用例

a.b.c页面用不同state管理

mkdir 命令
touch命令

mutation做state删改，
补充：外部改变state，传参

总结

今天是这个实战课学习第一天，对没接触过vue的我来说知识密度很大，视频讲解像划重点，讲明vue全家桶哪里最常用最重要，老师也一直在说要自己看文档。
正是我需要的课程。