终极VUE教程

知识点：

1. 数据分离，用变量显示，也可以用v-text属性
2. 如果是其他属性要显示数据的话可以用v-bind方法
3. 在input里可以用v-model的方法来绑定value.
4. 用v-for进行对数组的遍历显示
5. 用@click属性添加点击事件，方法可以直接写在里面
6. v-if可以做为条件直接写在属性里面，条件可以是值，也可以写变量
7. v-else没有值，直接写在属性里面
8. 在数组里可以写些Json数据
9. 在computed这个方法集里，可以把需要换算的公式写进去，把方法名直接写在双引号里就可以动态返回结果。
10. methods里面可以直接写方法，方法的变量可以是computed里面的方法名，直接引用在双括号里。
11. 创建组件，组件由一个名称和对象组成，对象里面有template,这个是要渲染在组件里的。组件里面有属性props，是一个数组，这个对应这个组件里创建的属性名称。当对这个属性传值之后，就可以在模板里进行相应的传值了。
12. 每个模板都要有一个跟元素，否则在遍历两个或以上的数据的时候就不会显示了。
13. 组件里的data可以是一个方法，这里可以直接写数据返回。
14. 组件里的数据如果是重复的，那么就要有一个key，否则会报小错误。所以一般要带个唯一性的ID。写的时候例如：:key="item.ID", 写在组件的属性里。
15. 从子组件到父组件传递自定义事件
16. 在vue里用axios来请求
17. vue cli用法
18. class和CSS绑定
19. vue router

那我们从第一个知识点开始我们的教程吧。

创建环境，我们可以用引入CDN的方法，也可以用nodejs的NPM来做一个比较复杂点的环境，出于理解的方便，这里就直接引入了cdn的方法。然后做一个网页引入进去就可以了。

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

1. 数据分离，用变量显示，也可以用v-text属性

引入之后我们需要创建一个vue实例才能让vue发挥作用。

我们要创建一个vue的作用域，也就是一个div然后做一个id。例如：

<div id="app"></div>

然后开始我们的实例：

new vue({
   el:"#app"
   data:{
      title:"this is title"
   }
});

放到这里我们就可以显示了。

<div id="app"><h1>{{title}}</h1></div>

当然我们可以用另外一个方法显示。

<div id="app"><h1 v-text="title"></h1></div>

v-开头的directive还有很多。

这两种方法其实没有上面区别。

2. 如果是其他属性要显示数据的话可以用v-bind方法

在vue里很多数据都是隔开的，包括属性的数据，这样我们可以动态的控制属性值。例如：

<div id="app"><h1 title="this is title attribute" v-text="title"></h1></div>

如果我们要把这个title属性的值放到vue里面的话，如何操作呢？

我们可以用v-bind这个指令：

<div id="app"><h1 v-bind:title="title" v-text="title"></h1></div>

当然我们可以直接把v-bind这个拿掉，也可以是同样的效果。

<div id="app"><h1 :title="title" v-text="title"></h1></div>

3. 在input里可以用v-model的方法来绑定value

通常用v-model指令来绑定input和外部的内容。

<div id="app">
<div v-text="title"></div>
<input type="text" v-model="title">
</div>
<script>
new Vue({
    el:"#app",
    data:{
       title:"this is the title"
    }
})
</script>

这样即使我们改变input值，上面的内容也会跟着变。

4.用v-for进行对数组的遍历显示

v-for可以遍历数组，我们直接来看一个例子。

<div id="app">
        <div class="titles">
            <ul v-for="title in titles">
                <li>
                  {{title}}
                </li>
            </ul>
        </div>
    </div>
<script>
        new Vue({
            el:"#app",
            data:{
               titles:['title1','title2','title3']
            }
        });
    </script>

5. 用@click属性添加点击事件，方法可以直接写在里面

我们可以用上面的例子直接写一个todo list的APP

<div id="app">
        <div class="titles">
            <ul v-for="title in titles">
                <li>
                  {{title}}
                </li>
            </ul>
            <input v-model="title">
            <input type="button" @click="titles.push(title)" value="add title">
        </div>
    </div>
<script>
        new Vue({
            el:"#app",
            data:{
               title:'', 
               titles:['title1','title2','title3']
            }
        });
    </script>

当我们添加title4到input里面的时候，里面就多了一个title4的元素。
@click指令是一个引发事件的指令，我们稍后会提到

6. v-if可以做为条件直接写在属性里面，条件可以是值，也可以写变量

v-if是判断属性值的true或者false来决定下一个语句是否执行

<div id="app">
        <div class="titles">
            <div v-if="hidden">display text</div>
        </div>
    </div>
