vue.js浅谈小总结

vue小总结

一、vue基础语法

1、vue的指令与属性

常用的指令

• {{meg}} 最常用之一，可以直接输出文本，做简单运算，三元运算等

{{“message”}}  // message
{{3+2}}   // 5
{{8>15?"ok":"no"}}   // no

• v-text 输出文本，不解析标签
• v-html 输出文本 解析标签
• v-bind 绑定属性：简写 ：
• v-on 绑定事件指令 ：简写@

<button onclick="test(event)"></button> 
<button v-on:click="test2('abc')"></button> 
<div class="style" @mouseover="auto(event)">

• v-model 表单专用的绑定事件

<input type="number" v-model="pic">
数量：<input type="number" v-model="num">
总价：{{pic*num}}

• v-if

v-if 
v-else-if
v-else

• v-show

v-if 与v-show 的区别
v-if 是真正的条件（false就真的没有元素渲染） 有更高的切换开销
v-show 是给元素设置为display：none   有更好的渲染开销
若是不经常变化的可以切第一次不是false的可以使用v-if，若是经常切换的话还是使用v-show

*v-for （以后多用于项目列表渲染中）
···

• {{ parentMessage }} - {{ index }} - {{ item.message }}

···

*指令修饰符

<组件 指令:参数.修饰符1.修饰符2="值" />

1.   .lazy   取代 `input` 监听 `change` 事件 （数据改变的时候延迟使用）
2.    .number  输入字符串转为有效的数字(可以用于提交表单数据使用)
3、  .trim   输入首尾空格过滤（很重要项目中经常会遇到输入空格问题，内部的可以使用正则去掉，或者特殊字符保留使用）

• class (选项卡，添加样式)

  <div :class="['box1', 'box2']"></div>
  

  <div :class="{'box1': isActive, 'box2': isChecked}"></div>
  

  <div :style="[style1, style2]"></div>
  

  <div :style="[style1?'ok':'no, {'box1': isActive,}]"></div>
  

2、vue的改变事件的三剑客

三者的区别：
computed：依赖缓存，节约性能，只有数据改变的时候才进行调用，可以进行复杂的数据计算
methods : 不依赖缓存，时刻监测调用，最好用于简单的少次的修改计算

watch：适合数据变化的异步操作

• computed 缓存计算

         computed: {
           reverseMsg() {
             // 缓存
             console.log("苏逸尘");
             return this.msg.split("").reverse().join("");
           },
         },
         
         // 当需要大的开销的时候操作使用
         // deep
         // immediate

• watch 监听数据改变

 
 watch:{
    "info":{
      handler(newValue,oldValue){
          console.log(newValue,oldValue)
      }
    }
 }
  

vue的组件

组件：我的理解就是把公共的整理成一个通用的，用到就调用就好
学会组件三部曲，组件就会了：一、注册、二、导入 三、引用

//全局组件
const ComponentB = {
       template: `<div>ComponentB</div>`,
        methods: {
         handleClick() {
           this.count++;
         },
       },
       data() {
         return {
           count: 0,
         };
       },
       template: `<div>ComponentA
       {{count}}
       <button @click="handleClick">click</button>
           <ComponentB></ComponentB>
       </div>`,
     };
     
      // 局部组件

     app = new Vue({
       el: `#app`,
       template: `
       <div>{{msg}}
           <ComponentA></ComponentA>
           <ComponentA></ComponentA>
       </div>`,
       data: {
         msg: "hello world",
       },
     });

组件的内部的小插曲

• props 父传子的桥梁

子组件接收父组件的传值可以设置默认值，接收的的模型，还有就是是否唯一
props: {
         title: {
           type: String,
           default: "title -A",
           required: true,
         }    
       },

• emit 子传父的通讯
  注意函数名称的设置的一致性

methods: {
          handleClick() {
            this.count++;
            this.$emit("change", this.count);
          },
        },

• 插槽 ***重要啊

一个默认插槽
<slot></slot>
有名插槽
<slot name = "cc"></slot>

vue的利器 vue-cli （建项目必备神器）

内置webpack 等多个工具，可以尽情的开发使用

• 安装
  npm install -g @vue/cli or
  yarn global add @vue/cli
• 创建一个项目
  vue create my-project or
  vue ui

新功能 vue的测试

开发组件使用，记住三部曲：given：准备数据、when ：触发测试动作 ，then：验证结果
vue就是测试：input：props 用户交互 （click） slots
output :emit 视图变化

vue的路由 重要的SPA 页面跳转 vue-router

为了更好的用户体验，不刷新，不重新加载然后引入的路由
本质就是：就是建立起url和页面之间的映射关系

安装： 1、vue-cli自带 或者 vue add @vue/router 再或者 vue i vue-rotuer

• go to class
  优先级：谁先定义谁的优先级高

// 插件的使用
Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",// 路由模式，直接连接模式  hash模式需要添加# 
  routes: [
    // {
    //   path: "/home",    //访问home路径
    //   //   redirect: "/",  //路由重定向
    // },
    {
      path: "/",
      alias: ["/hei", "/home"],  // 路由重命名
      //   component: Home,
      components: {
        default: Home,
        one: OneView,
        two: TwoView,
      },
    },
    {
      path: "/classView/:id",
      component: ClassView,
      name: "classView",
      props: true,
      children: [
        {
          // /class/:id/:name
          //   path: ":name",
          path: ":name",
          component: ClassName,
          props: true,
        },
      ],
      beforeEnter(to, from, next) {
        console.log("----beforeEnter-----");
        console.log(to);
        console.log(from);
        console.log(next);
        next();
      },
      meta: {   //关键字在登录等关键使用
        isRequired: true,
        check: false,  
      },
    },
    {
      path: "*",
      component: NotFound,
    },
  ],
});

router.beforeEach((to, from, next) => {   //  全局声明前调用
  next();
});

router.afterEach((to, from) => { // 全局声明后调用
});

难点 回顾点 vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 （就是一个总管家，哪里需要给哪里）
安装：npm install vuex --save

• state 值

state: {
    msg: "hi vuex",
    name: "xiaohong",
    age: 18,
  },

• getter 改变值

 tenYearsOld(state) {
      return state.age + 10;
    },

• mutation 调用值

 changeMsg(state, payload) {
      //   setTimeout(() => {
      console.log(state);
      console.log(payload);
      state.msg = "heiheihei  vuex";
      //   }, 5000);
    },

    changeName(state) {
      //   setTimeout(() => {
      state.name = "xiaohei";
      //   }, 1000);
    },

• action 异步调用你不不行的我来

actions: {
    getMsg({ commit }) {
      console.log("getMsg");
      setTimeout(() => {
        commit("changeMsg");
      }, 1000);
    },
  },

• module 来咱们综合下，看着好看

  modules: {
    a: moduleA,
    b: moduleB,
  },

关键词 ：vue vue语法 vue-ruter vuex axios

总结，整体vue不是很难，难点在整合运用上，vuex还有axios这些都需要反复练习才能正在的明白里面的关系，还有就是要擅长学会查文档，语法会变，但是文档学习是不会变的，只有学会了看文档，才能不怕技术的更新吧

新的vue3开始了 中文文档：

https://v3.cn.vuejs.org/guide/introduction.html