vue.js学习笔记--基本语法

一、插值操作：

1. mustache语法

  <div id="app">
    <p>{{message}} , world !</p>
    <p>{{firstname + ' ' + lastname}}</p>
    <p>{{firstname}}  {{lastname}}</p>
    <p>{{num * 2}}</p>
    <p>{{num == 5 ? 'num等于5' : 'num不等于5'}}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data:{
        message: 'hello',
        firstname: 'kobe',
        lastname: 'bryant',
        num : 5
      }
    })
  </script>

2. v-once

某些特殊情况下，我们可能不希望界面随意的改变，这个时候可以使用v-once指令

• 该指令后面不需要任何表达式
• 该指令表示元素和组件只渲染一次，不会随数据的改变而改变
  

3. v-html

某些情况下，我们从服务器请求到的数据本身就是一个html代码。如果我们直接使用{{}}来输出，会将html代码一起输出，但如果我们希望是按照html格式进行解析，并显示对应的内容，可以使用该指令，将html字符串解析之后进行显示。

4. v-text

作用和mustache比较相似，都是将数据显示在界面上，但是使用起来不够灵活

    <p>{{message}},world</p>
    <p v-text="message">,world</p>
    <!-- hello,world
         hello -->

5. v-pre

用于跳过这个元素和它子元素的编译过程，用于显示原来的mustache语法

    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
    <!-- hello
        {{message}} -->

6. v-cloak

某些情况下，比如网络比较慢的时候，在未执行到js代码的时候，{{}}不会显示具体的值而是将表达式显示出来。为了提高用户体验，可以使用该标签设置vue解析之前和之后的不同样式。这样的话，在vue解析之前，标签有一个属性v-cloak，解析之后，则没有该属性。

  <style>
    [v-cloak] {
      display: none
    }
  </style>
 、、、
  <div id="app">
    <p v-cloak>{{message}}</p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      }
    })
  </script>
</body>

二、绑定属性（v-bind）：

1.基本使用

前面的指令都是将值插入到模板的内容中，而当标签的属性需要动态决定时，可以使用v-bind指令进行绑定。比如a标签的href属性、img的src属性等

<a v-bind:href="url">百度</a>
<!--缩写-->
<a :href="url">百度</a>

2.v-bind动态绑定class

class后面跟的是一个对象，格式为:class="{key(类名):value(布尔值)}"，可以和普通的class同时存在；如果过于复杂，可以放在一个methods或者computed中

  <div id="app">
    <p :class="{red:isRed, yellow:isYellow}">hello</p>
    <button @click="change">change</button>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isRed: true,
        isYellow: false
      },
      methods: {
        change: function () {
          this.isRed = !this.isRed
          this.isYellow = !this.isYellow
        }
      }
    })
  </script>

3.v-bind动态绑定style

可以使用v-bind来绑定一些css内联样式实现动态改变样式，格式为:style="{key(css属性名):value(属性值)}"

  <div id="app">
    <p :style="{fontSize: fs}">hello</p>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        fs: '20px'
      }
    })

三、计算属性：

在模板中我们可以直接通过插值语法显示data中的数据，但是在某些情况下，我们可能需要对数据进行一些转化或者将多个数据结合起来再显示，这个时候我们可以使用计算属性。

1.基本使用

  <div id="app">
    <p>总价格：{{totalPrice}}</p>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        books:[
          {id:1,name:'java从入门到放弃',price:80},
          {id:2,name:'c语言从入门到放弃',price:90},
          {id:3,name:'c++从入门到放弃',price:100},
        ]
      },
      computed: {
        totalPrice:function(){
          let res = 0
          for(book of this.books)
            res += book.price
          return res
        }
      },
    })
  </script>

2.计算属性和methods的对比

• 计算属性会将计算的值进行缓存，当值不变的情况下，多次调用，计算属性只会调用一次，而methods会调用多次，浪费性能。
• 计算属性必须返回一个值，页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

3. 补充：ES6对象字面量增强写法

（1）属性的简写：

    let name = 'nic'
    let age = 22
    
    //ES6之前
    let obj = {
      name: name,
      age: age
    }
    
    //ES6之后
    let obj = {
      name,
      age
    }

（2）方法的简写：

    //ES6之前
    let obj = {
      run:function(){
        console.log('run')
      }
    }
    
    //ES6之后
    let obj = {
      run(){
        console.log('run')
      }
    }

四、事件监听：

在前端开发中，我们经常用到交互，这个时候我们需要监听点击、拖拽、键盘等事件。在vue中我们通常使用v-on指令进行事件的监听。

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

• 如果该方法不需要额外参数，那么方法后的()可以不加。
• 如果省略了()，但是定义方法时本身有一个参数，默认会将原生事件event参数传递进去。
• 如果需要传入某个参数，同时需要event时，可以将$event作为参数传递进去

v-on修饰符：

    <!-- 阻止冒泡 -->
    <button @click.stop="dothis"></button>

    <!-- 阻止默认行为 -->
    <button @click.prevent="dothis"></button>

    <!-- 键修饰符-键别名 -->
    <button @keyup.enter="dothis"></button>
    <!-- 键修饰符-键代码 -->
    <button @click.13="dothis"></button>

    <!-- 点击回调只会促发一次 -->
    <button @click.once="dothis"></button>

    <!-- 串联修饰符 -->
    <button @click.stop.prevent="dothis"></button>

