Larry

Vue 学习记录01: 基础知识

2019/11/06 Vuejs

1. 认识Vuejs

1.1. Vuejs基础

  1. Vue特点
  2. Vue渐进式

1.2 安装Vue

  1. CDN 引入

     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

  2. 下载引入

     <script src="../js/vue.js"></script>

  3. npm安装

1.3 Vue初体验

  1. Hello Vuejs

    • mustache 语法 -> 体验vue响应式

        <body>
  <h2></h2>
		
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
        data:{
        message:'hello world'
        }
    })
  </script>
		
  </body>

  2. Vue 列表展示

    • v-for

        <body>
  <div id="app" >
      <ul>
          <li v-for="item in movies"></li>
      </ul>
		    
  </div>
		
  <script src="../js/vue.js"></script>
  <script>
      const app = new Vue({
          el: '#app',
          data: {
              message: ' 你好！',
              movies: ['海王','少年派','大话西游','盗梦空间']
		
          }
      })
  </script>
  </body>

    • 给数组追加元素时，新的元素也可以渲染出来

  3. Vue计数器小案例

    • 事件监听：v-on:click -> methods

        <body>
  <div id="app">
      <h2>当前计数： </h2>
  <!--    <button v-on:click="counter++">+</button>-->
  <!--    <button v-on:click="counter&#45;&#45;">-</button>-->
      <button v-on:click="add">+</button>
      <button @click="sub">-</button>
  </div>
		
  <script src="../js/vue.js"></script>
  <script>
      const app = new Vue({
          el: '#app',
          data: {
              counter: 0
          },
           methods: {
              add: function( ){
                  this.counter++;
              },
              sub: function () {
                  this.counter--;
              }
          }
      })
  </script>
  </body>

1.4 Vue中的MVVM

1.5 创建Vue时，opthons 可以放哪些东西

  1. el:
  2. data:
  3. methods:
  4. 生命周期

2. 插值语法

  1. mustache 语法

     <div id="app" >
     <h2></h2>
     <h2></h2>
     <h2></h2>
     <h2></h2>
     <h2> </h2>
 </div>
	
 <script src="../js/vue.js"></script>
	
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message : 'hello',
         firstName: 'kobe',
         lastName: 'bryant'
     }
	
   })
 </script>

  2. v-once

     <div id="app" >
     <h2></h2>
     <h2 v-once></h2>
 </div>
	
 <script src="../js/vue.js"></script>
	
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message : 'hello'
     }
	
   })
 </script>

  3. v-html

     <div id="app" >
     <h2></h2>
     <h2 v-html="url"></h2>
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message : 'hello',
         url: '<a href="http://www.baidu.com">百度一下<a/>'
     }
	
   })
 </script>

  4. v-text

     <div id="app" >
     <h2>，李银河</h2>
     <h2 v-test="message">，李银河</h2>
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message : 'hello'
     }
   })
 </script>

  5. v-pre:

     <div id="app" >
     <h2></h2>
     <h2 v-pre></h2>
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message : 'hello'
     }
   })
 </script>

  6. v-cloak: 斗篷

     <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         [v-cloak] {
             display: none;
         }
     </style>
 </head>
 <body>
	
 <div id="app"  v-cloak>
		
 </div>
 <script src="../js/vue.js"></script>
 <script>
     setTimeout(function () {
     const app = new Vue({
       el: '#app',
       data: {
         message : 'hello'
       }
     })
   },1000)
 </script>
	
 </body>

3. 动态绑定属性 v-bind

3.1. v-bind 基本属性

  1. v-bind:src

  2. :href

     <div id="app" >
     <h2></h2>
     <a v-bind:href="url">百度一下</a>
     <a :href="url">百度一下</a>
     <img v-bind:src="imgUrl" alt="">
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
         url : 'http://www.baidu.com',
         imgUrl: 'http://img2.imgtn.bdimg.com/it/u=745008878,2424441072&fm=26&gp=0.jpg'
	
     }
   })
 </script>

3.2. v-bind 动态绑定class

  1. 对象语法： :class=’{类名:boolean}’

     <div id="app">
     <h2 v-bind:class="{active: isActive , line: isLine}"></h2>
     <h2 v-bind:class="getClasses()"></h2>
     <button v-on:click="btnClick">click</button>
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message: ' 你好！',
         isActive: true,
         isLine: true
     },
       methods:{
       btnClick: function () {
           this.isActive = !this.isActive;
       },
           getClasses: function () {
         return {active: this.isActive , line: this.isLine}
	
       }
       }
   })
 </script>

  2. 数组语法

     <div id="app">
     <h2 :class="['active','line']"></h2>
 </div>
	
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message: ' 你好！'
     }
   })
 </script>

3.3. v-bind 绑定style

  1. 对象语法

     <div id="app">
     <h2 v-bind:style="{'font-size': '50px',background: 'red'}"></h2>
     <h2 :style="{fontSize: finalFont + 'px' , background: finalColor}"></h2>
     <h2 :style="getStyle()"></h2>
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message: ' 你好！',
         finalFont: 100,
         finalColor: 'red'
     },
       methods: {
       getStyle: function () {
           return {fontSize: this.finalFont + 'px' , background: this.finalColor}
       }
       }
   })
 </script>

  2. 数组语法

     <div id="app">
     <h2 v-bind:style="[fontSize,backgroudColor]"></h2>
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message: ' 你好！',
       fontSize: {fontSize: '30px'},
       backgroudColor: {background: 'red'}
     },
   })
 </script>

4. 计算属性

  1. 案例一： firstName + lastName

     <div id="app">
     <h2> </h2>
     <h2></h2>
     <h2></h2>
     <h2></h2>
 </div>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message: ' 你好！',
         firstName: 'kobe',
         lastName: 'James'
     },
       computed: {
       fullName: function () {
         return this.firstName + ' ' + this.lastName
       }
       },
       methods: {
       getFullName() {
         return this.firstName + ' ' + this.lastName
       }
       }
   })
 </script>

  2. 案例二： books -> price

<div id="app">
		<h2>总价格:  </h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
       books: [
	       {id: 100, name: '计算机发展', price: 102},
	       {id: 101, name: 'Unix操作系统详解', price: 122},
	       {id: 102, name: '高性能WEB架构', price: 103},
	       {id: 103, name: 'Python 高级编程', price: 84},
	       {id: 104, name: 'JavaScript 从入门到高级', price: 110}
       ]
    },
	  computed: {
      totalPrice: function () {
        let result = 0;
	      for(let i=0;i < this.books.length; i++){
	        result += this.books[i].price;
	      }
        for(let i in this.books){
          console.log(i);
        }
        for(let book of this.books){
          console.log(book.price)
        }
	      return result;
      },
	  }
  })
</script>

Search

    Table of Contents