Vue学习记录网站首页 学无止境

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    //定义student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生名称：{{ name }}</h2>
          <h2>学生年龄：{{ age }}</h2>
          </div>
        `,
        data() {
            return {
                name: 'JOJO',
                age: 20
            }
        }
    })

    //定义school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ name }}</h2>
          <h2>学校地址：{{ address }}</h2>
          <student></student>
          </div>
        `,
        components: {
            student
        },
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        }
    })

    //定义hello组件
    const hello = Vue.extend({
        template: `
          <h1>{{ msg }}</h1>
        `,
        data() {
            return {
                msg: "欢迎学习尚硅谷Vue教程！"
            }
        }
    })

    //定义app组件
    const app = Vue.extend({
        template: `
          <div>
          <hello></hello>
          <school></school>
          </div>
        `,
        components: {
            school,
            hello
        }
    })

    //创建vm
    new Vue({
        template: `
          <app></app>
        `,
        el: '#root',
        components: {
            app
        }
    })
</script>
</html>

语法

ref：用来给元素或子组件注册引用信息（id的替代者），应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象（vc）

<button @click="show" ref="btn1">点我输出ref</button>
  console.log(this.$refs.btn1)

props声明：就好像接口的参数，我在组件里定义好参数变量，使用时可以传参方式修改变量

使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

mixin混入：把多个组件共用的配置提取成一个混入对象，组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先

plugin插件：用于增强Vue，包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据，比如vuex就是插件，了解即可，后面很多插件都是封装好的

scoped样式：让样式在局部生效，防止冲突，一般不用再APP.vue里

<template>
  <div class="scopeddemo">
    <h2>学生姓名：{{ name }}</h2>
  </div>
</template>
<style scoped>
.scopeddemo {
  background-color: chartreuse;
}
</style>

WebStorage：我理解是js的缓存，或者说通过函数操作java对象的那种感觉

存储内容大小一般支持5MB左右
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
SessionStorage窗口关闭消失，localStorage需手动清除

<script>
    let person = {name:"JOJO",age:20}
    function saveDate(){
        localStorage.setItem('msg','localStorage')
        localStorage.setItem('person',JSON.stringify(person))
    }
    function readDate(){
        console.log(localStorage.getItem('msg'))
        const person = localStorage.getItem('person')
        console.log(JSON.parse(person))
    }
    function deleteDate(){
        localStorage.removeItem('msg')
        localStorage.removeItem('person')
    }
    function deleteAllDate(){
        localStorage.clear()
    }
</script>

自定义事件：待学习

全局事件总线：一种组件间通信的方式，适用于任意组件间通信

核心插件

axios

全局反向代理，有axios和vue-resource(不维护了)两个库，先安装 npm install axios

主要是封装了 XMLHttpRequests / ajax 的 HTTP 库,用来像后端发请求

--直接在main.js添加代理，或者复杂规范点就新建一个config.js统一配置
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8081/api'
Vue.prototype.$axios = axios
--可以有多个配置，之后可在其他组件中通过 this.$axios 发送数据
--可以在</script>里面写按钮触发调用了
methods: {
  login () {
    this.$axios
      .post('/login', {
        username: this.loginForm.username,
        password: this.loginForm.password
      })
      .then(successResponse => {
        if (successResponse.data.code === 200) {
          this.$router.replace({path: '/'})
        }
      })
      .catch(failResponse => {
      })
  }
}

插槽slot：一种组件间通信的方式，主要作用是让父组件可以向子组件指定位置插入html结构

有默认插槽、具名插槽、作用域插槽3种分类

Vuex

Vuex是什么

管理共享状态，专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信，npm i vuex

什么时候使用Vuex

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态

Vuex的基本使用：

初始化数据state，配置actions、mutations，操作文件store.js
组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

--大致流程就这样，有很多用法，初学现在了解即可
const personAbout = {
  namespaced: true,//开启命名空间
  state: {...},
  mutations: {...},
  actions: {...}
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

Vue Router路由管理器

路由 | Vue.js

什么东西？：简单理解就是来实现页面跳转的

安装vue-router，命令：npm i vue-router，应用插件：Vue.use(VueRouter)

什么是路由：就是一个kv的映射关系，k是路径，v是function 或 componen

分类：

后端路由：对应一个func，服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由：value 是 component，用于展示页面内容，当浏览器的路径改变时，对应的组件就会显示

每个vue文件你都要在router导入注册才能访问，要不然项目找不到这个vue

//该文件专门用于创建整个应用的路由器，最基本路由如下
import VueRouter from "vue-router";
import Home from '../components/Hello'
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/',
            nsmr:'Hello',
            component:Hello
        }
    ]
})

elementui

引入elementui

-- 本地运行需要先下载npm i element-ui -S
--在main.js中引入，可以完整引入和按需引入，demo项目完整引入即可，只是代码体积的影响
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)

可以去element-ui官网找到合适的样式，copy代码，有时需要稍微改造自己需要的样式