五、条件判断：

    <h3 v-if="score>=90">优秀</h3>
    <h3 v-else-if="score>=80">良好</h3>
    <h3 v-else-if="score>=60">及格</h3>
    <h3 v-else>不及格</h3>

这种情况使用计算属性更合适

v-show的用法和v-if非常相似，也决定一个元素是否渲染：

• v-if当条件为false时，压根不会有对应的元素在DOM中
• v-show当条件为false时，仅仅是将元素的display属性设置为none而已
  开发中如何选择呢？
• 当需要在显示和隐藏之间频繁切换时，使用v-show
• 当只有一次切换时，通常使用v-if

六、循环遍历：

1. 遍历数组

    <ul>
      <!-- 在遍历对象的时候没有使用索引值 -->
      <li v-for="item in movies">{{item}}</li>
    </ul>
    <ul>
      <!-- 在遍历对象的时候使用索引值 -->
      <li v-for="(item,index) in movies">{{index}}-{{item}}</li>
    </ul>

2. 遍历对象

    <ul>
      <!-- 在遍历对象的过程中，如果只是获取一个值，那么获取到的是value -->
      <li v-for="item in info">{{item}}</li>
    </ul>
    <ul>
      <!-- 获取key和value，格式：(value,key) -->
      <li v-for="(value,key) in info">{{key}}:{{value}}</li>
    </ul>
    <ul>
      <!-- 获取key、value和index，格式：(value,key,index) -->
      <li v-for="(value,key,index) in info">{{index}}-{{key}}:{{value}}</li>
    </ul>

3. 组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key 属性，来给每一个节点做一个唯一标识，以此来更加高效地更新虚拟DOM。

4. 常用响应式修改数组内容的方法

    <!-- 1、push() 数组后追加元素 -->
    this.movies.push('eee')
    this.movies.push('eee','fff','ggg')
    
    <!-- 2、pop() 删除数组的最后一个元素 -->
    this.movies.pop()
    
    <!-- 3、shift() 删除数组的第一个元素 -->
    this.movies.shift()
    
    <!-- 4、unshift() 在数组最前面添加元素 -->
    this.movies.unshift('eee')
    this.movies.unshift('eee','fff','ggg')
    
    <!-- 5、splice() 删除/插入/替换元素 -->
    <!-- 删除元素：第二个参数传入要删除几个元素（如果没有传，就删除后面所有元素） -->
    this.movies.splice(start,num)
    <!-- 插入元素：第二个参数传入0，后面跟上要插入的元素 -->
    this.movies.splice(start,0,'eee','fff')
    <!-- 替换元素：第二个参数传入要替换的元素个数，后面跟上要替换的元素 -->
    this.movies.splice(start,num,'eee','fff')
    
    <!-- 6、sort() 将数组元素按序排列 -->
    this.movies.sort()
    
    <!-- 7、sort() 将数组元素逆序排列 -->
    this.movies.reverse()

    <!-- 注意：按照索引值直接改变数组元素是没有响应式的 -->
    this.movies[0]='eee'

七、双向绑定：

1.v-model原理

vue中使用v-model指令来实现表单元素和数据的双向绑定，它的背后本质上包含两个操作：

• v-bind绑定一个value属性
• v-on指令给当前元素绑定input事件
  <input type="text" v-model="message">
  等同于
  <input type="text" v-bind:value="message" v-on:input="message=$event.target.value">

2.v-model结合radio使用

  <div id="app">
    <label for="male">
      <input type="radio" name="sex" id="male" v-model="sex" value="男"> 男
    </label>
    <label for="female">
      <input type="radio" name="sex" id="female" v-model="sex" value="女"> 女
    </label>
    <h5>您选择的性别是：{{sex}}</h5>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        sex: '男'
      }
    })
  </script>

3.v-model结合checkbox使用

check单选框

  <div id="app">
    <label for="agree">
      <input type="checkbox" name="agree" id="agree" v-model="isAgree">
      同意协议
    </label>
    <h5>是否同意协议：{{isAgree}}</h5>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isAgree: false
      }
    })
  </script>

check多选框

  <div id="app">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="排球" v-model="hobbies">排球
    <h5>您的选择是：{{hobbies}}</h5>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        hobbies: []
      }
    })
  </script> 

4.v-model结合select使用

   <div id="app">
    <select name="hobbies" id="hobbies" v-model="hobbies">
      <option value="篮球">篮球</option>
      <option value="足球">足球</option>
      <option value="排球">排球</option>
    </select>
    <h5>您的选择是：{{hobbies}}</h5>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        hobbies:'篮球'
      }
    })
  </script>

5.值绑定

有些时候，供选择的选项可能是从服务器请求到的，这个时候需要动态生成选项，并给value赋值。

  <div id="app">
    <label :for="item" v-for="item in origin">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h5>您的选择是：{{hobbies}}</h5>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        origin:['篮球','足球','排球','乒乓球'],
        hobbies:[]
      }
    })
  </script>

6.修饰符

lazy修饰符：

• 默认情况下，v-model默认是在input事件中同步输入框的数据的，也就是说，一旦数据发生改变，对应的data中的数据就会自动发生改变
• lazy修饰符可以让数据在失去焦点或者回车时才更新

number修饰符：

• 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型进行处理，但是如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理
• number修饰符可以让输入框输入的内容自动转成数字类型

trim修饰符：
如果输入的内容首尾有很多空格，我们可以使用trim修饰符过滤内容左右两边的空格