vue框架

一 Vue环境的搭建

1. 首先下载vscode，安装；
2. 安装各种插件，（在vscode里面，应用市场安装）；
3. 安装NDP，如果电脑里有就不用安装；
4. 安装node。然后在cmd里面检测，输入：node -v和npm -v,安装成功会出现版本号；
5. 使用淘宝镜像，安装cnpm，也是在cmd里全局安装，在cmd输入npm install -g cnpm – registry=http://registry.npm.taobao.org。安装完之后检测，在cmd里输入：cnpm -v,会出现版本号；
6. 最后安装vue的开发工具，手脚架。一样是在cmd里全局安装。输入：cnpm install -g vue-cli，安装完之后输入vue，不会报错也不会提示不是内部文件之类，表示安装成功。
   至此，Vue环境配置完成。

二 Vue简单创建新项目的步骤

1. 创建项目：vue init webpack-simple +文件名;
2. 安装依赖–创建node_modules文件：cnpm install；
3. 项目在浏览器打开：cnpm run dev—此时已经在浏览器中打开了；

三 项目的开发

只在App.vue里面的书写，其他的地方可以不变。
（一） 元素绑定 在template 里面写

1. 数据绑定：{{}}，按照【属性：值】的方式绑定数据；
2. 绑定表达式：表达式里面可以进行运算；
3. 绑定属性：使用指令：v-bind，方式：【v-bind:title=“变量”】,也可以简写为：【：class=“变量”】；
4. 循环渲染数据：使用指令：v-for。item：当前的遍历值，index：当前的索引值，：key：绑定唯一键；
5. v-text：绑定元素的文本值，【v-text=" "】；
6. v-html：绑定元素的HTML内容，自动解析里面的标签；
7. class类名称的动态绑定：v-bind。可以绑定CSS样式；
8. 绑定多个类名称：v-bind。用{，， }圈起来，逗号隔开；
9. 直接绑定样式：div:style{’ 这里面写CSS样式 ，逗号隔开’}；

（二）Vue数据双向、事件、ref获取dom元素节点、MVVM

1. 数据双向绑定
   Vue存在数据双向原则，model层发生变化，view层响应改变；view层变化，model层亦变化；因为Vue的设计模式 是MVVM，model- view-viewmodel（中间层-dom 数据绑定 事件相关监听）。
   MVC模式：三层结构 model- view -contril（控制器层），单向通信。
   数据双向绑定指令：v-model=“ ”，一般使用在表单元素上。

---

2. Vue事件
   绑定事件指令：v-on:type=“方法”，简写为：@type=“方法”；
   事件的修饰符，在时间之后写：
   –阻止事件冒泡：@click.stop=“ ” 等于event.stopPropageation（）；
   –阻止事件的默认行为：@click.prevent=“ ” 等于event.preventPropageation（）；
   –点击自身的时候触发事件：@click.self=“ ” e.target===e.currentTarget；
   –事件只触发一次：@click.once=“ ” ;
   –事件永远不调用默认行为： @click.passive=“ ” ;
   – 事件里面的this指针：事件里面的this，指当前Vue里面的component组件。直接写的e参数里面currentTarget是没有值的，解决方法：在事件上传递参数：$event；
   –事件的执行参数event：和之前JS里面的事件参数一致；
   –事件的委托：父类委托给子类；
   – 事件的捕获（从外向里）： @click.capture=" " ；

---

3. ref获取dom元素节点：获取的都是虚拟dom
   虚拟dom的作用：提高浏览器性能。等待操作完成之后，一次性渲染；通过ref给属性命名。
   真实dom：操作dom直接影响界面；

---

4. Vue里面如何使用jQuery代码？
   –安装jQuery：cnpm install jquery --save-dev（安装到devDependencies，安装依赖就可以使用）；
   –安装jQuery：cnpm install jquery --save（安装到dependencies，装完依赖需要装jQuery才可以使用）；
   –引入jQuery：import $ from ‘jquery’；哪个组件使用，给谁引入。

（二）script：当前模板的JS
14. name：指的是当前组件的名称；
15. data：函数里面带返回值，当前组件的数据源；
16. export default{}:暴露函数；

（三）style：写模板的css

1. 静态文件的建立：simple项目里面没有默认的静态资源文件，自己建立一个static文件，默认就是静态资源文件。或者你建成public文件–静态资源文件；
2. 使用storage html5缓存缓存数据，刷新数据还在。
   如何做js代码模块封装：storage 模块的封装，建立一个storage文件夹，封装模块：
   模块封装缓存的代码

//模块封装缓存的代码
export default{
    //设置缓存
    setStorage(key,value){
        localStorage.setItem(key,value);
    },
    //读取缓存
    getStorge(key){
        return JSON.parse(localStorage.getItem(key));
    },
    //移除缓存
    removeStorage(key){
        return localStorage.removeItem("key");
    },
    //清除缓存
    clearStorage(){
        localStorage.clear();
    }
}

使用封装的storage模块：

