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