<div id="app">
<h1 v-if="type===‘A‘">A</h1>
<h1 v-else-if="type===‘B‘">B</h1>
<h1 v-else>C</h1>
</div>
?
<script>
var vm = new Vue({
el: "#app",
data: {
type: "A"
}
});
</script>
<div id="app">
<!-- 循环 -->
<ul>
<li v-for="item in items">
{{item.message}}
</li>
</ul>
</div>
?
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message: "Java"},
{message: "Python"},
{message: "C++"}
]
}
});
</script>
v-on指令可以监听DOM事件
<div id="app">
<!-- 通过v-on进行事件监听 -->
<button v-on:click="sayHello">打招呼</button>
</div>
?
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello world"
},
<!-- 方法在methods内定义 -->
methods: {
sayHello: function () {
alert(this.message)
}
}
});
</script>
<div id="app">
<!-- 文本输入框 -->
<input type="text" v-model="message">{{message}}
<hr/>
<!-- 单选框 -->
<input type="radio" name="sex" value="男" v-model="sel_value">男
<input type="radio" name="sex" value="女" v-model="sel_value">女
选中了：{{sel_value}}
<hr>
<!-- 下拉框 -->
<select v-model="sel_value">
<option value="" disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
选中了：{{sel_value}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "123",
sel_value: ""
},
methods: {}
});
</script>
组件可复用的vue组件，是一组可以重复使用的模板。
<div id="app">
<!-- 模板使用
v-bind将item和language绑定起来，这样在vue模板中，才能读取到参数
-->
<test v-for="item in items" v-bind:language="item"></test>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
/*
模板定义
*/
Vue.component("test", {
// props：接受参数，参数不能大写
props: ["language"],
template: "<li>{{language}}</li>"
});
var vm = new Vue({
el: "#app",
data: {
items: [
"java",
"python",
"c++"
]
}
?
});
</script>
JQuery
Axios：一个开源可以用在浏览器的异步通信框架，它的主要作用就是实现AJAX异步通信，特点如下：
从浏览器中创建XMLHttpRequests
支持链式编程
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持XSRF(跨站请求伪造)
<div id="app">
{{info.name}}
{{info.address.sheng}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
// 可以不写不需要的属性，但是写了的格式必须和请求的数据格式相同
info: {
name: null,
address: {
sheng: null,
shi: null,
xian: null
}
}
}
},
mounted: function () {
axios.get("./data.json").then(response => (this.info = response.data))
}
});
</script>
<!--data.json-->
{
"name": "张震",
"isNotProfit": true,
"address": {
"sheng": "shandong",
"shi": "linyi",
"xian": "tancheng"
},
"links": [
{
"name": "abidu",
"url": "www.baidu.com"
},
{
"name": "taobao",
"url": "www.taobao.com"
}
]
}
计算出来的结果，保存在属性中，在内存中运行。（类似于缓存）
<div id="app">
{{currentTime1()}}<br>
{{currentTime2}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello world"
},
methods: {
currentTime1: function () {
return Date.now();
}
},
computed: {
// 计算属性，方法名不能和methods中的方法重名
currentTime2: function () {
return Date.now();
}
}
});
</script>
结论
调用方法时，每次都需要重新计算，产生系统开销，使用计算属性可以将不经常变化的计算结果进行缓存，节省系统开销。
<div id="app">
<todo>
<!-- 使用插槽，惊醒第二次绑定 -->
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in items" v-bind:item="item"></todo-items>
</todo>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
// 定义插槽，用slot标签定义，name属性进行插槽绑定
Vue.component("todo", {
template: "<div>\
<slot name=‘todo-title‘></slot>\
<ul>\
<slot name=‘todo-items‘></slot>\
</ul>\
</div>"
});
// 定义插槽插入的内容
Vue.component("todo-title", {
props: ["title"],
template: "<div>{{title}}</div>"
})
Vue.component("todo-items", {
props: ["item"],
template: "<li>{{item}}</li>"
})
var vm = new Vue({
el: "#app",
data: {
title: "课程学习",
items: ["Java", "python", "c++"]
}
});
</script>
<div id="app">
<todo>
<!-- 使用插槽，进行第二次绑定 -->
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items" :item="item" :index="index"
v-on:remove="removeItem(index)"></todo-items>
</todo>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
// 定义插槽，用slot标签定义，name属性进行插槽绑定
Vue.component("todo", {
template: "<div>\
<slot name=‘todo-title‘></slot>\
<ul>\
<slot name=‘todo-items‘></slot>\
</ul>\
</div>"
});
// 定义插槽插入的内容
Vue.component("todo-title", {
props: ["title"],
template: "<div>{{title}}</div>"
})
Vue.component("todo-items", {
props: ["item", "index"],
template: "<li>{{index}}--{{item}}<button @click=‘remove‘>删除</button></li>",
methods: {
remove: function (index) {
// 自定义事件分发
this.$emit("remove", index);
}
}
})
var vm = new Vue({
el: "#app",
data: {
title: "课程学习",
items: ["Java", "python", "c++"]
},
methods: {
removeItem: function (index) {
this.items.splice(index, 1);
}
}
});
</script>
Vue官方提供的一个脚手架，用于快速生成一个vue项目模板。（类似于maven）
编写要跳转的组件
Content.vue
<template>
<h1>内容页</h1>
</template>
?
<script>
export default {
name: "Content"
}
</script>
?
<style scoped>
?
</style>
Main.vue
<template>
<h1>首页</h1>
</template>
?
<script>
export default {
name: "Main"
}
</script>
?
<style scoped>
?
</style>
编写路由
router/index.js
import Vue from ‘vue‘
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
// 安装路由
Vue.use(VueRouter)
// 配置路由
export default new VueRouter({
routes: [
{
// 路径
path: ‘/content‘,
// 跳转的组件
component: Content
},
{
// 路径
path: ‘/main‘,
// 跳转的组件
component: Main
},
]
})
使用路由
main.js
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
?
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
// 配置路由
router,
components: {App},
template: ‘<App/>‘
})
App.vue
<template>
<div id="app">
<h1>Vue-router</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
?
<script>
import Content from "./components/Content";
?
export default {
name: ‘App‘
}
</script>
?
<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
创建工程
vue init webpack hello-vue
cd hello-vue
npm install vue-router --save-dev
npm i element-ui -S
npm install
cnpm install sass-loader node-sass --save-dev
npm run dev
编写组件
Main.vue
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style=" color: rgb(17, 119, 0);">>
<el-menu :default-openeds="[‘1‘, ‘3‘]">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"