Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例

<div id="app">
<!-- mustche语法中，不仅可以直接写变量，也可以写简单的表达式 -->
    <h2>{{ message }} : {{ info }}</h2>
    <h2>{{ message + " : " + info }}</h2>
    <h2>{{ counter * 2 }}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 编程范式：声明式编程
  const app = new Vue({
    el: '#app', // 用于关在要管理的元素
    data: {     // 定义数据
      message: "你好",
      info: "有勇气的牛排",
      counter:100
    }
  })
</script>

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

<script src="../js/vue.js"></script>
<script>
  // 编程范式：声明式编程
  const app = new Vue({
    el: '#app', // 用于关在要管理的元素
    data: {     // 定义数据
      message: "你好，有勇气的牛排"
    }
  })
</script>

<div id="app">
    <h2>{{ url }}</h2>
    <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 编程范式：声明式编程
  const app = new Vue({
    el: '#app', // 用于关在要管理的元素
    data: {     // 定义数据
      message: "你好，有勇气的牛排",
      url:'<a href="https://www.couragesteak.com/">开发者</a>'
    }
  })
</script>

<div id="app">
    <h2 v-text="message"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 编程范式：声明式编程
  const app = new Vue({
    el: '#app', // 用于关在要管理的元素
    data: {     // 定义数据
      message: "你好，有勇气的牛排",
    }
  })
</script>

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    }
  })
</script>

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

<div id="app">
    <!--    错误做法: 不能在属性中使用mustache语法-->
    <!--    <img src="{{ imgURL }}" alt="">-->

    <!-- 正确做法：使用v-bind指令 -->
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHref">有勇气的牛排</a>

    <!-- 语法糖的写法 -->
    <img :src="imgURL" alt="">
    <a :href="aHref">有勇气的牛排</a>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgURL: 'https://img.couragesteak.com/4b9785ac56dea2567e62ba08d1ca1767.png',
      aHref: 'https://www.920vip.net/'
    }
  })
</script>

<!-- 用法一：直接通过{ }绑定一个类 -->
<h2 :class="{'active':isActive}">Hello World</a>

<!-- 用法二：也可以通过判断，传入多个值 -->
<h2 :class="{'active':isActive,'line':isLine}">Hello World</a>

<!-- 用法三：和普通的类同时存在，并不冲突 -->
<!-- 注：如果isActive和isLine都为true，那么会有title/active/line三个类 -->
<h2 class="title" :class="{'active':isActive,'line':isLine}">Hello World</a>

<!-- 
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
 -->
<h2 class="title" :class="classes">Hello World</h2>

<div id="app">
    <!-- 数组里面的值，加双引号是为值，不加双引号为变量 -->
    <h2 class="title" :class="[active,line]">{{ message }}</h2>
    <h2 class="title" :class="getClasses()">{{ message }}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排",
      active: '666',
      line: '777'
    },
    methods: {
      getClasses: function () {
        return [this.active, this.line]
      }
    }
  })
</script>

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

<div id="app">
    <ul>
        <li v-for="(m, index) in movies"
            :class="{active:index === currentIndex}"
            @click="liClick(index)"
        >
            {{ index }}{{ ' - ' + m }}
        </li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['灰太狼', '有勇气的牛排', '导演'],
      currentIndex: 0
    },
    methods: {
      liClick: function (index) {
        this.currentIndex = index
      }
    }
  })
</script>

<div id="app">

    <!-- <h2 :style="key(属性名): value(属性值)">{{ message }}</h2>-->
    <!-- 50px: 必须加上单引号，否则当做一个变量去解析 -->
    <h2 :style="{fontSize: '50px'}">{{ message }}</h2>

    <!-- finalSize当成一个变量使用 -->
    <h2 :style="{fontSize: finalSize + 'px',color:finalColor}">{{ message }}</h2>
    <h2 :style="getStyles()">{{ message }}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排",
      finalSize: 60,
      finalColor: 'red'
    },
    methods:{
      getStyles:function () {
        return {fontSize: this.finalSize + 'px',color:this.finalColor}
      }
    }
  })
</script>

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排",
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'}
    }
  })
</script>

<div id="app">
    <h2>{{ name + ' : ' + nameValue }}</h2>
    <h2>{{ name }} : {{ nameValue }}</h2>

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

    <!-- 计算属性 -->
    <h2>{{ fullName }}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: "昵称",
      nameValue: "灰太狼"
    },
    // computed: 计算属性()
    computed: {
      fullName() {
        return this.name + ' : ' + this.nameValue
      }
    },
    methods: {
      getFullName() {
        return this.name + ' : ' + this.nameValue
      }
    }

  })
</script>

