一、Vue.js实现留言板功能:
例如上图:
实现input框输入内容 点击留言,渲染到dom中,然后在input搜索框输入内容 实现搜索功能,最后给点击删除button按钮 添加删除功能。
好了下面直接上代码了 。
记得引入vue.js
<div id="app">
<div>
<span>
姓名:<input type="text" v-model="name"> <!--双向数据绑定-->
</span>
<span>
内容:<input type="text" v-model="text">
</span>
<button @click="add()">点击留言</button>
<!-- 计算属性 -->
搜索:<input type="text" v-model="sousuo">
</div>
<ul>
<li v-for="(item,index) in jj" :key="index">
姓名:{{item.name}}
内容:{{item.text}}
<button @click="remove(index)">删除</button>
</li>
<li v-if="mes.length==0">当前没有对应记录</li>
</ul>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
mes:[
{name:"王稿子",text:"来踩踩"},
{name:"法外狂徒张三",text:"想宰羊"},
{name:"纵火狂魔李某",text:"烤羊肉吃吗"},
{name:"猥琐人赵某",text:"你长得好漂亮"},
{name:"神经病刘某",text:"啊哈哈嘿嘿嘿"},
],
name:"",
text:"",
sousuo:""
},
methods:{
add(){
//点击添加留言
//要获取对应的名字和内容
if(this.name==""||this.text==""){
return
}else{
this.mes.push({name:this.name,text:this.text})
}
//点击添加留言之后清除框内内容
this.name=""
this.text=""
},
remove(index){
//让当前对应的数据在数组中直接删除
this.mes.splice(index,1)
}
},
//计算属性
computed:{
jj(){
//根据 this.sousuo 对 this.mes进行对应的过滤 找到其中符合要求的元素
//str.includes(XXX)判断str是否具有xxx对应的子串 空字符串是任意字符串的子串
let result=this.mes.filter(item=>item.text.includes(this.sousuo))
return result
}
}
})
</script>
二、计算属性
上面的小案例用到了计算属性,怎么用看如下代码
<div id="app">
<p>
姓:<input type="text" v-model="first">
</p>
<p>
名字:<input type="text" v-model="lsat">
</p>
{{allName}}
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
first:"",
lsat:""
},
computed:{
allName(){
return this.first+this.lsat
}
}
})
</script>
上次用过 el 它是用来绑定dom 、data绑定的数据、methods绑定的方法、computed就是 计算属性了,它是通过原本属性进行计算产生一个新的属性,也是属于一个方法。
随便起个名**{{allName}}在v-model后面给个名first和lsat**,在data里赋值为空,最后在computed里 然后给个allName方法 然后在里面计算,allName 在computed 里就变成方法了。
实现结果如下:
就这个意思!
三、购物车加减计算
举个小小的计算例子:
点击- 数量–,点击+数量++,总数量会显示合计价格也会显示。下面就上代码了 。
<div id="app">
<ul>
<li v-for="(item,index) in goodsList" :key="item.id">
名称:{{item.name}}
单价:{{item.price}}
数量:
<button @click="add(index)">-</button>
  {{item.count}}  
<button @click="bdd(index)">+</button>
小计:{{item.count*item.price}}
</li>
<li>
<!-- 计算属性 -->
<p>总数量:{{total}}</p>
<p>合计:    {{allPrice}}</p>
</li>
</ul>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
goodsList:[
{id:1,name:"鞋子",count:1,price:100},
{id:2,name:"上衣",count:1,price:200},
{id:3,name:"裤子",count:1,price:150},
{id:4,name:"内衣",count:1,price:30},
]
},
methods:{
bdd(index){
this.goodsList[index].count++
},
add(index){
if(this.goodsList[index].count==0){
return
}
this.goodsList[index].count--
}
},
//计算属性
computed:{
total(){ //方法
let sum=0
this.goodsList.forEach(item=>{
sum+=item.count
})
return sum
},
allPrice(){ //方法
let sum=0
this.goodsList.forEach(item=>{
sum+=item.count*item.price
})
return sum
}
}
})
</script>
很简单一个东西,没事多练习练习吧。
四、watch监听 选项
watch 选项:监听选项 对vue中某一个数据进行监听,当数据发生变化时,执行对应函数
watch和计算属性的区别:
1.watch 不产生新的属性 只是在原有的内容进行更改
computed 利用原本属性 产生一个新的属性
2.computed 用于基本永远有数据 可以直接计算出来的内容 计算属性中通常写的都是简单的逻辑 一些基本的计算和对应的判定
watch 用于复杂逻辑 搜索!input框 值发送变化时,Ajax请求,当数据变化
实现功能较为复杂时,使用watch,watch不是只对属性服务,也可以写多种操作。
例如实现一下功能:
20度以上提示穿短袖,10-20度 长袖,0-10度 外套,0度一下 棉衣
先简单写一下dom页面
<div id="app">
<p>
当前温度:
<button @click="add()">-</button>
{{temperature}}
<button @click="bdd()">+</button>
</p>
<p>
建议穿衣指数:{{dress}}
</p>
</div>
再来js
let vn=new Vue({
el:"#app",
data:{
temperature:20,
dress:"可以穿短袖"
},
methods:{
add(){
this.temperature--
},
bdd(){
this.temperature++
}
},
watch:{
temperature(){
if(this.temperature>20&&this.temperature<=40){
this.dress="可以穿短袖"
}else{
if(this.temperature>40){
this.dress="可以逃离地球了"
}else{
if(this.temperature<=20&&this.temperature>=10){
this.dress="长袖"
}else{
if(this.temperature<10&&this.temperature>=-10){
this.dress="外套"
}else{
if(this.temperature<-10&&this.temperature>=-15){
this.dress="有点冷穿棉衣吧"
}else{
if(this.temperature<-15&&this.temperature>-25){
this.dress="可以逃离地球了"
}
}
}
}
}
}
}
}
})
就上面的逻辑写的有点长了凑活看吧哈。
五、set方法(重要)
例如先遍历一个数组,点击input改变第二个内容。
<div id="app">
<ul>
<li v-for="(item,index) in lists" :key="index">
{{item}}
</li>
<button @click="change()">改变第二个元素</button>
</ul>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
lists:[1,2,3,4],
},
methods:{
change(){
Vue.set(this.lists,1,10)
</script>
vue动态响应,当改变数组中的内容时,响应取消
当改变复杂元素中的内容时,不会自动渲染
vue保留了一个名为set的方法,帮助用户在更改复杂内容的同时,也可以渲染
再举个对象的例子:
点击input 改变第一行第二个内容 并增加一个
<div id="app">
<ul>
<li v-for="(item,index) in obj" :key="index">
{{index}}
{{item}}
</li>
</ul>
<button @click="change()">改变第二个元素</button>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
obj:{
name:"王一",
age:2,
color:"红色"
}
},
methods:{
change(){
//增加
this.obj.name="王二" //bug先改在增加就可以直接用 不然只能用set
// this.obj.height=180
Vue.set(this.obj,"height",180)
}
}
})
</script>
Vue类中静态方法;1.操作的元素、2.操作的索引值、3.改变的结果
六、v-once 取消双向绑定
v-once 绑定给指定标签 作用的标签只渲染一次包括内部数据及结构
例如下面这个样子,初始是一样的 但是里面内容改变 外部的dom不会改变
input标签双向绑定之后,在p标签内添加一个 v-once 就会取消双向绑定了
<div id="app">
<input type="text" v-model="mes">
<p v-once>{{mes}}</p>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
mes:"hello world"
}
})
</script>
come to an end !