1.Vue入门：vue是一套构建用户界面的渐进式框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!--1.引入js文件 后期是用脚手架搭建前端项目需使用webpack来构建-->
<script src="js/vue.js">
//vue是一套构建用户界面的渐进式框架
</script>
</head>
<body>
<!--2.准备vue.js需要使用的容器-->
<div id="app">
<!--插值语法，支持js格式-->
{{name}}住在{{address}},今年{{age}}岁
</div>
</body>
<script>
//3.创建vue实例来使用vue.js
new Vue({
//配置vue对象
el:"#app",//是用vue的选择器容器
data:{//data用于存储数据，是提供el容器使用的数据，暂时写一个对象
name:"李思",
address:"昆明",
age:13
}
})
</script>
</html>
2.vue数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue数据绑定</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--vue数据绑定-->
<!--1.插值语法-->
<div id="app">
{{name}} at {{address}}
<!--2.指令语法-->
<!--2.1单向数据绑定 v-xxx(指令）:可用于表单元素或其他地方-->
<input type="text" v-bind:value="name">
<!--简写-->
<input type="text" :value="address"><br>
<!--2.2双向数据绑定 只有表单元素能用，用于收集数据-->
<input type="text" v-model:value="name">
<!--v-model简写-->
<input type="text" v-model="address"><br>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
name:"zs",
address:"kunming"
}
})
</script>
</html>
3.vue的el与data的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>el与data的写法</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="name">
</div>
</body>
<script>
//
// const vn=new Vue({
// //el:"#app",
//1.对象式
// data:{
// name:"as"
// }
// });
// vn.$mount("#app");//将id为app的容器挂载到vue对象上
new Vue({
el:"#app",
//2.函数式
data(){
return{
//加return才可使用
name:"zss"
}
}
})
</script>
</html>
4.事件与修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue事件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{name}}<br>
<!-- 为元素绑定事件：v-on: 事件名，简写：@事件名 -->
<button v-on:click="show()">按钮</button>
<!-- 无参数时括号可以省略-->
<button v-on:click="show">按钮</button>
<!-- 简写-->
<button @click="show">按钮</button><br>
<!-- 事件的修饰符-->
<!--
prevent:当执行事件时阻止标签原来的默认行为
once：只能触发一次
stop：阻止事件冒泡
-->
<a href="http://www.baidu.com" @click="show">连接</a>
<a href="http://www.baidu.com" @click.prevent="show">连接</a>
<button @click="show">once</button>
<button @click.once="show">once</button>
<div v-on:click="show" style="width: 100px;height:100px;background-color: lawngreen">
<button @click="show">dianji</button>
</div>
<hr>
<div v-on:click="show" style="width: 100px;height:100px;background-color: lawngreen">
<button @click.stop="show">dianji</button>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return{
name:"zs",
age:20
}
},
methods:{
show(){
alert(this.name)
}
}
});
</script>
</html>
5.条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="num++">点击加1</button>
{{num}}<br>
<button @click="flag=false">点击</button>
{{flag}}<br>
<!-- 条件渲染：
v—if：满足条件显示内容，不满足条件的元素直接移除，所以运行效率低
-->
<h1 v-if="num==1">iuio</h1>
<h1 v-else-if="num==2">oihhy</h1>
<h1 v-else-if="num==3">i956</h1>
<h1 v-else>89io</h1>
<hr>
<!-- v-show:控制内容的显示与隐藏，相当于改变display的属性值，适合频繁切换-->
<h1 v-show="num==1">iuio</h1>
<h1 v-show="num==2">oihhy</h1>
<h1 v-show="num==3">i956</h1>
<hr>
<!-- 用template模板控制一段代码的显示与隐藏：不能使用v-show，
因为template渲染时不满足条件的时候是不会存在于页面中的，无法添加display属性来实现v-show
-->
<template v-if="num == 6">
<h2>afasd</h2>
<h2>dff</h2>
</template>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return {
name: "张三",
num: 0,
flag: true
}
}
})
</script>
</html>
6.列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--列表的渲染指令v-for将对个数据显示到页面上
v-for：用于循环显示数据
将address的值和索引遍历放入add和i中，可用in或of
-->
<h2 v-for="add in address">地名{{add}}</h2>
<br>
<h2 v-for="(add,i) in address" :key="i">{{i+1}}地名{{add}}</h2>
<table border="1">
<thead>
<td>id</td>
<td>名字</td>
<td>年龄</td>
</thead>
<tr v-for="(list,index) in persons" :key="index">
<td>{{index+1}}</td>
<td>{{list.name}}</td>
<td>{{list.age}}</td>
</tr>
</table>
<!-- 遍历对象属性,索引是属性名-->
<ul>
<li v-for="(car,i) of car">
{{i}}--{{car}};
</li>
</ul>
<hr>
<!--遍历字符串-->
<ul>
<li v-for="(s,char) in str" :key="char">
{{char}}-{{s}}
</li>
</ul>
<hr>
<!--遍历指定次数-->
<ul>
<li v-for="num in 100">
<h2 v-if="num % 2 == 0">{{num}}</h2>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return{
//数组
address:["昆明","大理","曲靖","香格里拉"],
//对象数组：对应java中的对象
persons:[
{name:'张三',age:23},
{name:'张露',age:19},
{name:'李思',age:29},
],
car:{
name:"兰博基尼",
price:"700w",
color:"白色"
},
str:"idfhkhehhdj"
}
}
})
</script>
</html>
7.vue收集表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model收集数据需要注意的地方：
v-model提供了三个修饰符：trim：去除收尾空格；
number：将字符串数字转为有效数字
lazy：懒加载，即等待失去光标后才将输入数据加载到对象，可以节约资源
注意： 默认情况下 复选框收集的是boolean的值 选中 收集为true 没选中一般为false
如果要收集选中提交的多个值 必须将对象的接受改为数组 并且value有值
-->
<form>
姓名：<input type="text" v-model.trim.lazy="user.username"><br>
密码：<input type="password" v-model.lazy="user.password"><br>
年龄：<input type="number" v-model.number="user.age"><br>
性别：<input type="radio" v-model:value="user.sex" value="男">男
<input type="radio" v-model="user.sex" value="女">女
<br>
爱好：<input type="checkbox" value="篮球" v-model="user.hobby" >篮球
<input type="checkbox" value="下棋" v-model="user.hobby" >下棋
<input type="checkbox" value="看书" v-model="user.hobby" >看书
<input type="checkbox" value="跑步" v-model="user.hobby">跑步
<br>
毕业学校：
<select v-model="user.school" >
<option value="">请选择学校</option>
<option value="云大">云南大学</option>
<option value="理工">昆明理工大学</option>
<option value="医科大">云南医科大学</option>
<option value="师范">云南师范大学</option>
</select>
<br>
其他：<textarea v-model.lazy="user.others"></textarea><br>
<button @click="send">提交</button>
</form>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return{
user:{
username:"",
password:"",
age:null,
sex:'',
hobby:[],
school:'',
others:null
}
}
},
methods:{
send(){
// axios({
// method:"post",
// url:"#",
// data:this.user
// })
}
}
})
</script>
</html>
8.vue的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
/*Vue的生命周期： 又叫做生命周期函数 或生命周期回调函数 或生命周期钩子
Vue在创建到销毁过程中经历的函数的调用
八个阶段：
beforeCreate 创建对象之前
created 创建对象之后
beforeMount 挂载数据之前
mounted 挂载完成 (关注)
beforeUpdate 修改数据之前
updated 修改数据之后
beforeDestory 销毁之前 (关注)
destroyed 销毁
都是函数
总结：mounted 发送ajax请求
beforeDestroy 清除定时器 解绑数据 等收尾工具
* */
new Vue({
el:'#app',
data(){
return{
}
},
beforeCreate(){
console.log("创建之前");
},
created(){
console.log("创建之后");
},
beforeMount(){
console.log("挂载之前");
},
mounted(){
console.log("挂载完成");
},
beforeUpdate(){
console.log("修改之前");
},
updated(){
console.log("更新完成");
},
beforeDestroy(){
console.log("销毁之前");
},
destroyed(){
console.log("销毁");
}
});
</script>
</html>
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
