Vue前端框架

一、简介

Vue是一个渐进式（真正用到才引用）的JavaScript框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js属于SPA一员。

英文全称：Single Page Web Application ，SPA

中文全称：单页Web应用。

整个应用就一个页面，客户端页面通过与服务端的交互动态更新页面中内容。

二、模板语法

（1）普通文本

data() 函数返回值就是Model 对象。方法data()是固定的。

{{}}就是从Model中取值。

 （2）HTML支持：

如果希望能够解析HTML，必须使用v-html指令。

v-html是任意HTML标签的属性，v-html的取值可以是Model中定义的字段。

 三、指令

（1）判断

（2）循环遍历

v-for=”迭代变量 in 数组属性”

:key=”迭代变量” 此属性必须写，否则页面报错

（3）事件

Vue中事件也可以绑定给特定的方法进行处理。

@click取值是方法名称

methods是固定属性。里面定义了多有事件能绑定的方法。

jqk:function(event){} 中

• jqk 是方法名。

• event是方法形参，在js中方法形参名称随意。只要@click中使用没有参数的方法时，都会默认传递事件对象。如果方法中不使用事件对象，function里面就不需要写event了，在Vue中变量声明后必须使用。

 （4）事件传参

• 字符串值必须有单引号。

• 没有单引号参数(field)，调用data()中属性

• 方法中不需要使用事件对象时就不写$event。但是如果需要使用事件对象，必须手动传递事件对象，且必须叫做$event，$event是全局Vue对象原型(prototype)里面的属性。

• 事件调用方法时传递了多个参数，在定义方法时可以只接收参数中前N个（N>=0&&N<=调用时参数个数），但是一定接收了，就必须使用。

四、组件

（1）组件：如果项目中多次用到类似效果，就可以把这个效果进行自定义组件。

（2）新建vue文件：在src/components中新建一个文件。名称任意。示例中叫做MyComponent.vue。

【{{jqk}} 获取组件传递参数的值】 【props:定义组件传递的参数名称和类型】

 （2）引用组件：【jqk是参数名】【import 导入组件并设置名称为MyComponent】【components 声明组件】

 （3）参数类型

类型名	说明
String	字符串
Number	数字
Boolean	布尔
Array	数组
Object	对象
Function	函数
Promise	构造方法

五、路由

效果：不同的URL显示不同的内容。

（1）安装路由依赖

cnpm install --save [email protected]

（2）创建配置路由的js文件router/index.js

import Router from 'vue-router'
import First from "@/pages/First";
import Second from "@/pages/Second";
import Vue from 'vue';

//启用路由
Vue.use(Router);

const router = new Router({
    // 没有history，访问URL会有#
    mode:"history",
    routes: [
        {
            path: "/first",
            component: First
        },
        {
            path: "/second",
            component: Second
        }
    ]
});
//返回路由对象
export default router

（3）在全局配置文件main.js中加载路由配置文件

import Vue from 'vue'
import App from './App.vue'
//加载路由配置文件
import router from "@/router";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

（4）使用：表示修改URL会更改其中的内容

（5）通过js控制路由跳转

​    可以在当前项目任意页面中通过this.$router调用路由对象。

​    通过下面代码可以实现路由跳转

this.$router.push(“/first”)

六、发送网络请求

（1）安装依赖

cnpm install --save axios

（2）在全局配置文件main.js中配置

import axios from "axios";
import qs from "querystring";

Vue.prototype.$axios=axios;
Vue.prototype.$qstring=qs;

（3）在根目录下新建vue.config.js，配置请求代理

module.exports = {
    devServer: {
        proxy: {
            // 当请求Vue项目路径以/api开头时转发给下面
            '/': {
                // 服务器端URL
                target: 'http://192.168.141.241:8081/',
                ws: true,
                pathRewrite: {
                    // 把路径中api去掉
                    '^/': '/'
                }
            }
        }
    }
}

（4）使用

  methods: {
    mypost:function () {
      this.$axios.post("/demo",this.$qstring.stringify({id:5,name:"李四"}))
              //成功后
              .then(resp=>{
                this.myname=resp.data.name;
                this.myage=resp.data.id;
              })
              //失败后
              .catch(err=>{
                console.log(err);
              })
    }
  }

 七、Vue Element

Vue Element 就是Vue的扩展插件。

网址：https://element.eleme.cn/#/zh-CN

（1）安装命令

cnpm install --save element-ui

（2）在全局配置文件main.js中引入依赖

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);