一、简介
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){} 中
<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);