<script>
        new Vue({
            el:"#app",
            data:{
               hidden:true
            }
        });
    </script>

7. v-else没有值，直接写在属性里面

当然v-if可以和v-else配合使用。所以我们可以写成：

<div id="app">
        <div class="titles">
            <div v-if="hidden">display text</div>
            <div v-else>another</div>
        </div>
    </div>

8. 在数组里可以写些Json数据

<div id="app">
        <div v-for="title in titles">
            <div>{{title.title}}</div>
            <div v-if="title.checked">checked</div>
        </div>
    </div>
 <script>
        new Vue({
            el:"#app",
            data:{
                titles:[
                   {title:"title1",checked:true},
                   {title:"title2",checked:false}
               ]
            }
        });
    </script>

9. 在computed这个方法集里，可以把需要换算的算式写进去，把方法名直接写在双引号里就可以动态返回结果。

可以把computed属性，当作是data（数据）的延申，只是动态返回结果而已。

我们来看看下这个简单的税率结算器：

<div id="app">
        <div>价格:{{price}}</div>
        <input type="text" v-model="price">
        <div>税:{{tax}}</div>
        <div>总额:{{total}}</div>
    </div>

<script>
        new Vue({
            el:"#app",
            data:{
                price:''
            },
            computed:{
                tax:function(){
                    return this.price*0.1;
                },

                total:function(){
                    return parseInt(this.price)+parseInt(this.tax);
               }
            }
        });
    </script>

10. methods里面可以直接写方法，方法的变量可以是computed里面的方法名，直接引用在双括号里。

我们可以稍微修改下上面的例子，在每个数字签名加一个货币符号，比如$.
methods其实跟computed一样是一个属性，写法一样, 我们可以直接把方法的名称和变量放在里面。如：

<div id="app">

        <div>价格:{{formated(price)}}</div>
        <input type="text" v-model="price">
        <div>税:{{formated(tax)}}</div>
        <div>总额:{{formated(total)}}</div>

   </div>
new Vue({
            el:"#app",
            data:{
                price:''
            },
            methods:{

                formated:function(price){
                    return '$'+price;
                }

            },
            computed:{
                tax:function(){
                    return this.price*0.1;
                },

                total:function(){
                    return parseInt(this.price)+parseInt(this.tax);
               }
            }
        })

11. 创建组件，组件由一个名称和对象组成，对象里面有template,这个是要渲染在组件里的。组件里面有属性props，是一个数组，这个对应这个组件里创建的属性名称。当对这个属性传值之后，就可以在模板里进行相应的传值了。

组件就像视图的一部分，可以把它分离出来，如：

<componentOne></componentOne>

然后我们可以在这里赋予它新的数据，并且可以把模板的部分提取出来，这样使得遍历数据这种任务变得很简单。定义上面得这种组件得方法很简单。组件里面有很多属性，可以分为两部分，第一个是名称，第二个是一个对象，里面包含其他得属性，如属性，模板，数据等。

Vue.components('componentOne', {
    props:[],
    template:``,
    data:function(){
       return "";
    }
})

如果没有引入vue并且没有实例化得话组件肯定是不能用得。因为只有这样，实例化得数据才能用到组件里面。

new Vue({
            el:"#app",
            data:{
                
            }
        })

在component里面，data必须是一个方法，因为每个component必须有它得作用域。

<div id="app">
        <cone v-for="blog in blogs" :blog="blog"></cone>
 </div>
Vue.component("cone", {
            props:['blog'],
            template:`
              <div>
                <p>{{blog.title}}</p>
                <p @click="toggle = ! toggle">details</p>
                <p v-if="toggle">{{blog.content}}</p>
              </div>  
            `,
            data:function(){
                return {
                    toggle:false
                }
            }
        });
        
        new Vue({
            el:"#app",
            data:{
                blogs:[
                    {title:'title1', content:'this is the content 1'},
                    {title:'title2', content:'this is the content 2'}
                ] 
            }
        })

17. 在vue里用axios来请求
    我们可以用axios来做http get或者post请求到API接口来返回数据与vuejs结合使用。

首先引入axios的CDN。

<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>

说到vue的生命周期，mounted应该是最重要的一个，mounted表明当vue载入的时候第一个要执行的程序。

<div id="app">
<ul v-for="post in posts">
<li v-text="post.title"></li>
<p v-text="post.body"></p>
</ul>
</div>

<script>

    new Vue({
       el:"#app",
       mounted:function(){
           axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => this.posts = response.data).catch((error) => console.log(error));
       },
       data:{
           posts:[]
       }
    
    });

</script>

## FAQ：
1. Firefox错误：Components 对象已不赞成使用，它很快就会被移除。