一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

1. 初体验

初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1> <!-- 试一试 -->
    <h2>{{name}}</h2> <!-- zh -->
</div>

<div>{{message}}</div>  <!-- {{message}} -->

<script src="../js/vue.min.js"></script>
<script>
    //let(变量)/const(常量)
    const app = new Vue({
        el:'#app',//用于挂载要管理的元素
        data:{//定义数据
            message:'试一试!',
            name:'zh'
        }
    })
</script>

遍历.

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:'你好啊',
            movies:['火影忍者','海贼王','名侦探柯南']
        }
    })
</script>

计数器

<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter--;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter: 0,
        },
        methods:{
            add:function () {
                this.counter++
            },
            sub:function () {
                this.counter--
            }
        }
    })
</script>

2. 插值操作

Mustache语法

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}},Vue！</h2>
  <!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName +'  '+lastName}}</h2>
  <h2>{{firstName}}  {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<!-- 
  你好啊
  你好啊,Vue！
  kobebryant
  kobe bryant
  kobe bryant
  200 
-->

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    }
  })
</script>

v-once指令

<div id="app">
  <h2>{{message}}</h2>
  <!-- v-once:只渲染一次，不会随着数据的改变而重新渲染 -->
  <h2 v-once>{{message}}</h2>
</div>

v-html指令

<div id="app">
  <h2>{{url}}</h2>
  <!-- v-html: 将内容用html的方式渲染出来 -->
  <h2 v-html="url"></h2> <!-- 这里会出来一个百度一下的超链接 -->
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>',
    }
  })
</script>

v-text指令

<div id="app">
  <h2>{{message}},vue</h2>
  <!-- 将内容填充到标签中，vue会被meeage中的内容替换 -->
  <h2 v-text="message">vue</h2>
</div>
<!-- 
  你好啊,vue
  你好啊 
-->
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

v-pre指令

<div id="app">
  <!-- 显示{{message}} -->
  <h2 v-pre>{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

v-cloak指令

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script>
  //在vue解析之前，div中有一个属性v-cloak
  //在vue解析之后，div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  },1000)
</script>

3. 动态绑定属性

v-bind 的基本使用

<div id="app">
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>

  <!--语法糖的写法-->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>

</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595268220238&di=099c7272e13493fc60c84d1cd094b466&imgtype=0&src=http%3A%2F%2Fzbjquan.zbjimg.com%2Fforum%2F7niu%2F201809%2F28%2F175317az6j6wxrjsej171j.jpg',
      aHref: 'http://www.baidu.com'
    }
  })
</script>

v-bind动态绑定class(对象语法).html

  <style>
    .active{
      color: red;
    }
  </style>

<div id="app">
<!--  <h2 class="active">{{message}}</h2>-->
<!--  <h2 :class="active">{{message}}</h2>-->
<!--boolean为true时将类名赋值进去-->
<!--  <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>-->

  <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'active',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClasses: function () {
        return {active:this.isActive,line:this.isLine}
      }
    }
  })
</script>

v-bind动态绑定class(数组语法).html

<div id="app">
  <h2 class="title" :class="[active,'line']">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'aaa'
    },
    methods: {
      getClasses: function () {
        return [this.active,'line']
      }
    }
  })
</script>

v-bind动态绑定style(对象语法)

  <div id="app">
<!--    <h2 :style="{keg(属性名):value(属性值)}">{{message}}</h2>-->
    <!--'50px'必须要加上单引号-->
<!--    <h2 :style="{'font-size':'50px'}">{{message}}</h2>-->
<!--    <h2 :style="{'font-size':finalSize}">{{message}}</h2>-->
    <h2 :style="{'font-size':finalSize+'px',color:finalColor}">{{message}}</h2>
    <h2 :style="getStyles()">{{message}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        finalSize: 100,
        finalColor: 'red'
      },
      methods: {
        getStyles: function () {
          return {'font-size':this.finalSize+'px',color:this.finalColor}
        }
      }
    })
  </script>

