Vue前端框架

一、简介

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

Vue.js属于SPA一员。

英文全称：Single Page Web Application ，SPA

中文全称：单页Web应用。

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

二、模板语法

（1）普通文本

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

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

<template>
  <div id="app">
    姓名：{{name}} 年龄：{{age}}
  </div>
</template>
<script>

export default {
  name: 'App',
  data(){
    return{
      name:"chen",
      age:"18"
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 （2）HTML支持：

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

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

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <p>
      我们的名称为：{{name}}，已经成立了{{age}}年了。<br>
      描述:<span v-html="desc"></span>
    </p>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      name:"北京尚学堂",
      age: 15,
      desc:"我是<b>好人</b>"
    }
  }

}
</script>

 三、指令

（1）判断

<template>
    <div id="bjsxt">
        <p v-if="age<10">
            不到10年了
        </p>
        <p v-else-if="age<14 && age >=10">
            不到14年了
        </p>
        <p v-else>
            大于14年了
        </p>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                name: "北京尚学堂-Java学院",
                age: 15
            }
        }
    }
</script>

（2）循环遍历

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

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

<template>
    <div id="bjsxt">
      <ul>
        <li v-for="subject in subjects" :key="subject">
          {{subject}}
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                name: "北京尚学堂-Java学院",
                age: 15,
                subjects: ["Java", "AI", "大数据","前端"]
            }
        }
    }
</script>

（3）事件

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

@click取值是方法名称

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

jqk:function(event){} 中

• jqk 是方法名。

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

<template>
  <div id="app">
    <button @click="jqk">click</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      field:"值"
    };
  },
  methods:{
    jqk:function (event) {
      // this是当前Vue对象
      alert(this.field);
      if(event){
        alert(event.target.tagName)
      }
    }
  }
}
</script>

 （4）事件传参

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

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

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

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

<template>
  <div id="app">
    <button @click="jqk('name',$event)">click</button>
    <button @click="jqk(field,$event)">click</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      field:"值"
    };
  },
  methods:{
    jqk:function (name,event) {
      alert("name:"+name);
      if(event){
        alert(event.target.tagName)
      }
    }
  }
}
</script>

四、组件

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

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

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

<template>
    <div>
        <div>这是一个组件</div>
        <div>{{jqk}}</div>
    </div>
</template>

<script>
    export default {
        name: "MyComponent",
        props: {
            jqk: String
        }
    }
</script>

<style scoped>

</style>

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

<template>
  <div id="app">
    <MyComponent jqk="这是传递的内容"/>
  </div>
</template>

<script>
  import MyComponent from "@/components/MyComponent";

export default {
  name: 'App',
  components:{
    MyComponent
  }
}
</script>

 （3）参数类型

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

五、路由

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

（1）安装路由依赖

cnpm install --save vue-router@3.1.6

（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）使用：<router-view></router-view>表示修改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);