<div id="app">
    <h2>总价格: {{ totalProce }}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: "C语言", price: 50},
        {id: 111, name: "操作系统", price: 60},
        {id: 112, name: "统计学习方法", price: 70},
        {id: 113, name: "鬼谷子", price: 30},
        {id: 114, name: "即兴演讲", price: 35}
      ]
    },
    computed: {
      totalProce: 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){
        //   this.books[i]
        // }
        //
        // for(let book of this.books){
        //
        // }

      }
    }
  })
</script>

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: '昵称',
      nameValue: '有勇气的牛排'
    },
    computed: {
      // 计算属性一般是没有set方法，只读属性
      fullName: {
        // app.fullName='cc|cc'
        set: function (newValue) {
          const names = newValue.split('|');
          this.name = names[0];
          this.nameValue = names[1];
        },
        get: function () {
          return this.name + ' : ' + this.nameValue
        }
      },
      // 简洁写法
      // fullName: function () {
      //   return this.name + ' : ' + this.nameValue
      // }
    }
  })
</script>

<div id="app">
    <!-- 1. 直接拼接: 语法过于繁琐 -->
    <h2>{{ name }} {{ nameValue }}</h2>
    <!-- 2. 通过定义methods -->
    <h2>{{ getFullName() }}</h2>
    <!-- 3. 通过computed -->
    <h2>{{ fullName }}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: '昵称',
      nameValue: '有勇气的牛排'
    },
    computed: {
      fullName: function () {
        return this.name + ' : ' + this.nameValue
      }
    },
    methods: {
      getFullName: function () {
        return this.name + ' : ' + this.nameValue
      }
    }
  })
</script>

<div id="app">
    <!-- v-bind 语法糖 -->
    <!--    <h2 v-bind:title></h2>-->
    <!--    <h2 :title></h2>-->

    <h2>{{ counter }}</h2>

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

    <!-- button v-on:click="increment">+</button>-->
    <!-- <button v-on:click="decrement">-</button>-->
    <!-- v-on 语法糖 -->
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
</div>

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

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

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

    <!-- 3. 方法定义时，我们需要event对象，同时又需要其他参数 -->
    <!-- 在多用方法时，如何手动的获取到浏览器的event参数对象：$event -->
    <button @click="btn3Click(123,$event)">按钮3</button>


    <button>按钮4</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    methods: {
      btn1Click() {
        console.log('btn1Click');
      },
      btn2Click(event) {
        console.log("按钮2：" + event);
        console.log(event);
      },
      btn3Click(abc, event) {
        console.log("按钮3");
        console.log(abc, event);
      }
    }
  })
</script>

<div id="app">
    <!-- 1. .stop修饰符的使用：阻止冒泡 -->
    <div @click="divClick">
        6666666
        <button @click.stop="btnClick">按钮</button>
    </div> 

    <!-- 2. .prevent修饰符的使用 ->form表单失效 -->
    <form action="test">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

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

    <!-- 4. .once修饰符的使用 -->
    <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    methods: {
      btnClick() {
        console.log("btnClick")
      },
      divClick() {
        console.log("divClick")
      },
      submitClick() {
        console.log('submitClick')
      },
      keyup() {
        console.log('keyup')
      },
      btn2Click() {
        console.log('btn2Click')
      }
    }
  })
</script>

<div id="app">
    <div v-if="isShow">
        <div>666</div>
    </div>
</div>

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

<div id="app">
    <div v-if="isShow">
        <div>666</div>
    </div>
    <div v-else>
        <div>isShow为false时, 显示我</div>
    </div>
</div>

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

<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>

    <h1>{{ result }}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 99,
      // showMessage:"无"
    },
    computed: {
      result() {
        let showMessage = ''
        if (this.score >= 90) {
          showMessage = '优秀'
        } else if (this.score >= 80) {
          showMessage = '良好'
        } else if (this.score >= 60) {
          showMessage = '及格'
        } else {
          showMessage = '不及格'
        }
        return showMessage
      }
    }
  })
</script>

<div id="app">

    <span v-if="isUserLogin">
      <label for="username">用户账号</label><input type="text" id="username" placeholder="用户账号" key="username">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label><input type="text" id="email" placeholder="用户邮箱" key="email">
    </span>

    <button @click="isUserLogin = !isUserLogin">切换类型</button>

</div>

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

<div id="app">

    <!-- v-if：当条件为false时，包含v-if指令的元素，根本就不会存在dom中-->
    <h2 v-if="isShow">{{ message }}</h2>

    <!-- v-show：当
条件为false时，v-show只是给我们的元素添加一个行内样式：display：none -->
    <h2 v-show="isShow">{{ message }}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排",
      isShow: true
    }
  })
</script>

# 不需要索引
v-for="movie in movies"

# 需要索引
v-for=(item,index) in items

