vue day2 学习总结
脚手架 -> 会用
npm install -g vue-cli ：下载全局的脚手架(我们可以使用)
进入到你当前的项目:
vue init webpack : 初始化(项目中有很多文件)
npm run dev : 运行(可以访问)
一，部分指令
（1） v-model 双向绑定（只能绑定表单元素： , , ）
一定要注意： 多选绑定值 一定是一个数组
概念： 改数据一改全改
checkbox: 选择框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--映入vue js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- v-model:双向绑定 只能用于表单元素中
<input>，<select>, <textarea>
多选的时一定要用 在挂载的时候一定要要用数据
-->
<!--创建容器 -->
<div id="app">
<!-- 用户名 -->
<input type="text" v-model="username">{{username}}
<!-- 爱好:多选 -->
<input type="checkbox" value="1" v-model="hobbys">吃饭
<input type="checkbox" value="2" v-model="hobbys"> 睡觉
<input type="checkbox" value="3" v-model="hobbys"> dadoudoua
<br/>
<!--使用 select标签完成双向 -->
<select v-model="ctiy">
<option value="1">中国 </option>
<option value="2">老挝 </option>
<option value="3">冥国 </option>
</select>
<br/>
<!--使用 <textarea> 标签-->
<textarea v-model="intor">
</textarea>
<br/>
{{intor}}
</div>
<!--完成 挂载 -->
<script>
new Vue({
el:"#app",
data:{
msg:"hahah ",
username:"boss",
hobbys:[],
ctiy:3,
intor:"随便写写啦！"
}
})
</script>
</body>
</html>
（2）v - show 显示 或 隐藏 相应的 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--映入js文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 创建容器 -->
<div id="app">
<!--绑定一个点击事件 调用了下面 say 的方法-->
<input onclick="say()" type="button" value="sho-show">
<!-- 图片路径 -->
<img src="../imgs/18609517_112216473140_2.jpg" v-show="shows">
</div>
<!-- 挂载 与容器发生关系 -->
<script>
var v = new Vue({
el:"#app",
data:{
shows:false
}
})
/* 定义方法*/
function say() {
v.shows= !v.shows
}
</script>
</body>
</html>
(3) v-if (v-else-if,v-else) 判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// 引入vue 的js 文件
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
// 创建容器
<div id="app">
// 判断年龄 是否大于 或等于30 如果大于30 执行： 你到了中年这句话
<div v-if="age>=30">
你到了中年了
</div>
// 在进行判断
<div v-else-if="age<=30">
年轻人
</div>
</div>
<!-- 让他与容器发生关系 挂载 -->
<script >
new Vue({
el:"#app",
data:{
age:20
}
})
</script>
</body>
</html>
综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js -->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 创建容器 -->
<div id="app">
<table>
<thead>
<tr>
<th>id</th>
<th>名称</th>
<th>部门</th>
<th>性别</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<!--循环 employee 的出里面的值 -->
<tr v-for="v in employee">
<td> {{v.id}}</td>
<td>{{v.name}}</td>
<td> {{v.dept.name}} </td>
<td>{{v.sex?"男":女 }}</td>
<td>
<!-- 判断状态的每一个值 -->
<span v-if="v.status==1">天仙</span>
<span v-if="v.status==2">地仙</span>
<span v-if="v.status==3">妖怪</span>
<span v-if="v.status==4">狼妖</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--挂载 与容器发生关系 -->
<script>
new Vue({
el:"#app",
data:{
employee:[
{id:1,name:"老赵",sex:true,status:1,dept:{id:1,name:"技术部"}},
{id:1,name:"赵国",sex:true,status:2,dept:{id:1,name:"军部"}},
{id:1,name:"燕国",sex:true,status:3,dept:{id:1,name:"武器部"}},
{id:1,name:"大秦帝国",sex:true,status:4,dept:{id:1,name:"伙食部"}}
]
}
})
</script>
</body>
</html>
(4) on 绑定事件
事件名称= “ 方法名 ” ：事件的 绑定
<!-- v-on(事件的简写) @click= 方法名 -->
<input type="button" @click="say()" value="kkkk">
<!--绑定事件有 input框里的类容 需要有 type= button v-on: 事件绑定 v- on:click = say() value:是点击框的名字 -->ss
<input type="button" v-on:click="say()" value="点点" >
综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--创建容器 -->
<div id="app">
<!--绑定事件有 input框里的类容 需要有 type= button v-on: 事件绑定 v-on:click = say() value:是点击框的名字 -->
<input type="button" v-on:click="say()" value="点点" >
<!-- v-on(事件的简写) @click= 方法名 -->
<input type="button" @click="say()" value="kkkk">
<!-- 给Holle 用简写的形式绑定事件 因为有参 所以在绑定事件的时候需要传递一个参数 -->
<input type="button" @click="holle('老李')" value="jjjj">
<input type="button" @click="age++" value="age">{{age}}
</div>
<!--与容器发生关系 挂载 -->
<script>
var v= new Vue({
el:"#app",
data:{
age:20
},
methods:{
say(){
alert(111)
},
holle(name){
console.debug(name+"，唉 》》》》》》")
}
}
})
</script>
</body>
</html>
（5）computed && watch 两个小功能
computed ：计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入js -->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--创建容器 -->
<div id="app">
{{computeds}}
</div>
// 挂载
<script>
/* 可以获得 bronDate的值 */
// console.debug(new Date().getTime())
new Vue({
el:"#app",
data:{
bronDate:1566607397809
},
computed:{
computeds(){
/* new传了一个时间 bronDate */
let v = new Date(this.bronDate)
// 得到 年 月 日 并进行拼借
return v.getFullYear()+"-"+(v.getMonth()+1)+"-"+v.getDay()
}
}
})
</script>
</body>
</html>
watch 监控属性
属性监听 watch -> 当某个属性发生变化,都会监听到 ( 新值，旧值 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--定义容器 -->
<div id="app">
<input type="text" v-model="msg">{{msg}}
</div>
<!-- 与容器发生关系 挂载 -->
<script>
var v= new Vue({
el:"#app",
data:{
msg:"老李"
},
/* 每次 msg 属性修改 都会执行 watch 这个方法 起到了一个监控作用 */
watch:{
/* newVal ：修改的新数据
oldVal ； 修改的后的旧数据
* */
msg(newVal , oldVal){
console.debug(newVal,oldVal)
}
}
})
</script>
</body>
</html>
二 自定义组件
自定义 全局组件
注意；template 在模板中 有一个要求。有且只有一个外部标签
还有在使用驼峰命名的时候。驼峰命名 myTag -> my-tag 这才是正确的命名方试 在模板中如果要使用数据,组件的data是一个函数
data(){
return {};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<mybatis></mybatis>
</div>
<div id="add">
<mybatis></mybatis>
</div>
// 与容器发生关系 完成挂载
<script>
/* 全局挂载 只要是挂载了都可以使用 */
/* mybatis 自定义组件的名字 */
Vue.component("mybatis",{
/* 注： 一定要记住
* template： 模板中，有个要求，有且只有一个外部标签
* 在使用驼峰命名的时候 myBatis(驼峰命名) 使用的时候得用-（my-batis）
* */
template:"<div><h1>好嗨哟</h1></div>"
})
new Vue({
el:"#app"
})
new Vue({
el:"#add"
})
</script>
</body>
</html>
自定义局部组件 ；局部组件 ，
components； 组件
template： 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// 引入vue的js文件
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
// 创建容器
<div id="add">
<mybatis></mybatis>
</div>
// 与容器发生关系 完成挂载
<script>
new Vue({
el:"#add",
components:{
mybatis:{
template:"<h1>飞云之下</h1>"
}
}
})
</script>
</body>
</html>
其他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<body>
<!-- 创建容器 -->
<div id ="app">
<me></me>
</div>
<!-- 定义外部标签 -->
<template id="Temp">
<form method="post">
{{name}} <input type="text" />
密码<input type="password"/>
<input type="button" @click="login()" value="e登录" >
</form>
</template>
<script >
/* 定义常量 引入外部标签 */
const holee={
template:"#Temp",
/* 定义用户名 */
data(){
return{
name:"boss"
}
},
/* methods单词是固定的 ，不能写错了 */
methods:{
login(){
alert(11111)
}
}
}
Vue.component("me",holee)
/* 挂载 */
new Vue({
el:"#app"
})
</script>
</body>
</html>
三 路由
（ 1 ） 注： 路由是需要单独引入（vue 的插件 ）
下载地址：https://router.vuejs.org/zh/guide/#html
路由；
1：引入路由的 js 文件
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue的js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入路由的js 文件 -->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
2 ;定义( 路由 )组件
/* 自定义组件 */
const music = { template: '<div>音乐好听</div>' };
const singer={template:'<div><h1>音那好</h1></div>' }
const friend={template:'<div><h1>和那好</h1></div>' }
3 :定义路由
/*定义路由 写一个数组，定义多个路由 */
let v=[
{ path:'/music',component:music}
]
4：创建路由的 (router) 实例，然后传 routes 配置
/* 创建一个路由的是列 */
const router=new VueRouter({
routes:v
})
综合起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue 的js -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!--引入 路由的 js -->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!-- 创建容器 -->
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to`去找这个路径 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/music">音乐</router-link>
<!-- <router-link to="/singer">刚琴区</router-link>
<router-link to="/friend">古典</router-link>-->
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!-- 挂载 -->
<script >
/* 自定义组件 */
const music = { template: '<div>音乐好听</div>' };
const singer={template:'<div><h1>音那好</h1></div>' }
const friend={template:'<div><h1>和那好</h1></div>' }
/* 准备一个 数组，数组的第一个值对应 一个 路径与组件 */
let v=[
{ path:'/music',component:music}
]
/* 创建一个路由 */
const router=new VueRouter({
routes:v
})
new Vue({
el:"#app",
router
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
