DAY 73 vue01

Posted DEJAVU_ERIC

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DAY 73 vue01相关的知识,希望对你有一定的参考价值。

1 Vue,js框架,渐进式框架(局部,全部用)(混合开发可以用,前后端分页也可以用(用的最多))
2 mvvm架构:model,viewmodel,view
3 单页面开发(全部用vue开发,就一个index.html页面),其他都是组件间的替换
4 组件化开发:页面组件,普通组件
5 编译---》1个index.html,css,js,图片
6 插值语法
-{{ 变量,js语法,三目运算符}}
7 文本指令
-v-html
   -v-text
   -v-show
   -v-if
8 事件指令
-v-on:click=\'函数\'
   -@click=\'函数\'

 

1 属性指令

v-bind:src/href/name/=\'变量\'
缩写成
:src=\'变量\'

 

2 style和class的使用


#js数组操作,增加值,修改值,删除值,vue的页面都会变
可以检测到变动的数组页面也跟着编号的操作:

push:最后位置添加 pop:最后位置删除 shift:第一个位置删除 unshift:第一个位置添加 splice:切片 sort:排序 reverse:反转

检测不到变动的数组页面不变化的操作:

filter():过滤 concat():追加另一个数组 slice(): map():

原因:

作者重写了相关方法(只重写了一部分方法,但是还有另一部分没有重写)

3 条件渲染

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

   </style>
</head>
<body>

<div id="app">

   <div v-if="a==\'A\'">A</div>
   <div v-else-if="a==\'B\'">B</div>
   <div v-else>其他</div>


</div>


</body>

<script>


   var vm = new Vue({
       el: \'#app\',
       data: {
           a:\'A\'
      },
       methods: {
           handle() {
               this.style_obj.fontSize = \'90px\'
          }
      }

  })
</script>

</html>

 

4 列表渲染(购物车)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <style>

   </style>
</head>
<body>

<div id="app">
<button @click="handld">点我加载数据</button>
   <hr>
   <table class="table" v-if="!goods.length==0">
       <thead>
       <tr>
           <th>商品名字</th>
           <th>价格</th>
           <th>数量</th>
       </tr>
       </thead>
       <tbody>
       <tr v-for="good in goods">
           <td>{{good.name}}</td>
           <td>{{good.price}}</td>
           <td>{{good.count}}</td>
       </tr>
       </tbody>
   </table>
   <div v-else>
      什么东西都没有
   </div>

</div>


</body>

<script>


   var vm = new Vue({
       el: \'#app\',
       data: {
           goods:[]
      },
       methods:{
           handld(){
               //去后台加载数据
               this.goods=[{name:\'特斯拉\',price:10000,count:1},{name:\'包子\',price:3,count:10},{name:\'花卷\',price:5,count:12}]
          }
      }


  })
</script>

</html>

 

5 v-for

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <style>

   </style>
</head>
<body>

<div id="app">
   <ul>
       <!--   <li v-for="l in list">{{l}}</li>-->
       <li v-for="(value,index) in list">第{{index}}个人------名字是:{{value}}</li>


   </ul>

   <hr>


   <h1>循环对象</h1>
   <div>
       <span v-for="o in obj"><p>{{o}}</p></span>
   </div>

      <div>
       <span v-for="(value,key) in obj"><p>key值是:{{key}},value值是{{value}}</p></span>
   </div>


</div>


</body>

<script>


   var vm = new Vue({
       el: \'#app\',
       data: {
           //数组
           list: [\'张三\', \'李四\', \'王五\'],
           //对象
           obj: {name: \'lqz\', age: \'19\', sex: \'男\'}
      }


  })
</script>

</html>

 

6 事件处理

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <style>

   </style>
</head>
<body>
<div class="container-fluid">
   <div class="row">
       <div class="col-lg-6 col-md-offset-3">

           <div id="app">
               <!--               <input type="text" v-model="name" placeholder="光标移开触发-blur" v-on:blur="handle_blur">-->
               <!--               <input type="text" v-model="name" placeholder="请输入要搜索的内容-change" v-on:change="handle_change">-->
<!--               <input type="text" v-model="name" placeholder="请输入要搜索的内容-input" v-on:input="handle_input">-->
               <input type="text" v-model="name" placeholder="请输入要搜索的内容-input" @input="handle_input">
               <ul>
                   <li v-for="l in list">{{l}}</li>
               </ul>

           </div>

       </div>

   </div>


</div>


</body>

<script>


   var vm = new Vue({
       el: \'#app\',
       data: {
           name: \'\',
           list_old: [\'a\', \'atm\', \'atmtw\', \'atmtwxx\', \'b\', \'body\', \'bodyxx\', \'tm\', \'m\'],
           list: [\'a\', \'atm\', \'atmtw\', \'atmtwxx\', \'b\', \'body\', \'bodyxx\', \'tm\', \'m\']
      },
       methods: {
           handle_input() {
               //只要输入框文字发生变化,就会触发它
               //根据输入的值,过滤list
               // let _this=this
               // this.list.filter(function (item) {
               //     console.log(_this.list_old)
               //
               // })


               this.list = this.list_old.filter(item => {
                   if (item.indexOf(this.name) > -1) {
                       return true
                  } else {
                       return false
                  }

              })

          },
           handle_change() {
               console.log(\'change\')
               console.log(this.name)
          },
           handle_blur() {
               console.log(\'blur\')
               console.log(this.name)
          },
      }


  })

   // let list = [\'a\', \'atm\', \'atmtw\', \'atmtwxx\', \'b\', \'body\', \'bodyxx\', \'tm\', \'m\']

   // let list_new=list.filter(function (item) {
   //     if(item.length>=3){
   //         return true
   //     }else{
   //         return false
   //     }
   //
   // })
   //箭头函数---es6的语法
   // let list_new = list.filter(item => {
   //     if (item.length >= 3) {
   //         return true
   //     } else {
   //         return false
   //     }
   // })
   // console.log(list_new)
   //
   //
   // var a = (data, a) => {
   //
   // }
   // var b = function (data, a) {
   //
   //
   // }


   let a=\'efy\'
   let str_a=\'abcdefg\'
   console.log(str_a.indexOf(a))

</script>

</html>

 

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <style>

   </style>
</head>
<body>
<div class="container-fluid">
   <div class="row">
       <div class="col-lg-6 col-md-offset-3">

           <div id="app">
               <div v-on:click="div_click">
                   <button @click.stop="button_click">点我看美女</button>
               </div>

               <hr>
               <div v-on:click.self="div_click">
                   <button @click="button_click">点我看美女2</button>
                   <span>dadfafdasdfadsf</span>

               </div>


               <hr>
               <a href="http://www.baidu.com" @click.prevent="handle_a">点我看没办</a>

               <hr>
               <button @click.once="handle_one">我只能点一次</button>
           </div>

       </div>

   </div>


</div>


</body>

<script>


   var vm = new Vue({
       el: \'#app\',
       data: {},
       methods: {
           div_click() {
               alert(\'div被点击了\')
          },
           button_click() {
               alert(\'button被点击了\')
          },
           handle_a(){
               alert(\'a链接跳转阻挡了\')
               location.href=\'http://www.baidu.com\'
          },
           handle_one(){
               alert(\'我只会谈一次\')
          }
      }


  })

</script>

</html>

 

以上是关于DAY 73 vue01的主要内容,如果未能解决你的问题,请参考以下文章

Vue黑马头条移动端项目day01

vue学习day01

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置