vue框架之基础语法等相关内容-111

1 条件渲染

1.1 通过v-if和v-for实现购物车

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="./js/vue.js"></script>
   <style>
       .red {
           background: red;
      }

       .green {
           background: green;
      }

       .font {
           font-size: 30px;
      }

   </style>
   <title>Title</title>
</head>
<body>

<div id="box">

   <!--   土办法-->
   <!--   <ul>-->
   <!--       <li>{{shopping[0]}}</li>-->
   <!--       <li>{{shopping[1]}}</li>-->
   <!--       <li>{{shopping[2]}}</li>-->
   <!--   </ul>-->

   <!--v-for实现-->
   <ul v-if="shopping.length>0">
       <li v-for="data in shopping">{{data}}</li>
   </ul>
   <div v-else>购物车空空如也</div>
</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           shopping: ['苹果', '香蕉', '桃子'],
      },

  })
</script>
</html>

1.2 v-if/v-else-if/v-else

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="./js/vue.js"></script>
   <style>

   </style>
   <title>Title</title>
</head>
<body>

<div id="box">
   <div v-if="which==1">1111</div>
   <div v-else-if="which==2">2222</div>
   <div v-else>3333</div>

</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           which:1
      },

  })
</script>
</html>

 

2 列表渲染

2.1 for循环数组,对象

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="./js/vue.js"></script>
   <style>

   </style>
   <title>Title</title>
</head>
<body>

<div id="box">
   <h1>循环数组</h1>
   <div>
       <p v-for="data in arr">{{data}}</p>
   </div>
   <h1>循环对象</h1>
   <div>
       <p v-for="data in obj">{{data}}</p>
   </div>

   <h1>循环数组索引和value</h1>
   <div>
       <p v-for="(data,index) in arr">索引是:{{index}},数据是{{data}}</p>
   </div>
   <h1>循环对象key和value</h1>
   <div>
       <p v-for="(value,key) in obj">key是:{{key}},value是:{{value}}</p>
   </div>

</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           arr: ['zs', 'ls', 'ww'],
           obj: {name: 'lqz', age: 18, sex: '男'},
      },

  })
</script>
</html>

2.2 key值的解释

1 v-for循环数组,对象时,建议在控件(组件,标签)写一个key属性,属性值唯一
2 页面更新以后,加速dom的替换(渲染),虚拟dom的替换diff算法
3 :key="变量"

2.2 数组更新与检测

0 数据双向绑定,数据变化,页面变,页面变化数据变
1 使用以下方法操作数组,可以检测变动:push,pop,shift,unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map(),新数组替换旧数组
-页面不会更改:vm.arr.concat(['44','55'])
-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改:通过索引值更新数组
-解决方案一:
   vm.arr[0]
   "11"
   vm.arr[0]='99'
   "99"
   vm.arr.splice(0,1,'88')
  ["99"]
-解决方案二
Vue.set(vm.arr,0,'lqz')

3 上面能更新是因为作者重写了那些方法

 

3 事件处理

3.1 input过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">
   <!--
   blur:失去焦点触发
   change:失去焦点触发,跟blur一样
   input:数据发生变化,就会触发
   -->

<!--   <input type="text" v-model="myinput" @blur="handleChange">   {{myinput}}-->
<!--   <input type="text" v-model="myinput" @change="handleChange">   {{myinput}}-->
   <input type="text" v-model="myinput" @input="handleChange">   {{myinput}}
   <br>
   <div>
       <p v-for="data in new_arr">{{data}}</p>
   </div>




</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           myinput:'',
           arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
           new_arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
      },
       methods:{
           handleChange(){
               console.log(this.myinput)
               //控制arr的变化,数据又双向绑定了,页面就会变化
               this.new_arr=this.arr.filter(item=>{
                   return item.indexOf(this.myinput) >-1
              })

          }
      }

  })
   //
   // var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
   // var res=a.filter(function (itme) {
   //     // if (itme.length >4){
   //     //     return true
   //     // }else {
   //     //     return false
   //     // }
   //     // if (itme.indexOf('aa')>-1){
   //     //     return true
   //     // }else {
   //     //     return false
   //     // }
   //     return itme.indexOf('a')>-1
   //
   // })
   //
   //
   // var res=a.filter(item=>{
   //     return itme.indexOf('a')>-1
   // })
   // console.log(res)
   //
   //
   // var a=function (a) {
   // }
   //
   // var a=a=>{}



</script>
</html>

 

3.2 简单事件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">
   <button @click="isShow=!isShow">点我折叠,展开</button>
   <button @click="handleClick">点我折叠,展开2</button>
<!--   <button @click="handleClick($event)">点我折叠,展开2,传递event事件</button>-->
   <button @click="handleClick">点我折叠,展开2,传递event事件</button>
   <div v-show="isShow">
      我很好看
       <br>
      你也很好看呢
       <br>
      大家都好看

   </div>

</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           isShow:true

      },
       methods:{
           handleClick(ev){
               console.log(ev)
               this.isShow=!this.isShow
          }
      }



  })
   //
   // var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
   // var res=a.filter(function (itme) {
   //     // if (itme.length >4){
   //     //     return true
   //     // }else {
   //     //     return false
   //     // }
   //     // if (itme.indexOf('aa')>-1){
   //     //     return true
   //     // }else {
   //     //     return false
   //     // }
   //     return itme.indexOf('a')>-1
   //
   // })
   //
   //
   // var res=a.filter(item=>{
   //     return itme.indexOf('a')>-1
   // })
   // console.log(res)
   //
   //
   // var a=function (a) {
   // }
   //
   // var a=a=>{}