v-bind动态绑定style(数组语法)

<div id="app">
  <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle:{backgroundColor:'red'},
      baseStyle1:{fontSize:'100px'}
    }
  })
</script>

4. 计算属性

计算属性的基本使用

<div id="app">
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: '小',
      lastName: '李'
    },
    computed: {//计算属性
      fullName: function () {
        return this.firstName+' '+this.lastName
      }
    },
    methods: {
      getFullName(){
        return this.firstName+' '+this.lastName
      }
    }
  })
</script>

计算属性的复杂操作

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

<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id:10,name:'html',price:100},
        {id:11,name:'css',price:200},
        {id:13,name:'js',price:300}
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0;
        for (let i = 0;i < this.books.length;i++){
          result += this.books[i].price
        }
        return result

        /*for(let i in this.books){}
        for(let book of this.books){}*/

      }
    }
  })
</script>

计算属性的setter和getter

计算属性内部有set和get方法
一般我们只用get方法，不用set方法

<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: '小',
      lastName: '李'
    },
    computed: {
      //属性一般没有set方法，只读属性
      fullName: {
        get: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    }
  })
</script>

计算属性和方法的区别

计算属性有缓存机制，方法没有；
只要计算属性内相关依赖的值不发生改变，多次调用计算属性可以从缓存中获取值，不必重复计算；
方法每次调用都要重新执行一遍；

<div id="app">

  <h2>{{firstName}} {{lastName}}</h2>

  <h2>{{getFullName()}}</h2>

  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: '小',
      lastName: '李'
    },
    methods: {
      getFullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

5. 事件监听

v-on的使用。简写用@

<div id="app">
  <h2>{{counter}}</h2>

<!--    <button v-on:click="increment">+</button>-->
<!--    <button v-on:click="decrement">-</button>-->

  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    }
  })
</script>

v-on的参数问题

<div id="app">
  <!--1.事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮一</button>
  <button @click="btn1Click">按钮一</button>

  <!--2.在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候
  Vue会默认将浏览器生产的event事件作为参数传入到方法-->
  <button @click="btn2Click(123)">按钮二</button>
  <button @click="btn2Click()">按钮二</button>

  <!--3.在方法定义时，我们需要event对象，同时又需要其他参数-->
  <button @click="btn3Click(123,$event)">按钮三</button>
  <button>按钮四</button>
</div>

<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btn1Click(){
        console.log('btn1Click')
      },
      btn2Click(abc){
        console.log('--------'+abc)
      },
      btn3Click(abc,event){
        console.log('++++',abc,event)
      }
    }
  })
</script>

v-on的修饰符

<div id="app">
  <!--1.stop修饰符:停止冒泡-->
  <div @click="divClick">
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!--2.prevent修饰符的使用:阻止默认行为。提交行为不会发生，而是会执行submitClick方法-->
  <br>
  <form action="www.baidu.com">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <br>
  <!--3.监听某个键盘的键帽,@keyup.enter监听回车键-->
  <input type="text" @keyup.enter="keyUp">

  <br>
  <!--4..once修饰符的使用-->
  <button @click.once="onceClick">点击</button>
</div>

<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      divClick(){
        console.log("divClick")
      },
      btnClick(){
        console.log("btnClick")
      },
      submitClick(){
        console.log("submitClick")
      },
      keyUp(){
        console.log("keyUp")
      },
      onceClick(){
        console.log("onceClick")
      }
    }
  })
</script>

6. 条件判断

v-if和v-else-if和v-else的使用

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

<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 99
    }
  })
</script>

v-show的使用

<div id="app">
  <h2 v-if="isShow" id="aaa">{{message}}</h2><!--直接就不在dom中了-->
  <h2 v-show="isShow" id="bbb">{{message}}</h2><!--使用的时display:none-->
</div>

<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    }
  })
</script>

Vue学习之旅-01

1. 初体验

2. 插值操作

3. 动态绑定属性

4. 计算属性

5. 事件监听

6. 条件判断