1 Vue的特色

1.1 Vue-渐进式框架：

简单来说就是你可以只用vue的一部分，而不必完全使用。

1.2 Vue的MVVM

View：通常指DOM VueModel：可以实现数据绑定和DOM监听，是View和Model的桥梁。 Model：数据，包括网络从服务器请求的数据。

2 体验一下Vue的强大

2.1 计数器案例

        <div class="app">
            <h2>当前计数: {{counter}}</h2>
            <button v-on:click="additon">+</button>
            <button @click="substraction">-</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            const obj = {
                counter: 1,
                message: '加减运算',
            };
            const app = new Vue({
                el: '.app',
                data: obj,
                methods: {
                    additon: function () {
                        this.counter++;
                    },
                    substraction: function () {
                        this.counter--;
                    },
                },
            });

2.2 列表展示案例

        <div class="app">
            <ul>
                <li v-for="m in movies"><h2>{{m}}</h2></li>
            </ul>
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '.app',
                data: {
                    movies: ['火影', '柯南', '飞天', '进击的巨人'],
                },
            });
        </script>

3 插值操作

借助mustache即{{}}语法将元素里的值交由vue控制，并且数据是响应式的

v-once

     <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>//使用了v-once插入的值渲染一次后就不会再随着 数据而改变 
     </div>

v-html

        <div class="app">
            <h2>{{link}}</h2>          //这里页面中是显示的是字符串
            <h2 v-html="link"></h2>    //这里页面中是显示的是解析完a标签后的连接，并且会覆盖标签内的所有内容
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '.app',
                data: {
                    link: "<a href='http://www.baidu.com'>百度一下</a>",
                },
            });
        </script>

v-text

用法同v-html,但是它不包含html用法，会覆盖标签内的全部内容，一般很少使用

v-pre

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

v-cloak

vue解析前v-cloak属性存在，解析后会被删掉。

代码运行后，v-cloak属性存在，vue还没解析，页面显示红色的{{message}}，2秒后vue解析，v-cloak属性被删除，页面显示黑色的起飞。

        <style>
            [v-cloak] {
                color: red;
            }
        </style>
        <div class="app" v-cloak>
            <h2>{{message}}</h2>
        </div>
        <script src="js/vue.js"></script>
        <script>
            setTimeout(() => {
                const app = new Vue({
                    el: '.app',
                    data: {
                        message: '起飞',
                    },
                });
            }, 2000);
        </script>

4 绑定属性

使用v-bind进行动态属性绑定，可以绑定多个属性， 举例如下：

 <div class="app">
     <img src="{{url}}" alt="" /><!-- 错误做法 -->
     <img v-bind:src="url" alt="" />
 </div>
 <script src="js/vue.js"></script>
 <script>
     const app = new Vue({
         el: '.app',
         data: {
             url: 'https://img.youpin.mi-img.com/shopmain/a599f17abb5f9ad7674f7a4dc72765cc.jpg',
         },
     });
 </script>

v-bind绑定class

对象语法

将class的值以对象的形式使用，通过键值对值的bool值添加class属性。

 <style>
     .red {
         color: red;
     }
 </style>
 <div class="app">
     <h2 v-bind:class="{ red: isRed, blue: isBlue }">{{message}}</h2>
     <h2 v-bind:class="getClass()">{{message}}</h2>   /*可以将对象存入methods中使用 */ 
     <button v-on:click="btnClick()">getRed</button>
 </div>
 <script src="js/vue.js"></script>
 <script>
     const app = new Vue({
         el: '.app',
         data: {
             message: '点我会变红',
             isRed: false,
             isBlue: false,
         },
         methods: {
             btnClick: function () {
                 this.isRed = !this.isRed;
             },
             getClass: function () {
                 return { red: this.isRed, blue: this.isBlue };
             },
         },
     });
 </script>

数组语法

数组中可以是变量，也可以是字符串，数组语法用的比较少。

 <div class="app">
     <h2 v-bind:class="[active,'line']">{{message}}</h2>
     <h2 v-bind:class="getClass()">{{message}}</h2>   /*通过函数调用*/
 </div>
 <script src="js/vue.js"></script>
 <script>
     const app = new Vue({
         el: '.app',
         data: {
             message: '起飞',
             active: 'fly',
         },
         methods: {
             getClass: function () {
                 return [this.active, 'line'];
             },
         },
     });

v-bind绑定style

写css属性名的时候如font-size，可以使用驼峰命名即fontSize，或短横线分隔加引号即'font-size'。

对象语法

• 对象的key是CSS属性名称
• 对象的value是具体赋的值

   <div class="app">
       <h2 v-bind:style="{fontSize:'14px',color:finalColor}">       {{message}}</h2>
   </div>
   <script src="js/vue.js"></script>
   <script>
       const app = new Vue({
           el: '.app',
           data: {
               message: '起飞',
               finalColor: 'red',
           },
       });
   </script>

数组语法（较少用）

 <div id="app">
     <h2 :style="[Style1, Style2]">{{message}}</h2>
 
 <script src="../js/vue.js"></script>
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             message: '你好啊',
             Style1: { backgroundColor: 'red' },
             Style2: { fontSize: '100px' },
         },
     });
 </script>

5 计算属性

computed和methods的区别

• 一般来说methods是需要去人为触发的（函数调用），而computed是在检测到data数据变化时自动触发的（属性访问）
• computed带有缓存功能，而methods没有

<div class="app">
    <h2>{{getSum()}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: '.app',
        data: {
            star: [
                { id: 0, name: '王一博', price: 999 },
                { id: 1, name: '刘昊然', price: 888 },
                { id: 2, name: '白菜', price: 777 },
            ],
        },
        methods: {
            getSum: function () {
                let sum = 0;
                for (let i = 0; i < this.star.length; i++) {
                    sum += this.star[i].price;
                }
                return sum;
            },
        },
    });
</script>