</script>
</html>

3.3 事件修饰符

.stop 阻止事件冒泡
.self 只处理自己的事件,子控件冒泡的事件不处理

.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">
   <ul @click.self="handleUl">
       <!--       <li v-for="data in datalist" @click="handleLi($event)">{{data}}</li>-->
       <!--       <li v-for="data in datalist" @click.stop="handleLi">{{data}}</li>-->
<!--       <li v-for="data in datalist" @click="handleLi">{{data}}</li>-->
       <li v-for="data in datalist" @click.once="handleLi">{{data}}</li>
   </ul>

   <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           datalist: ['111', '222', '333']

      },
       methods: {
           // handleLi(ev) {
           //     console.log('li被点击了')
           //     ev.stopPropagation() //点击事件停止向父组件传递
           // },
           handleLi() {
               console.log('li被点击了')
          },
           handleUl() {
               console.log('Ul被点击了')
          },
           // handleA(ev){
           //     console.log('a被点击了')
           //     ev.preventDefault() //阻止a标签的跳转
           // }
           handleA() {
               console.log('a被点击了')
          }
      }
  })
</script>
</html>

3.4 按键修饰符

1 敲击回车键干一个事

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">

<!--   <input type="text" v-model="myinput" @keyup.enter="handleKey">-->
   <input type="text" v-model="myinput" @keyup.13="handleKey">
</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           myinput: ''

      },
       methods: {
           // handleKey(ev){
           //     console.log('xxx')
           //     console.log(ev)
           //     if(ev.keyCode==13){
           //         console.log('回车被按下了')
           //     }
           //
           // }
           handleKey() {
               console.log('回车被敲二零')

          }
      }


  })


</script>
</html>

4 数据双向绑定

4.1 v-model使用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">
   <input type="text" v-model="myinput">
   <br>
  {{myinput}}
   <br>
   <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
   <br>
  {{text}}
</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           myinput: '',
           text: '',
      },


  })


</script>
</html>

5 表单控制

5.1 checkbox选中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>

<div id="box">

  <h1>表单相关之checkbox</h1>
  <input type="checkbox" v-model="check">记住密码
  <br>
  {{check}}



</div>

</body>
<script>
  var vm = new Vue({
      el: '#box',
      data: {
          check: true,


      },


  })


</script>
</html>

5.2 多选

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">


   <h1>表单相关之checkbox多选</h1>
   <h3>你喜欢的女明星</h3>
   <input type="checkbox" v-model="checkgroup" value="lyf">刘亦菲
   <input type="checkbox" v-model="checkgroup" value="baby">baby
   <input type="checkbox" v-model="checkgroup" value="egon">egon
   <br>
  {{checkgroup}}
</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
   
           checkgroup:[],

      },


  })


</script>
</html>

5.3 单选

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">
 
   <h1>表单相关之radio</h1>
   <input type="radio" v-model="ra" value="男">男
   <input type="radio" v-model="ra" value="女">女
   <input type="radio" v-model="ra" value="未知">未知
   <br>
  {{ra}}

</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           ra:'',

      },


  })


</script>
</html>

5.4 购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">


   <ul>
       <!--<li v-for="item in datalist">商品名字:{{item.name}},商品数量:{{item.number}}</li>-->
       <li v-for="item in datalist">
           <input type="checkbox" :value="item" v-model="checkgroup">
          {{item}}
       </li>
   </ul>
   <br>
  当前价格是:{{getPrice()}}
   <br>
  {{checkgroup}}
</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           datalist: [
              {name: '特斯拉', price: 10, number: 1, id: '1'},
              {name: '苹果', price: 3, number: 4, id: '2'},
              {name: '香蕉', price: 80, number: 6, id: '3'}
          ],
           checkgroup: [],

      },
       methods:{
           getPrice(){
               var sum_price=0
               for(i in this.checkgroup){
                   sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
              }
               return sum_price

          }
      }

  })


</script>
</html>

5.5 购物车之全选,全不选

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <title>Title</title>
</head>
<body>

<div id="box">

   <input type="checkbox" v-model="isAll" @change="handleCheck"> 全选/全不选
   <ul>
       <!--<li v-for="item in datalist">商品名字:{{item.name}},商品数量:{{item.number}}</li>-->
       <li v-for="item in datalist">
           <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
          {{item}}
       </li>
   </ul>
   <br>
  当前价格是:{{getPrice()}}
   <br>
  {{checkgroup}}
</div>

</body>
<script>
   var vm = new Vue({
       el: '#box',
       data: {
           datalist: [
              {name: '特斯拉', price: 10, number: 1, id: '1'},
              {name: '苹果', price: 3, number: 4, id: '2'},
              {name: '香蕉', price: 80, number: 6, id: '3'}
          ],
           checkgroup: [],
           isAll:false,

      },
       methods:{
           getPrice(){
               var sum_price=0
               for(i in this.checkgroup){
                   sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
              }
               return sum_price

          },
           handleCheck(){
               // console.log('xxx')
               if(this.checkgroup.length>0){
                   this.checkgroup=[]
              }else {
                   this.checkgroup=this.datalist
              }

          },
           handleOne(){
               console.log('选中',this.checkgroup.length)
               console.log('总数据',this.datalist.length)

               if(this.checkgroup.length==this.datalist.length){
                   this.isAll=true
              }else {
                   this.isAll=false
              }
          }
      }

  })


</script>
</html>
上一篇:python走起之第十四话


下一篇:JS中this指向问题