Vue.js中级
2019-09-25 本文已影响0人
磨陀货_
1.Vue事件
语法<v-on:click>-----简写---<@click>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{mun}}
<!--v-on:click=""绑定事件-->
<button v-on:click="mun++">点我+1</button>
<!--简写-->
<button @click="mun++">增加</button>
<br>
<button @click="click01()">调用</button>
<button @click="click02('嗨')">调用方法</button>
<input type="text" @change="click03()">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
mun:"1"
},
methods:{
click01:function(){
alert("我最帅")
},
click02:function(message){
alert(this+"我好帅"+message)
},
click03:function(){
console.log("提示：输入东西了")
}
}
})
</script>
</html>
- 效果
点击（点我+1、增加）数字1会变化
点击调用弹出我最帅、点击调用方法弹出变量+我好帅+参数
text输入框输出东西时后台有提示
2.Vue计算属性&watch
2.1 computed:{}
- 如果前段传过来一个毫秒值，我们怎么展示？不能直接毫秒给客户看，所以我们要计算一下
月份要加一。国外计算和国内不一样
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{birthday}}毫秒
<br>
{{new Date(birthday).getFullYear()+'-'+new Date(birthday).getMonth()+'-'+new Date(birthday).getDay()}}
<br>
{{birth}}
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
birthday:1529032123201
},
computed:{
birth(){
let data = new Date();
return data.getFullYear()+"年--"+data.getMonth()+"月--"+data.getDate()+"日--星期"+data.getDay()
}
}
})
</script>
</html>
2.2 Watch
- 一旦改变就会触发Watch方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
</div>
</body>
<script>
new Vue({
el:"#app",//挂载
data:{
message:""
},
watch:{
message(newValue,oldValue){
console.log(newValue,oldValue)
}
}
})
</script>
</html>
3.Vue组件
重要功能：提取重复的HTML代码，以标签的形式使用
- 组件使用来完成特定功能的一个自定义的HTML标签
3.1 局部组件---当前Vue挂载的对象中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomp></mycomp>
</div>
<div id="app2">
<mycomp></mycomp>
</div>
</body>
<script>
new Vue({
el:"#app",
//components组件属性--局部组件：只能在当前div挂载id中使用
components:{
//定义一个组件
"mycomp":{
template:"<h5>{{message}}</h5>",
data:function(){
return{
"message":"你好","message2":{}
}
}
}
}
});
new Vue({
el:"#app2"
})
</script>
</html>
3.2 全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomp></mycomp>
</div>
<div id="app2">
<mycomp></mycomp>
</div>
</body>
<script>
var html = {
"template":"<h4>这周任务--等十一</h4>"
}
Vue.component("mycomp",html)
new Vue({
el:"#app",
});
new Vue({
el:"#app2"
})
</script>
</html>
3.3 <template>[模板]-----<script type="text/template">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomp></mycomp>
<mycomp2></mycomp2>
</div>
<template id="mytemplate">
<h3>女朋友和英雄联盟选一个</h3>
</template>
<script type="text/template" id="mytemplate2">
<h3>我亚索贼溜~哈萨给！</h3>
</script>
</body>
<script>
Vue.component("mycomp",{
template:"#mytemplate"
});
Vue.component("mycomp2",{
template:"#mytemplate2"
});
new Vue({
el:"#app",
})
</script>
</html>
3.4 外部工共抽取
- 建新包---新建js页面
const shtml = {
template:"<h3>我亚索贼溜~哈萨给!</h3>>"
}
- 随意搞一个html，引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<shtml></shtml>
</div>
</body>
<script>
new Vue({
el:"#app",
components:{
"shtml":()=>import("s.js")
}
})
</script>
</html>
3.5 函数--data【只能写在方法中】
4.路由--router
- 输入一个url 我把你路由到对应的template（页面）
4.1 首先要安装，路由不是Vue自带的
在Terminal输入npm install vue-router
4.2 使用---引入js---绑定(vueRouter对象/路由规则)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-link to="/product">答案</router-link>
</div>
</body>
<script>
var index = Vue.component("index",{template:"<h2>女朋友和英雄联盟选一个</h2>>"});
var product = Vue.component("product",{template:"<h2>我亚索贼溜~哈萨给！</h2>"});
var router = new VueRouter({
//定义路由规则
routes:[
{
path:"/",
component:index
},
{
path:"/product",
component:product
}
]
});
new Vue({
el:"#app",
router:router
})
</script>
</html>
点击答案
5.webpack---前段打包工具
教学地址：
6.Vue-cli（脚手架）
安装脚手架教学：
7.自定义访问一波
8.关闭服务器
Ctrl+C
