vue习笔记
1.vue需要引入cdn或者本地
第一天
<div id="app">
<!-- vue 的文本格式 -->
<span v-text="ct"></span>
<!-- vue 的html 可加css样式进行修饰 -->
<span v-html="zt"></span>
<!-- vue 的超链接 可简写 v-bind：href/ ：href -->
<a v-bind:href="href">4399</a>
<!-- 懒汉式 v-if/v-else 省内存 耗时间
饿汉式 v-show 省时间 耗内存
-->
<p v-if="flag">a</p>
<p v-else="flag">b</p>
<ul v-if="show">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul v-else="show">
<li>4</li>
<li>2</li>
<li>3</li>
</ul>
<ul v-show="show2">
<li>7</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<!-- items 对应里面的items -->
<li v-for="items in citys"></li>
<li v-for="(items,index) in citys">--</li>
<ul>
<li v-for="per in persons">----</li>
</ul>
</ul>
<ul>
<input type="button" v-on:click="test()" value="test函数">
<input type="button" v-on:click="add()" value="按钮">
</ul>
<div id="app">
<img :src="path">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
// JSON代码
message: 'Hello Vue.js!',
ct:'小黑子',
zt:"<marquee>小黑子，你干嘛 o</marquee>",
href:'https://www.4399.com/',
flag : false,
show: true,
show2:true,
citys:["1","2","3","4","5","6",],
persons: [
{
name:'a',
id:1,
city:10
},
{
name:'b',
id:2,
city:11
},
{
name:'c',
id:3,
city:12
},
],
// 用来声明vue中的成员变量的空间
i : 1,
path : '../Dres/img/1.jpg'
},
methods:{
test(){
alert('ak！')
},
add:function(){
var a = 0;
var b = a + 2;
alert('a' + b)
},
change(){
this.i++;
// 在这个函数中变化的path值的内容 ，在函数中获取data中的变量，使用this.变量名或者vue.变量名
this.path = "../Dres/img/"+this.i+".jpg";
if(this.i >= 4){
this.i = 0;
}
}
},
mounted(){ //beforeMount也能完成相应效果
//new Vue中的数据挂载完成 渲染到div中时，调用mounted()函数 即页面数据挂载之后；beforeMount 即页面数据挂载之前 这两种使用较多
// 定时器
// 每隔500秒，重复使用change()函数,不要加括号
setInterval(this.change,500);
},
// mounted(){
// alert("4.Vue实列渲染到Html过程中触发")
// },
// created(){
// alert("2.创建Vue实列时触发")
// },
// beforeCreate(){
// alert("1.创建Vue实列之前触发")
// },
// beforeMount(){
// alert("3.Vue实列渲染到Html之前中触发")
// },
//以下两个存在，但通常无法表示出来。请了解即可
// beforeDestory(){
// alert("5.Vue实列销毁之前触发")
// },
// destroyed(){
// alert("6.Vue实列销毁之后触发")
// }
})
</script>
第二天
<div id="app">
<input type="button" value="加法" @click="add(15,25)">
<input type="button" value="往数组后加" @click="addCity()">
<input type="button" value="往数组前加" @click="addCity2()">
<br><br>
<input type="button" value="自增" @click="num+=1">
<input type="button" value="自减" @click="num-=1">
</div>
<script>
new Vue({
el: '#app',
data: {
citys:["b"],
num:0
},
methods:{
add(a,b){
alert("a+b="+(a+b))
},
addCity(){
this.citys.push("c");
},
addCity2(){
this.citys.unshift("a");
}
}
})
</script>
第三天
<div id="app">
用户名：<input type="text" v-model="uname">
密码<input type="password" v-model="pwd">
性别：
<!-- 默认选中不适用checked = checked -->
男:<input type="radio" v-model="sex" value="1">
女:<input type="radio" v-model="sex" value="0">
<br>
爱好：
看书: <input type="checkbox" value="1" v-model="favor">
听音乐: <input type="checkbox" value="2" v-model="favor">
爬山: <input type="checkbox" value="3" v-model="favor">
蹦极: <input type="checkbox" value="4" v-model="favor">
<input type="button" @click="submit()" value="提交">
</div>
<script>
new Vue({
el: '#app',
data: {
uname: 'ch',
pwd:'123',
sex:'0', //设置默认选中
favor:[]
},
methods:{
submit(){
//alert(this.uname +'-'+ this.pwd +'-'+ this.sex +'-'+ this.favor)
//在vue中提交数据，需要创建一个对象来封装表单数据
var person = new Object();
person.uname = this.uname;
person.pwd = this.pwd;
person.sex = this.sex;
person.favor = this.favor;
//当前的数据在开发中是需要提交到服务器里面去，通过json数据传递
var s = JSON.stringify(person); //转换为json对象
alert(s)
//这个数据网服务器端发送，需要后面学习axios网络请求技术
}
}
})
</script>
第四天
<div id="app">
数值A: <input type="text" v-model="num1">
数值B: <input type="text" v-model="num2">
<br><br>
<input type="button" @click="add()" value="加法">
<input type="button" @click="jian()" value="减法">
<input type="button" @click="chen()" value="乘法">
<input type="button" @click="chu()" value="除法">
<br>
<!-- v-model使用的后缀参数
1.lazy
2.number 强制转换为数值计算
3.trim 去掉首尾空格-->
<!-- lazy测试: <input type="text" v-model.lazy="test()"> -->
</div>
<script>
new Vue({
el: '#app',
data: {
// 双向绑定只能赋值为字符串
num1: '',
num2: '',
result:''
},
methods:{
add(){
// 以下方式为拼接字符串 不是计算
// this.result = this.num1 + this.num2;
//以下方式也可以计算，但不用再V-model.number(用了也行，不影响)
// this.result = parseFloat(this.num1) + parseFloat(this.num2)
this.result = parseFloat(this.num1) + parseFloat(this.num2)
},
jian(){
this.result = parseFloat(this.num1) - parseFloat(this.num2)
},
chen(){
this.result = parseFloat(this.num1) * parseFloat(this.num2)
},
chu(){
this.result = parseFloat(this.num1) / parseFloat(this.num2)
},
test(){
alert('这是lazy')
}
}
})
</script>
第五天
<div id="app">
计算属性：
<!-- 计算属性调用，只写函数名称 -->
</div>
<!-- 计算属性computed与methods效果最后是一样的，但是computed是基于它的依赖缓存，只有相关依赖发送改变是才会重新取值，而Methods在重新渲染或重新调用执行。 -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js!'
},
// 函数方法
methods:{
},
// Vue实例渲染到html过程中的触发的生命周期函数
mouted:{
},
computed:{
getResult(){
//split("")是使用空白符，切分Hello Vue;reverse()是反转，join把反转之后每个字母合在一起连接。
return this.msg.split('').reverse().join('')
}
}
})
</script>
第六条
<div id="app">
姓: <input type="text" v-model="firstname">
名: <input type="text" v-model="secondname">
号: <input type="text" v-model="lastname">
<br><br>
名称(监听): <br><br>
名称(计算):
</div>
<script>
new Vue({
el: '#app',
data: {
firstname:'',
secondname:'',
lastname:'',
fullname:''
},
methods:{
},
mounted:{
},
computed:{
// 计算属性
getLastname(){
return this.firstname+this.secondname+this.lastname
}
},
// 监听属性
//监听所绑定的输入框是firstname
//表示监听firstname所绑定的输入框
//当该值改变，就会触发
watch:{
firstname(){
this.fullname = this.firstname + this.secondname + this.lastname
},
secondname(){
this.fullname = this.firstname + this.secondname + this.lastname
},
lastname(){
this.fullname = this.firstname + this.secondname + this.lastname
},
}
})
</script>
第七天
<div id="app">
用户名：<input type="text" v-model="unmae">
<br>
<br>
<br>
</div>
<script>
new Vue({
el: '#app',
data: {
unmae: '',
msg:'',
msg2:'hell vue',
msg3:'HELL VUE',
date: new Date()
},
watch:{
unmae(){
//监听uname绑定的输入框里面的值发生变化时，触发当前的函数
// alert(this.uname)
//用户验证实列
// alert(this.unmae)
if("admin" === this.unmae){
this.msg = '这个名称被使用了'
}else{
this.msg = '可以使用'
}
}
},
// 过滤器属性
filters:{
// 小写转大写
upperCHange(a,args){
return args+a.toUpperCase()
},
lowerCHange(a,args){
return args+a.toLowerCase()
},
// 日期的格式转化
deteformat(val,args){
return args+val.getFullYear()+'-'+(val.getMonth()+1)+'-'+val.getDate()+' '+val.getHours()+':'+val.getMinutes()+':'+val.getSeconds()
}
}
})
</script>
第八天 案例
<div id="app">
<div class="grid">
<table>
<tr class="titleup">
<td colspan="4">
编号: <input type="text" v-model="code">
名称: <input type="text" v-model="name">
<input type="button" value="提交" @click='add()'>
</td>
</tr>
<tr class="title">
<td>编号</td>
<td>名称</td>
<td>时间</td>
<td>操作</td>
</tr>
<tr v-for="book in books">
<td></td>
<td></td>
<td></td>
<td>
<a href="#" @click='edit(book)'>修改</a>
<a href="#" @click='deletebook(book)'>删除</a>
</td>
</tr>
</table>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
code:'',
name:'',
flag:false, //fales
index:'',
books:[
{
id:'1',
name:'三国',
date:new Date()
},
{
id:'2',
name:'水浒',
date:new Date()
},
{
id:'3',
name:'红楼梦',
date:new Date()
},
]
},
filters:{
// 日期的格式转化
deteformat(val){
return val.getFullYear()+'-'+(val.getMonth()+1)+'-'+val.getDate()
}
},
methods:{
//添加数据
add(){
// 加入一个空值判断
if(this.code.length != 0 && this.name.length != 0 && !this.flag){
var newBook = new Object();
newBook.id = this.code;
newBook.name = this.name;
newBook.date = new Date();
// 把当前newbook的数据加入books数组中
this.books.push(newBook);
// 清空输入框
this.code ='';
this.name ='';
}else if(this.name.length != 0){
this.books[this.index].name = this.name;
this.books[this.index].code = this.code;
this.flag = false;
this.code ='';
this.name ='';
}
},
deletebook(book){
// alert(book.name)
//从数组中移除一个元素
//先获取当前元素在数组中的下表索引
var bookIndex = this.books.indexOf(book);
//执行移除操作,第一个参数是要删除的数组的下标值；第二个参数：删除的个数
this.books.splice(bookIndex,1);
},
edit(book){
this.flag = true;
this.code = book.id;
this.name = book.name;
this.index = this.books.indexOf(book);
}
}
})
</script>