vue基础（二）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue基础（二），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12436字，纯文字阅读大概需要18分钟。
内容图文
1.css样式操作
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title><style>
.classA {
background-color: hotpink;}
.classB {
color: lawngreen;}
.classC {
font-size: 80px;}/* 1、类的操作
2、style的操作
*/</style></head><body><div id="root"><!-- 操作类 --><!-- 当我不知道这个标签类到底是谁，那么就得动态获取 --><p :class="myClass">我爱你赵丽颖</p><!-- 当我知道哪些类是有的，但是不知道哪个起作用 --><p :class="{classA:isA,classB:isB}">我爱你赵丽颖111</p><!-- 当一个标签有很多类都生效，那么就使用数组的写法 --><p :class="[‘classA‘,‘classB‘,‘classC‘]">我爱你赵丽颖222</p><!-- 操作style --><p :style="{color:myColor,fontSize:mySize}">我爱你赵丽颖333</p><button @click="changeClass">点击修改类</button></div><script src="./js/vue.js"></script><script>new Vue({
el:‘#root‘,
data(){
return {
myClass:‘classA‘,
isA:false,
isB:true,
myColor:‘blue‘,
mySize:‘40px‘
}
},
methods: {
changeClass(){
this.myClass =‘classB‘//操作的是第一个pthis.isA =!this.isA
this.isB =!this.isB
}
},
})
</script></body></html>
2.v-if 和v-show 条件渲染
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title><style>
#box{
width: 300px;
height: 300px;
background-color: red;}</style></head><body><div id="root"><!-- v-if和v-show都会用
v-if是删除了这个节点，也就是dom树上是没有这个节点的，内存中没有
如果我们获取这个节点，获取不到，切换不频繁可以用来节省内存
v-show不是对节点进行删除操作，而是给节点元素添加样式去操作的 display:none
如果使用这个东西，节点是永远存在在dom树上的。内存中也是存在的，我们获取的时候怎么都可以拿到
但是有可能拿到的东西样式是display:none 切换很频繁的时候，我们使用v-show
--><p v-if="isOk">表白成功</p><p v-else>表白失败</p><p v-show="isOk">求婚成功</p><p v-show="!isOk">求婚失败</p><button @click="update">点击切换</button><!-- <div id="box"></div> --></div><script src="./js/vue.js"></script><script>
const vm =new Vue({
el:‘#root‘,
data:{
isOk:true,
},
methods: {
update(){
this.isOk =!this.isOk
}
},
})
// let box = document.getElementById(‘box‘)// let flag = true// box.onclick = function(){// if(flag){// box.style.backgroundColor = ‘green‘// }else{// box.style.backgroundColor = ‘red‘// }// flag = !flag// }</script></body></html>
3,列表的过滤
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title></head><body><div id="root"><input type="text" placeholder="请输入查找的关键字" v-model="keyword"><ul><li v-for="(person, index) in newPersons" :key="person.id">
{{person.id}} --- {{person.name}} --- {{person.age}}
</li></ul></div><script src="./js/vue.js"></script><script>/*
分析：
根据效果分析，数组用的是原来的数据还是新的数组
1、假设用原来的数据，一上来展示没问题
2、当keyword变化的时候监视它，我们可以在原数组当中删除不包含keyword的项
3、当keyword的值又变为空串的时候，我们想回去回不去了
到此为止，卡死了
4、既然原数组没法做效果，就必须使用新的一个数组，而且这个数组一上来和原数组数据一样
5、既然是新数组，那就一定要用计算属性，根据已有的原数组和keyword
*/new Vue({
el:‘#root‘,
data(){
return {
//data当中的数据包含初始化的数据和要收集的数据
keyword:‘‘,
persons:[
{id:1,name:‘zhaoliying‘,age:33},
{id:2,name:‘yangmi‘,age:34},
{id:3,name:‘ouyangnana‘,age:20},
{id:4,name:‘liuyifei‘,age:18},
] //代表的就是ajax回来的数据 }
},
computed: {
//这里面的数据不是初始化数据也不是要收集的数据，而是后面根据已有数据计算而来的// newpersons为compuated的属性，返回一个新数组 newPersons(){
// let keyword = this.keyword// let persons = this.persons let {keyword,persons} =this//对象的解构赋值// 原生js一步一步来// let result = []// for(let i = 0; i < persons.length; i++){// if(persons[i].name.indexOf(keyword) !== -1){// result.push(persons[i])// }// }//原始函数// let result = persons.filter(function(item,index){// //return后面一定是一个条件表达式 结果一定true或者false// return item.name.indexOf(keyword) != -1// })//箭头函数（箭头函数在用的时候，如果内部有this,小心）// 字符串的indexOf方法，返回某个指定的子字符串值在字符串中首次出现的位置，如果没有出现，返回-1// 过滤掉没匹配的对象 let result = persons.filter(item => item.name.indexOf(keyword) !=-1)
return result
}
},
methods: {
//无论是自己定义的回调函数 //还是以后我们共用的一些函数 //都在这个里面去写 },
watch:{
//监视已有的数据，已有的数据发生了改变，我们就可以干点什么 }
})
</script></body></html>
4.列表过滤和排序
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title></head><body><div id="root"><input type="text" placeholder="请输入查找的关键字" v-model="keyword"><ul><li v-for="(person, index) in newPersons" :key="person.id">
{{person.id}} --- {{person.name}} --- {{person.age}}
</li></ul><!-- @click="sortType = 0" 回调函数如果内部只有一行代码，完全可以把这行代码写在这，不用定义 --><button @click="sortType = 0">原样排序</button><button @click="sortType = 1">年龄升序</button><button @click="sortType = 2">年龄降序</button></div><script src="./js/vue.js"></script><script>/*
过滤分析：
根据效果分析，数组用的是原来的数据还是新的数组
1、假设用原来的数据，一上来展示没问题
2、当keyword变化的时候监视它，我们可以在原数组当中删除不包含keyword的项
3、当keyword的值又变为空串的时候，我们想回去回不去了
到此为止，卡死了
4、既然原数组没法做效果，就必须使用新的一个数组，而且这个数组一上来和原数组数据一样
5、既然是新数组，那就一定要用计算属性，根据已有的原数组和keyword
*//*
排序分析：
1、排序首先要有一个参照数据，所以在data当中我们需要自定义一个数据用来表示排序规则和类型
2、点击排序按钮的时候这个数据要发生响应变化，变化的值我们是自己设定好的
3、再来说排序的逻辑，其实就是在计算属性过滤的基础上去加逻辑
*/new Vue({
el:‘#root‘,
data(){
return {
//data当中的数据包含初始化的数据和要收集的数据 keyword:‘‘,
persons:[
{id:1,name:‘zhaoliying‘,age:33},
{id:2,name:‘yangmi‘,age:34},
{id:3,name:‘ouyangnana‘,age:20},
{id:4,name:‘liuyifei‘,age:18},
], //代表的就是ajax回来的数据 sortType:0//0代表原样排序 1代表升序 2代表降序 }
},
computed: {
//这里面的数据不是初始化数据也不是要收集的数据，而是后面根据已有数据计算而来的 newPersons(){
//过滤 let {keyword,persons,sortType} =this//对象的解构赋值// 过滤出name中包含keyword，返回新数组 let result = persons.filter(item => item.name.indexOf(keyword) !=-1)
// let arr = [10,7,30]// arr.sort(function(a,b){// return a - b// })//排序if(sortType !==0){
result.sort((a,b) => {
if(sortType ===1){
return a.age-b.age
}else{
return b.age-a.age
}
})
}
return result
}
},
methods: {
//无论是自己定义的回调函数 //还是以后我们共用的一些函数 //都在这个里面去写// changeType(num){// this.sortType = num// } },
watch:{
//监视已有的数据，已有的数据发生了改变，我们就可以干点什么 }
})
</script></body></html>
5，列表渲染
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title></head><body><div id="root"><ul><li v-for="(person, index) in persons" :key="person.id">
{{person.id}} --- {{person.name}} --- {{person.age}}
</li><!--
如果我们只是为了展示用的，key使用index没问题
如果我们以后对这个数据还有增删改的操作，那么index效率不高并且更可怕的是会出问题
key以后我们要使用的几乎都是id值，使用这个唯一标识可以提高我们列表渲染以及修改的效率
--></ul><button @click="changeFirstObjName">点击修改第一个人的姓名</button></div><script src="./js/vue.js"></script><script>new Vue({
el:‘#root‘,
data(){
return {
persons:[
{id:1,name:‘zhaoliying‘,age:33},
{id:2,name:‘yangmi‘,age:34},
{id:3,name:‘ouyangnana‘,age:20},
{id:4,name:‘liuyifei‘,age:18},
]
}
},
methods: {
changeFirstObjName(){
//第一种// this.persons[0].name = ‘yingbao‘//第二种 不行,修改数据，页面数据不会跟着改变// this.persons[0] = {id:1,name:‘yingbao‘,age:33}// console.log(this.persons)//第三种,第一个参数为index, 第二个参数为删除元素的数量，第三个参数为代替的元素this.persons.splice(0,1,{id:1,name:‘yingbao‘,age:33})
}
// data当中的数据，所有的对象属性都是响应式的,修改对象的属性，就会影响到页面更改// 修改数组的整体第一个值，页面不会发生改变，因为数组下标不是对象的属性，不是响应式数据//其实vm内部这个数组第一个数据已经改了，只是没有影响到页面// 数组的部分原生方法，被vue做了改变，名字和原生名字一样，但是已经不是原生方法了// vue 给这些方法添加了修改页面的功能，使得页面可以修改 },
})
// {// name:‘liuyuan‘,// girlF:{// name:‘zly‘,// age:33,// movies:[// {id:1,name:‘乘风破浪‘}// ]// }// }</script></body></html>
6，事件相关
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title></head><body><div id="root"><!-- 最初始的写法 --><button v-on:click="test1">test1</button><!-- 事件添加的简写 --><button @click="test2">test2</button><!-- 事件回调不带参数默认传递的是事件对象$event --><button @click="test3">test3</button><!-- 事件回调带了自己的参数 --><button @click="test4(‘zhaoliying‘)">test4</button><!-- 事件回调不但带了自己参数还要用到事件对象的东西 --><button @click="test5($event,‘zhaoliying‘)">test5</button><!-- 原生事件对象：当事件触发的时候，浏览器会调用这个回调函数，浏览器会帮我们自动的封装一个对象
作为实参传给回调函数的第一个形参，事件对象内部是和这次触发事件相关的所有信息 --><!-- 阻止事件冒泡 --><div style="width:300px;height:300px;background-color:red" @click="outer"><div style="width:100px;height:100px;background-color:green" @click.stop="inner"></div></div><!-- 取消浏览器的默认行为 --><a href="http://www.atguigu.com" @click.prevent="removeDefault">点我去学习</a><!-- 按键行为 --><input type="text" @keyup.enter="testKey"></div><script src="./js/vue.js"></script><script>//清除控制台报错 Vue.config.productionTip =falsenew Vue({
el:‘#root‘,
methods: {
test1(){
console.log(‘test1调用‘)
},
test2(){
console.log(‘test2调用‘)
},
//事件回调函数如果没有传递其它参数，默认传递过来的就是事件对象 test3(event){
console.log(‘test3调用‘,event.target.innerHTML)
},
test4(str){
console.log(‘test4调用‘,str)
},
test5(event,str){
console.log(‘test5调用‘,str,event.target.innerHTML)
},
outer(){
console.log(‘outer执行‘)
},
inner(event){
console.log(‘inner执行‘)
//原生阻止冒泡// event.stopPropagation(); },
removeDefault(event){
console.log(‘哈哈‘)
//原生阻止浏览器默认跳转行为// event.preventDefault(); },
testKey(event){
// if(event.keyCode === 13){// console.log(‘回车触发‘)// }
console.log(‘回车触发‘)
}
},
})
</script></body></html>
7，自动收集表单数据
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title></head><body><div id="root"><!-- //收集value值 --><form action="">
用户名：<input type="text" placeholder="请输入用户名" v-model="userInfo.username">
密码：<input type="password" placeholder="请输入用户名" v-model="userInfo.password"><br><!-- //单选框， -->
性别：
<input type="radio" name="sex" value="male" v-model="userInfo.gender">男
<input type="radio" name="sex" value="female" v-model="userInfo.gender">女
<br><!-- 多选框 -->
爱好：
??<input type="checkbox" value="basketball" v-model="userInfo.fav">
?<input type="checkbox" value="football" v-model="userInfo.fav">
??<input type="checkbox" value="pingpang" v-model="userInfo.fav"><br>
城市：
<select v-model="userInfo.cityId"><!-- select 收集的数据是选中的选项的value值 --><option :value="city.id" v-for="(city, index) in cities" :key="city.id">{{city.name}}</option></select><br><br><br><br>
自我简介：
<textarea v-model="userInfo.des"></textarea><br><!-- 阻止默认行为 ，form表单中，默认button是提交跳转，需要阻止默认事件 --><button @click.prevent="submit">提交</button></form></div><script src="./js/vue.js"></script><script>new Vue({
el: ‘#root‘,
data() {
return {
cities: [
{ id: 1, name: ‘北京‘ },
{ id: 2, name: ‘上海‘ },
{ id: 3, name: ‘深圳‘ },
],
userInfo: {
username: ‘‘,
password: ‘‘,
gender: ‘‘,
//必须用数组来初始化，多选框 fav: [],
cityId: ‘‘,
des: ‘‘
}
}
},
})
</script></body></html>
8，vue内置指令
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>Document</title></head><body><div id="root"><!-- <h2>我爱你</h2> --><p v-text="msg"></p><!-- 我爱你 会解析标签--><p v-html="msg" ref="p2"></p><!-- <h2>我爱你</h2> --><!-- <p>{{msg}}</p> --><button @click="test">test</button></div><script src="./js/vue.js"></script><script>new Vue({
el:‘#root‘,
data:{
msg:‘<h2>我爱你</h2>‘
},
methods: {
test(){
//获取p元素$refs.p2 console.log(this.$refs.p2.innerText) //我爱你 console.log(this.$refs.p3.innerHTML) //<h2>我爱你</h2> console.log(this.$refs.p3.innerText) //我爱你 }
},
})
</script></body></html>
原文：https://www.cnblogs.com/fsg6/p/13476033.html
内容总结
以上是互联网集市为您收集整理的vue基础（二）全部内容，希望文章能够帮你解决vue基础（二）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】