<div id="app">
    <!-- 1. 在遍历的过程中，没有使用索引值(下标值) -->
    <ul>
        <li v-for="item in names">{{ item }}</li>
    </ul>

    <!-- 2. 在遍历的过程中，获取索引值 -->
    <ul>
        <li v-for="(item, index) in names">
            {{ index + 1 }} - {{ item }}
        </li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['灰太狼', '有勇气的牛排', '导演']
    }
  })
</script>

<div id="app">
    <!-- 1. 在遍历对象的过程中，如果知识获取一个值，那么获取到的是value -->
    <ul>
        <li v-for="item in info">{{ item }}</li>
    </ul>

    <!-- 2. 获取index, key和value 格式：(value, key) -->
    <ul>
        <li v-for="(value, key) in info">{{ key }} : {{ value }}</li>
    </ul>

     <!-- 3. 获取key和value和index 格式:(value, key, index) -->
    <ul>
        <li v-for="(value, key, index) in info">{{ index + 1 }}-{{ key }} : {{ value }}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: '灰太狼',
        age: 18,
        height: 1.88
      }
    }
  })
</script>

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E']
    }
  })
</script>

<div id="app">
    <ul>
        <li v-for="item in letters" :key="item">{{ item }}</li>
        <!--        <li v-for="item in letters">{{ item }}</li>-->
    </ul>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E']
    },
    methods: {
      btnClick() {
        // 1 push方法
        // this.letters.push('666','777')

        // 2 pop()  删除数组中最后一个元素
        // this.letters.pop();

        // 3 shift() 删除数组中第一个元素
        // this.letters.shift();

        // 4 unshift() 在数组最前面添加元素
        // this.letters.unshift('666', '777');

        // 5 splice作用：删除元素/插入元素/替换元素
        // 删除元素：第二个参数传入你要删除几个元素(如果没有传，就删除后面所有的元素
        // 替换元素：第二个参数,表示我们要替换几个元素，后面是用于替换前面的元素
        // 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
        // this.letters.splice(1, 0, '1', '2')

        // 6 sort()
        // this.letters.sort();

        // 7 reverse()
        this.letters.reverse();


        // 修改
        // 1非响应式
        // 通过索引值修改数组中的元素
        // this.letters[0] = '666'
        // 2响应式
        // this.letters.splice(0, 1, '666')
        // set(要修改的对象, 索引值,修改后的值)
        Vue.set(this.letters, 0, '666');
      }
    }
  })
</script>

<input type="text" v-model="message">

<input type="text" :value="message" @input="message = $event.target.value">

<div id="app">
    <!-- 1 checkbox单选框-->
    <!--    <label for="protocol">-->
    <!--        <input type="checkbox" id="protocol" v-model="isAgree">同意协议-->
    <!--    </label>-->
    <!--    <h2>您选择的是：{{ isAgree }}</h2>-->
    <!--    <button :disabled="!isAgree">下一步</button>-->

    <!-- 2 checkbox多选框-->
    <label for="">
        <input type="checkbox" value="轻音乐" v-model="hobbies">轻音乐
        <input type="checkbox" value="国学" v-model="hobbies">国学
        <input type="checkbox" value="思考" v-model="hobbies">思考
    </label>
    <h2>您的爱好是：{{ hobbies }}</h2>

    <label v-for="item in originHobbies">
        <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{ item }}
    </label>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: false,   // 单选框
      hobbies: [],       // 多选框
      originHobbies: ['国学', '轻音乐', '绘画', '摄影', 'dj', '吉他']
    }
  })
</script>

<div id="app">
    <!-- 1 选择一个 -->
    <select name="" id="" v-model="hobby">
        <option value="国学">国学</option>
        <option value="轻音乐">轻音乐</option>
        <option value="绘画">绘画</option>
    </select>
    <h2>您的选择是：{{ hobby }}</h2>

    <!-- 1 选择多个 -->
    <select name="" id="" v-model="hobbies" multiple>
        <option value="国学">国学</option>
        <option value="轻音乐">轻音乐</option>
        <option value="绘画">绘画</option>
    </select>
    <h2>您的选择是：{{ hobbies }}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobby: "绘画",
      hobbies:[]
    }
  })
</script>

<div id="app">
    <!-- 1 修饰符：lazy -->
    <input type="text" v-model.lazy="message">
    <h2>{{ message }}</h2>

    <!-- 2 修饰符：number -->
    <input type="number" v-model.number="age">
    <h2>{{ age }}---{{ typeof age }}</h2>

    <!-- 3 修饰符：trim -->
    <input type="text" v-model.trim="name">
    <h2>您输入的名字：{{ name }}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排",
      age: 0,
      name: ''
    }
  })
</script>