import Storage from "./storage/Storage.js";

四 vue创建单文件组件、注册组件、组件使用

APP.vue是Vue项目的主模板（存放组件、主组件），在src里自己定义一个文件component放置子组件。

1. 如何创建组件：直接建立对应的vue文件即为单个组件；
2. 如何注册组件（挂载组件）：例如三个子组件需要挂载到APP组件里面，就在该组件内部直接引入子组件。引入格式为：
   import 子组件名称 from 子组件路径;具体如下：

import topTitle from "./component/systemtoptitle";

注册组件在属性component里面进行注册。常规写法：键值形式、简写。直接使用组件变量，键和值一样的时候可以直接简写，如下第二种方法。
键值形式常规写法：

"v-toptitle": topTitle,
"v-leftmenu": leftMenu,
"v-rightcontent": rightContent

或者简写：

topTitle,
leftMenu,
rightContent

3. 组件在谁里面使用，在谁里面注册—局部注册。局部注册的组件只能在父组件里面使用（对应上述第二种简写形式）：

<template>
  <div id="app">
    <div class="app_top">
      <topTitle></topTitle>
    </div>
    <div class="app_bottom">
      <leftMenu></leftMenu>
      <rightContent></rightContent>
    </div>
  </div>
</template>

4. 全局注册：在main.js里面进行注册。全局注册整个项目的组件都可以使用，是注册给整个Vue对象的。
   （1）引入需要注册的全局组件；

import getTime from './component/child/getTime'

（2）具体如下：

Vue.cpmponent('v-times',{
template:"<div>{{msg}}</div>",//字符串的标签模板
data(){//当前模板的数据
return{
msg:"时间"
}
}
};

5. 册完成之后，使用组件

export dafault{
name:"app",
components:{
//这里是组件名称
topTitle,
leftMenu,
rightContent
},
data(){
return{};
}
};

6. 父子组件传值：props。 子组件中定义props属性接收父组件传递的数据：props:[‘logoimg’,‘sysname’]，子组件需要logoimg、sysname这两个变量的值。注意不能和关键字重复、同名等问题，会导致出错。

<v-logo :logoimg="logo" :sysname="name"></v-logo>
----------------------------------------------------------
data() {
    return {
      // 比如下面的两个信息是后台返回的
      name: "学生信息管理系统",
      logo: "src/assets/logo.png"
    };

9. 组件里面的插槽，插槽标签：
   作用：（1）引入子组件；(2)子组件中标签中间写的内容（可以是文本或者HTML内容）当做插槽使用。
   无名插槽：该在组件的时候没有给插槽内容可以在组件内部slot中写默认的内容；

<slot>
    默认的插槽数据
</slot>

在子组件标签之内若不写内容，则默认插槽没有值。

<v-userlist>
      <!--下面这一块区域是插槽的内容 -->
      <div class="user">
        <table>
          <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
          </tr>
          <tr v-for="(item,index) in list" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.add}}</td>
          </tr>
        </table>
      </div>
    </v-userlist>

 <!-- 下面的子组件没有给插槽的内容 -->
    <v-userlist></v-userlist>

7. 具名插槽：起名字的插槽；

<div class="header">
     <slot name="header"></slot>
</div>
div class="content">
    <slot name="content"></slot>
</div>
<div class="footer">
      <slot name="footer"></slot>
</div>

给具名插槽传递值：使用template模板的v-slot指令绑定到指定的插槽，如：v-slot:header.

<v-userlist>
      <template v-slot:header>
        <h1>12345</h1>
      </template>
      <template v-slot:content>
        <h1>aaaaa5</h1>
      </template>
      <template v-slot:footer>
        <h1>12fsdfsadsadsa345</h1>
      </template>
</v-userlist>

7. 自动监听事件：this.EmitEvent是new vue对象
8. 子组件接收父组件的传值：使用ref获取虚拟的dom来获取子组件。
9. 自定义事件：emit（触发）、v-on（监听）,可以在组件上使用this直接实现。它的作用是：子组件修改父组件的相关变量。组件的自定义事件在子组件内部触发，在组件上做监听处理，监听到之后调用的方法是父组件的方法。
   自定义事件：先监听（v-on）再触发（emit）。
10. 子组件里面定义props属性接收父组件传递的数据。
    简单写法：props:[‘logoimg’,‘sysname’],这种写法传递的数据没有类型的约束；
    约束数据类型：
    （1）写法如果数据类型不一致，会报警告；
    （2）若父组件没有传递数据，会走默认值。

mounted() {
    //   在子组件里面获取整个父组件
    console.log(this.parentinfo);
    let parent = this.parentinfo;
    parent.childsend(); //子组件调用父组件的方法

    //2.子组件获取父组件
    let parentdata = this.$parent;
    console.log(parentdata);
  }

11. 非父子关系组件之间的传值：使用$emit、$on做之间的通信。使用new vue（）对象实现。
12. 自己建立的静态资源文件static、public可以通过浏览器直接访问，而src里面的文件不可以；