这篇博客详细介绍了Vue的基础知识，包括Vue的定义、优缺点、Hello World实例、数据绑定机制、表达式、各种数据渲染方式（如普通渲染、条件渲染、循环渲染和双向绑定）、事件处理、组件创建与通信、生命周期、HTTP请求（axios）以及路由操作。适合Vue初学者入门学习。
Vue基础知识
目录
- vue基础介绍
- vue的helloword(环境)
- 数据绑定机制(vue核心)
- 表达式
- 各种数据渲染
5.1 普通渲染
5.2 条件渲染
5.3 循环渲染
5.4 输入框双向绑定 - 事件处理
- 组件
- 生命周期
- 网络数据下载
- 路由
课程内容
1.vue基础介绍
q1.神马是vue
vue是一套构建用户ui界面的js框架 简单: vue是js框架
q2.什么是库,什么是框架
(1)调用方式
库提供函数和对象, 我们使用函数和对象
框架提供一个代码骨架,我们把代码填充到骨架内容
框架去执行我们的代码
(2)限制
库几乎没什么限制, 多个库我们可以组合使用
框架具有限制, vue限制是mvvm, angular和mvc, recat虚拟dom
(3)常见库
swiper,jquery, bootstrap提供组件
zepto,iScroll,AlloyFinger,fastclick
(4)常见框架
bootstrap栅格机制
vue
react
angular
.....
q3.关于vue
vue的作者: 尤雨溪(国人,经历国际化) 中文官网: cn.vuejs.org 国际官网: vuejs.org vue官方教程: https://cn.vuejs.org/v2/guide/ vue api手册: https://cn.vuejs.org/v2/api/ 版本: 现在学习版本 2.0
q5.vue的优点和缺点
优点:
(1)vue相对其他框架学习简单,使用简单
(2)vue适合多个交互,大中型的项目
(3)使用组件,模板提供开发效率
(4)适合做后台
劣势
(1)学习成本的, 学到一定程度
(2)经历思维的转变(vue没有直接dom操作)
(3)不适合需要进行SEO的项目
SEO 搜索引擎优化
内容: 新闻类....
<div id="app">
{{msg}}
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world"
}
//viewModel
var app = new Vue({
el:"#app",
data:data
})
</script>
2.vue的helloword(环境)
q.如何写一个hello world
Step1: 写一个div,设置id=app
Step2: 引入js
Step3: 定义data,里面是数据
Step4: 创建一个vue实例
核心属性1: el, 表示vue操作的元素
核心属性2: data,表示加载的数据
<!-- Step1: 写个vue基本结构 -->
<div id="app">
{{msg}}
</div>
<!-- Step2: 引入文件 -->
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- Step3: 初始化 -->
<script type="text/javascript">
var data = {
msg:"hello world"
}
var app = new Vue({
el:"#app",
data:data
})
</script>
3.数据绑定机制(vue核心)
q.为什么这样去写?
(1)基于mvvm机制 层级1: v = view 界面视图 层级2: vm = viewmodel 视图模型绑定 层级3: m = model 数据模型 (2)作用: 当数据改变,界面自动改变 当界面输入值改变,数据自动改变 (3)数据绑定机制
4.表达式
q1.什么是表达式?
js就有表达式, 1+1
{{}} 放的也是表达式
q2.vue中 {{}} 能放什么?
数学表达式能放 字符串能放 系统对象函数 methods中定义的函数 实例data属性定义的变量
q3.vue {{}}不能放什么
全局定义的函数 全局定义变量
<!-- view -->
<div id="app">
{{msg}}
<p>{{100}}</p>
<p>{{100+100}}</p>
<p>{{(100-50)*3}}</p>
<p>{{'aaa'}}</p>
<p>{{'aaa'+'bbbb'}}</p>
<p>{{Math.abs(-100)}}</p>
<p>{{sum(10,20)}}</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// var a = 20
// function func () {
// return "func"
// }
//model
var data = {
msg:"hello world"
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
sum(x,y){
return x+y
}
}
})
</script>
5.各种数据渲染
普通渲染
q1.如何实现普通渲染,把变量显示出来
语法: {{}}
语法:
<!-- view -->
<div id="app">
<p>{{content}}</p>
<p v-html='content'></p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
content:`<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>`
}
//viewModel
var app = new Vue({
el:"#app",
data:data
})
</script>
html渲染
q2.如何把html显示到vue的view上?
使用 v-html=""
<!-- view -->
<div id="app">
{{msg}}
<p>
<span>{{msg}}</span>
</p>
<p>
<span v-text="msg"></span>
</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world"
}
//viewModel
var app = new Vue({
el:"#app",
data:data
})
</script>
属性渲染
q3.如何渲染属性
使用 v-bind:属性名="变量名"
百度
图片
<!-- view -->
<div id="app">
<p>
<!-- wechat支持, vue不支持 -->
<!-- <a href="{{ url }}">百度</a> -->
</p>
<p>
<a v-bind:href="url">百度</a>
</p>
<p>
<a :href="url">百度</a>
</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
url:"http://www.baidu.com"
}
//viewModel
var app = new Vue({
el:"#app",
data:data
})
</script>
样式渲染
q.如何渲染样式
普通: style=""
语法: v-bind:style="表达式"
案例1: v-bind:style=" '' "
案例2: v-bind:style=" {} "
语法3: v-bind:style=" 变量 "
简写语法: style=""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
{{msg}}
<!-- 常用 -->
<p style="color:blue">
海阔天空
</p>
<!-- 一般不用 -->
<p v-bind:style=" 'color:blue' ">
海阔天空
</p>
<!-- 一般不用 -->
<p v-bind:style=" {color:'red','font-size':'24px'} ">
海阔天空
</p>
<!-- 常用 -->
<p v-bind:style=" s1 ">
海阔天空
</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
s1:{color:'red','font-size':'24px'}
}
//viewModel
var app = new Vue({
el:"#app",
data:data
})
</script>
</body>
</html>
class渲染
q.如何渲染class
语法: v-bind:class="表达式"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.s1{
font-size: 32px;
}
.s2{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- view -->
<div id="app">
{{msg}}
<!-- 常用 -->
<p class="s1 s2">
海阔天空
</p>
<!-- 一般不用 -->
<p v-bind:class=" 's1 s2' ">
海阔天空
</p>
<!-- 一般不用 -->
<p v-bind:class=" ['s1','s2'] ">
海阔天空
</p>
<!-- 用得少 -->
<p v-bind:class=" {'s1':true,'s2':true} ">
海阔天空
</p>
<!-- 常用 -->
<p v-bind:class=" c1 ">
海阔天空
</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
c1:{'s1':true,'s2':true}
}
//viewModel
var app = new Vue({
el:"#app",
data:data
})
</script>
</body>
</html>
条件渲染
q.如何实现条件渲染?
使用指令 v-if = "表达式" 或者
<div v-if="isShow"></div>
<div v-else></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
<button @click="dealClick">按钮</button>
<div v-if="isShow">
内容1内容1内容1内容1内容1内容1内容1内容1
</div>
<div v-else>
内容22222222
</div>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
isShow:false
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
dealClick(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
循环渲染
q.如何实现循环渲染
使用指令 v-for 格式: v-for="(item,index) in list"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
<p>
<ul>
<li v-for="(item,index) in list1">
{{item}} {{index}}
</li>
</ul>
<ul>
<li v-for="item in list1">
{{item}}
</li>
</ul>
</p>
<p>
<ul>
<li v-for="(item,index) in list2">
{{item.name}} {{item.age}}
</li>
</ul>
</p>
<p>
<ul>
<li v-for="(value,key) in config">
{{key}} = {{value}}
</li>
</ul>
</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
list1:[
"aaaa",
"bbbb",
"cccc",
"oooo",
"aaaa"
],
list2:[
{
id:1001,
name:"ahua",
age:16
},{
id:1002,
name:"amei",
age:17
},{
id:1003,
name:"along",
age:17
},{
id:1003,
name:"aying",
age:17
}
],
config:{
"name":"鍖呮墦涓�鍒�,
"author":"dajiange",
"price":"5000$",
"size":"300M"
}
}
//viewModel
var app = new Vue({
el:"#app",
data:data
})
</script>
</body>
</html>
输入框双向绑定
q.如何实现输入框双向绑定?
v-model=""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
<p>
first: <input type="text" v-model="first">
</p>
<p>
last: <input type="text" v-model="last">
</p>
<p>
full: {{first+" "+last}}
</p>
<p>
<button @click="dealReset">重置</button>
</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
first:"",
last:""
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
dealReset(){
this.first = ""
this.last = ""
}
}
})
</script>
</body>
</html>
6.事件处理
鼠标事件
q.如何监控事件
格式: v-on:事件名="函数名" 简写: @事件名="函数名"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
{{msg}}
<p>
num = {{num}}
</p>
<button @click="dealAdd">+</button>
<button @click="dealSub">-</button>
<button @dblclick="dealAddTwo">+2</button>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
num:0
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
dealAdd(){
this.num++
},
dealSub(){
this.num-1>=0?this.num--:this.num;
},
dealAddTwo(){
this.num+=2
},
}
})
</script>
</body>
</html>
键盘事件
q.如何监控键盘事件
格式: v-on:事件名="函数名"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
{{msg}}
<p>
<input @keydown="dealKeydown" type="text">
</p>
<p>
num = {{num}}
</p>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
num:0
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
dealKeydown(){
this.num++
}
}
})
</script>
</body>
</html>
7.组件
q.什么是组件,它的功能和作用?
组件是vue中对于一个功能块的封装(html,css,js)
作用是实现了html/css代码复用性
q.如何创建一个组件,使用一个组件
创建组件使用 Vue.component()函数
核心的属性
template 对应的模板
data 组件内部的数据
注意: template必须有一个根元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
{{msg}}
<!-- 组件的使用 -->
<goods-count></goods-count>
<goods-count></goods-count>
<goods-count></goods-count>
<goods-count></goods-count>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world"
}
//商品界面 - 选择商品个数 - [] +
//组件名字
// 建议使用全小写,中间字符用-
//注意1: template必须定义,data可以不加
//注意2: 组件的data必须是一个函数,返回一个对象
Vue.component("goods-count",{
template:`<div>
<button>-</button>
<input type="text"></input>
<button>+</button>
</div>`,
data(){
return {
}
}
})
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
}
})
</script>
</body>
</html>
q.如何给组件传值(组件的参数)
Step1: 组件添加属性 props:['p1','p2',....]
Step2: 显示组件,添加属性 <com p1='v1'>
Step3: 使用属性
组件的template {{p1}}
js中使用 this.p1
注意: 传入的参数在组件内部是只读的,不要改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
{{msg}}
<!-- 组件的使用 -->
<goods-count num='10'></goods-count>
<goods-count num='20'></goods-count>
<goods-count></goods-count>
<goods-count></goods-count>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world"
}
//商品界面 - 选择商品个数 - [] +
//组件名字
// 建议使用全小写,中间字符用-
//注意1: template必须定义,data可以不加
//注意2: 组件的data必须是一个函数,返回一个对象
Vue.component("goods-count",{
props:['num'],
template:`<div>
<button @click='dealSub'>-</button>
<input type="text" v-model='in_num'></input>
<button @click='dealAdd'>+</button>
<!-- {{num}} -->
</div>`,
created(){
if(this.num != undefined){
this.in_num = this.num
}
},
data(){
return {
in_num:0
}
},
methods:{
dealSub(){
if(this.in_num-1>0){
this.in_num--;
}
},dealAdd(){
this.in_num++;
}
}
})
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
}
})
</script>
</body>
</html>
q.如何使用组件内的数据
Step1:
写一个data属性, 返回一个函数,这个函数返回一个对象
Step2:
组件的template {{p1}}
js中使用 this.p1
q.组件如何向外传递数据
//发送自定义事件
Step1: 组件内执行 this.$emit("事件名",数据)
Step2: 使用组件的地方, 监听时间
Step3: 使用组件的地方, 实现这个函数
实例: 实现一个选择性别的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.sex-select{
border: 1px solid black;
}
</style>
</head>
<body>
<!-- view -->
<div id="app">
<sex-select @mychange='dealMyChange'></sex-select>
<hr>
<div>
这是组件外部, 当组件变化, 知道选择的值
{{value}}
</div>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
value:""
}
Vue.component("sex-select",{
props:[],
template:`,
<div class="sex-select">
<div>当前选择: <span>{{index}}</span> </div>
<button @click="dealSelect(1)">男</button>
<button @click="dealSelect(2)">女</button>
<button @click="dealSelect(3)">保密</button>
</div>
`,
data(){
return {
index:-1
}
},
methods:{
dealSelect(index){
this.index = index
//组件发送自定义事件
// 使用组件的地方接收
this.$emit("mychange",index);
}
}
})
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
dealMyChange(index){
this.value = index
}
}
})
</script>
</body>
</html>
q.组件传值1: 父组件向子组件传值
通过 组件参数 props
<navbar left='LLL'>
q.组件传值2: 父组件向子组件动态传值
<navbar :left="'name'">
q.组件传值3: 子组件向父组件传值(通过事件)
this.$emit("事件名",数据)
<navbar @mychange='dealChange'>
q.组件传值4: 两个没啥关系组件组件间传值
再定义一个vue实例, 通过这个实例传值
8.生命周期
q.什么生命周期?
一个vue实例, 有几个状态
create创建
beforeCreate()
created()
mount加载
beforeMount()
mounted()
update更新
beforeUpdate()
updated()
destroy销毁
beforeDestroy()
destroyed()
q.create前后干了啥
create主要是初始化实例, 让data有效的
$data也被初始化了
q.mount干了啥了?
加载el
q.最常用的两个函数
created 创建后, 常常把组件初始化代码放里面
常常发起网络请求
注意: 这时候组件没有加载到界面, this.$el不能用
mounted 即创建完成,也加载完成
常常做一些和UI界面有关的初始化操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
<button @click="dealShow">显示/隐藏</button>
<hr>
<goods-count v-if="isShow"></goods-count>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
isShow:false
}
Vue.component("goods-count",{
props:['num'],
template:`<div>
<button @click='dealSub'>-</button>
<input type="text" v-model='in_num'></input>
<button @click='dealAdd'>+</button>
<!-- {{num}} -->
</div>`,
//create
beforeCreate(){
console.log("beforeCreate")
console.log(this.in_num)
},
created(){
console.log("created")
console.log(this.in_num)
if(this.num != undefined){
this.in_num = this.num
}
},
//mount
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted")
},
//update
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
},
//destroy
beforeDestroy(){
console.log("beforeDestroy")
},
destroyed(){
console.log("destroyed")
},
data(){
return {
in_num:0
}
},
methods:{
dealSub(){
if(this.in_num-1>0){
this.in_num--;
}
},dealAdd(){
this.in_num++;
}
}
})
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
dealShow(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
10.网络数据下载(axios)
q.在vue中如何实现http请求?
实现方式1: 使用原生ajax (太麻烦)
实现方式2: 使用jquery(太大,只用到ajax,不划算)
实现方式3: vue-resource (ajax库)
实现方式4: axios (vue现在推荐的)
q.如何实现一个基本的get请求
Step1: 导入库
Step2: axios.get(url).then(function(response){
}).catch(function(error){
})
q.如何实现一个基本的post请求
Step1: 导入库
Step2: axios.post(url,params).then(function(response){
}).catch(function(error){
})
q.如何实现同时请求多个url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
<ul>
<li v-for='(item,index) in list' :key='index'>
<span>{{item.name}}</span>
</li>
</ul>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/interface.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
list:[]
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
created(){
//this.testGETRequest()
//this.testGETRequest2()
//this.testPOSTRequest()
this.testMultiRequest()
},
methods:{
testMultiRequest(){
var url1 = bookListUrl
var url2 = musicListUrl
var url3 = filmListUrl
//格式
var func1 = function () {
return axios.get(url1)
}
var func2 = function () {
return axios.get(url2)
}
var func3 = function () {
return axios.get(url3)
}
axios.all([func1(),func2(),func3()]).then(axios.spread(function(r1,r2,r3){
console.log(r1.data)
console.log(r2.data)
console.log(r3.data)
}))
},
testPOSTRequest(){
var url = "http://169.254.225.240/teach/posttest/deal.php"
axios.post(url,"username=admin&password=123").then(function (response) {
console.log(response)
}).catch(function (error) {
})
},
testGETRequest(){
var url = bookListUrl
var self = this
//底层依赖promise
axios.get(url).then(function(response){
//status 状态码 = 200
//statusText 状态文本
//data 存储返回的数据
var list = response.data.result
self.list = list
console.log(response)
}).catch(function(error){
console.log(error)
})
},testGETRequest2(){
//http://169.254.225.240/project/dou/api/public/index.php?m=book&a=list
var url = "http://169.254.225.240/project/dou/api/public/index.php"
var dict = {
"m":"book",
"a":"list"
}
var self = this
//底层依赖promise
axios.get(url,{params:dict}).then(function(response){
//status 状态码 = 200
//statusText 状态文本
//data 存储返回的数据
var list = response.data.result
self.list = list
console.log(response)
}).catch(function(error){
console.log(error)
})
}
}
})
</script>
</body>
</html>
11.路由
q.什么是SPA应用, 单页面应用
Single Page Application
vue写项目(多页面应用)
方式1: 把vue当成类似jquery库
使用一个网站由多个html构成
每个html中加载一个vue文件
方式2: 写一个html, 其他界面都是一个一个组件
这些组件切换, 相当于切换了页面
最大问题: 因为只有一个html,百度收录
前后端分类项目: 搜索引擎收录不好收录
方式3: 写一个html, 其他界面都是一个一个组件
使用 vue-cli 脚手架工具
一个界面所有html,css和js放在 .vue文件
一个组件所有html,css和js放在 .vue文件
q.如何使用vue-router实现路由
Step1: 导入vue-router
Step2: 创建需要切换的界面
Step3: 创建一个能切换界面对象 VueRouter
Step4: 在app实例加载路由对象
Step5: 视图创建<router-view>用显示当前页面
Step6: 视图中创建多个 <router-link> 切换界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.content-wrapper{
width: 100%;
height: 400px;
border: 1px solid #444;
}
</style>
</head>
<body>
<div id="app">
<!-- {{msg}} -->
<!-- Step5: 视图创建<router-view>用显示当前页面 -->
<div class="content-wrapper">
<router-view>
</router-view>
</div>
<!-- Step6: 视图中创建多个 <router-link> 切换界面 -->
<div>
<router-link to="/">图书</router-link>
<router-link to="/music">音乐</router-link>
<router-link to="/film">电影</router-link>
</div>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- step1:导入Vue-router.js -->
<script src="vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
msg:"hello world"
}
<!-- step2:创建需要切换的界面 -->
var book = Vue.component("book",{
template:`<div>book</div>`
})
var music = Vue.component("music",{
template:`<div>music</div>`
})
var film = Vue.component("film",{
template:`<div>film</div>`
})
<!-- step3:创建路由对象 -->
var r = new VueRouter({
<!-- 设置多个路由 route+s -->
routes:[
{
path:"/",
redirect:"/book"
},{
path:"/book",
component:book
},{
path:"/music",
component:music
},{
path:"/film",
component:film
}
]
})
var app = new Vue({
el:"#app",
<!-- step4:在APP实例加载路由对象 -->
router:r,
data:data,
methods:{
}
})
</script>
</body>
</html>
q.如何实现路由的传值
实例: 实现列表页向详情页传值
Step1: 路由设置添加参数
格式: /bookDetail/:id
Step2: 设置router-link同时设置路由传值
格式: /bookDetail/100
Step3: 界面内通过 this.$route.params
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.content-wrapper{
width: 100%;
height: 400px;
border: 1px solid #444;
}
</style>
</head>
<body>
<div id="app">
<!-- {{msg}} -->
<!-- Step5: 视图创建<router-view>用显示当前页面 -->
<div class="content-wrapper">
<router-view>
</router-view>
</div>
<!-- Step6: 视图中创建多个 <router-link> 切换界面 -->
<div>
<router-link to="/">图书</router-link>
<router-link to="/music">音乐</router-link>
<router-link to="/film">电影</router-link>
</div>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- step1:导入Vue-router.js -->
<script src="vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
msg:"hello world"
}
<!-- step2:创建需要切换的界面 -->
var book = Vue.component("book",{
template:`<div>book,
<div><router-link to="/bookDetail/100">图书1</router-link></div>
<div><router-link to="/bookDetail/200">图书2</router-link></div>
<div><router-link to="/bookDetail/300">图书3</router-link></div>
</div>`
})
var music = Vue.component("music",{
template:`<div>music</div>`
})
var film = Vue.component("film",{
template:`<div>film</div>`
})
var bookDetail = Vue.component("book-Detail",{
template:`<div>book-detail
<div> id = {{id}}</div>
</div>`,
data(){
return{
id:0
}
},
created(){
var id= this.$route.params.id;
console.log("id="+id)
this.id=id
}
})
var musicDetail = Vue.component("music-Detail",{
template:`<div>music-detail</div>`
})
var filmDetail = Vue.component("film-Detail",{
template:`<div>film-detail</div>`
})
<!-- step3:创建路由对象 -->
var r = new VueRouter({
<!-- 设置多个路由 route+s -->
routes:[
{
path:"/",
redirect:"/book"
},{
path:"/book",
component:book
},{
path:"/music",
component:music
},{
path:"/film",
component:film
},{
path:"/bookDetail/:id",
component:bookDetail
},{
path:"/musicDetail",
component:musicDetail
},{
path:"/filmDetail",
component:filmDetail
}
]
})
var app = new Vue({
el:"#app",
<!-- step4:在APP实例加载路由对象 -->
router:r,
data:data,
methods:{
}
})
</script>
</body>
</html>
q.url路径的变化
多个html
一个html,通过路由切换 ====> 单页面(html)应用
扫一扫
2501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
