Vue基础创建一个新的html文件作为Vue的基础，要使用Vue，就和使用jQuery一样，要导入Vue的CDN，为了方

#Vue课堂笔记

Vue初体验

<div id="app">
    {{message}}
    <p>
        {{arr}} <!--[ "a", "b", "c" ] -->
    </p>
    <p>
        {{arr[0]}}  <!-- a b c -->
        {{arr[1]}}
        {{arr[2]}}
    </p>
</div>


<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,Vue!",
            arr:['a','b','c']
        }
    });
</script>

解析

创建一个新的html文件作为Vue的基础，要使用Vue，就和使用jQuery一样，要导入Vue的CDN，为了方便，我这里直接使用在线的CDN。
通过var vm = new Vue 来创建Vue。
通过div标签的id属性，和Vue的el属性进行绑定。这时候，div标签里面的内容就可以使用Vue来渲染。
Vue中的data属性用来存放数据，在div标签中要是想要取到，就需要使用两个{}。
- 数据是一个属性： {{属性名}}
- 数据是一个对象： {{对象名.属性名}}
- 数据是一个数组： {{数组名[下标]}},{{数组名}}
官网推荐的最新的CDN：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

模板

<div id="app">
<!--这里的id要与Vue的el绑定的值一样-->
</div>
<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            //存放数据
        }
    });
</script>

Vue基础语法

if: v-if

<div id="app">
    <h1 v-if="letter==='A'">A</h1>
    <h1 v-else-if="letter==='B'">B</h1>
    <h1 v-else-if="letter==='C'">C</h1>
    <h1 v-else-if="letter==='D'">D</h1>
    <h1 v-else>Other</h1>
</div>

<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            letter:"A"
        }
    });
</script>

for: v-for

!--
    动态修改todos的内容:
    vm.todos.pop() :删除
    vm.todos.push({ text: 'hahah ' }):增加

    v-for: 相当于java遍历数组使用的 foreach
-->

<div id="app">
    <ol>
        <li v-for="(todo,index) in todos">
            {{ todo.text }}--{{index}}
        </li>
    </ol>
</div>

<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个项目' }
            ]
        }
    });
</script>

绑定事件：v-bind 简写：

!--
    v-bind:
        指令,指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
        绑定的是前端和vue的数据
-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:'页面加载于 ' + new Date().toLocaleString()
        }
    });
</script>

点击事件：v-on 简写 @

<div id="app">
    <!--
        v-on：绑定事件的指令
        在这里，绑定了click事件，并指定了命名为sayHi的方法
    -->
    <button v-on:click="sayHi">点我试一下</button>
</div>


<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,Vue!"
        },
        methods: {
            //方法必须定义在 methods 内
            sayHi: function () {
                alert(this.message);
            }
        }
    });
</script>

双向绑定：v-model

<div id="app">

    <p>
        单选框：
    </p>
    <input type="radio" name="sex" value="男" v-model="checked">man
    <input type="radio" name="sex" value="女" v-model="checked">woman
    <p>
        你选择了：{{checked}}
    </p>

    <p>
        文本框：
    </p>
    <input type="text" v-model="text">你写的文本:{{text}}
    <p>
        文本域：
    </p>
    <textarea v-model="message" cols="30" rows="10">
    </textarea>
    <p>
        文本域的内容:{{message}}
    </p>

    <p>
        下拉框：
    </p>
    <select name="" id="" v-model="selected">
        <option value="" selected>--请选择--</option> <!--苹果用户专属-->
        <option>java</option>
        <option>c</option>
        <option>php</option>
        <option>c++</option>
    </select>你选择了:{{selected}}


</div>

<!--
注意:
    v-model 会忽略所有表单元素的value.checked、selected 特性的初始值而总是将Vue实例的数据作为数据来源。
    你应该通过JavaScript在组件的data选项中声明初始值!
-->

<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            checked:"",
            text:"",
            message:"",
            selected:""
        }
    });
</script>

Vue组件

<div id="app">
    <!-- v-bind:的a,对应props的a   -->
    <ponent v-for="item in items" v-bind:a="item"></ponent>
</div>


<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //组件,ponent为组件名,template中可以包含很多小的标签,组成一个大的组件"ponent"
    Vue.component("ponent", {
        props: ['a'],//props,用来将值传递给组件,如果没有这个,下面的template取不到{{a}}
        template: '<li>{{a}}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java", "c", "c++", "php"]
        }
    });
</script>

解析

通过Vue.component来创建组件
通过props来传递值(组件和前端的值的传递)
通过tenplate来设置要被创建的组件的内容

Axios异步通信

<div id="app" v-clock>
    <div>{{info.name}}</div>
    <!--
        链接需要绑定才能实现跳转;
        如果写成<a href="{{info.url}}">vue官网</a>这样,404错误
    -->
    <a v-bind:href="info.url">vue官网</a>
    <div>{{info.page}}</div>
    <div>{{info.isNonProfit}}</div>
    <div>{{info.address.street}}</div>
    <div>{{info.address.city}}</div>
    <div>{{info.address.country}}</div>
    <div>{{info.links[0].name}}</div>
    <a v-bind:href="info.links[0].url">B站官网</a>
    <div>{{info.links[1].name}}</div>
    <a v-bind:href="info.links[1].url">4399游戏官网</a>
    <div>{{info.links[2].name}}</div>
    <a v-bind:href="info.links[2].url">百度官网</a>
</div>


<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--引入axios.js的在线CDN-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",

        //data:vm的数据属性
        //data():用来返回json的数据

        data() {//请求的返回参数格式，必须和 json字符串一样
            return {
                info: {
                    name: null,
                    url: null,
                    page: null,
                    isNonProfit: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    links: [
                        {
                            name: null,
                            url: null
                        },
                        {
                            name: null,
                            url: null
                        },
                        {
                            name: null,
                            url: null
                        }
                    ]

                }
            }
        },

        mounted() {//钩子函数 链式编程  ES6新特性
            axios.get('data.json').then(response => (this.info = response.data));
        }//get:得到json存放数据的位置

    });
</script>

解析

通过data()来返回json的数据
通过data()请求的返回参数格式，必须和 json字符串一样
链接需要绑定才能实现跳转;
如果没有绑定，而写成<a href="{{info.url}}">vue官网</a>这样,会发生404错误
mounted：钩子函数链式编程 ES6新特性
IDEA设置ES6新特性：
- file>settings>Lauguages & Frameworks>javascript：
- 将javascript languages version 修改为 ECMAScript 6。

计算属性

<div id="app">
    <!-- methods里面的方法，调用的也是方法   -->
    <p>NowTime:{{NowTime()}}</p>
    <!-- 计算属性,相当于是缓存,不是方法   -->
    <p>Time:{{Time}}</p>
    <p></p>
</div>


<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello,Vue!"
        },
        methods: {
            NowTime: function () {
                this.message;
                return Date.now();
            }
        },
        //computed,计算属性 特色!
        computed: {  //方法名和methods的要不一样，不然会默认选择methods的方法
            Time: function () {//如果方法体里面的数据没有被刷新,数据就不会变
                this.message;//改变了message数据也会   刷新Date.now()
                return Date.now();
            }
        }
    });
</script>

解析

注意computed内的方法名不要和methods内的方法名一样，不然，Vue默认选择methods内的方法。
computed内的数据，message发生变化，Date.now()才会发生变化，不然不会发生变化。
methods内的数据，不管message有没有发生变化，Date.now()时刻在改变。
这里我说的变化，是在控制台手动改变数据。

v-slot: 插槽

div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>

</div>


<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.component("todo", {
        template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
                    </div>'
    })
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "书籍",
            todoItems: ['三国演义','红楼梦','西游记','水浒传']
        }
    });
</script>

解析

插槽需要用到组件。
插槽里面通常是用来设置需要修改显示的值，比如这个例子的显示的书籍，具体有多少本，不确定，用插槽来解决显示问题
三个Vue.component的位置不能变：因此，你在设计的时候，先假设一个固定的模型，然后再来设计组件和插槽。

自定义分发事件

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" @remove="removeItems(index)" :index="index" :key="index"></todo-items>
    </todo>

</div>


<!--引入vue.js的在线CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.component("todo", {
        template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
                    </div>'
    })
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    Vue.component("todo-items", {
        props: ['item','index'],
        //template只能绑定当前组件的方法，不能绑定vue实例的方法
        template: '<li>{{item}} <button @click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                this.$emit('remove',index);//自定义分发事件
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "四大名著",
            todoItems: ['三国演义','红楼梦','西游记','水浒传']
        },
        methods:{
            removeItems: function (index){
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>

解析：

v-bind:title="title" -->绑定的是前端和vue实例的数据
props: ['title'] -->绑定的是前端和组件的数据
:key="index" -->将index的值返回到vue实例
数组删除元素，通过splice(index,1)方法，index:要删除的第一个元素的位置 1:删除一个
组件里面也可以自定义组件的方法，还是通过methods来定义
template只能绑定当前组件的方法，不能绑定vue实例的方法
组件里面的methods方法通过this.$emit('remove',index);来自定义分发事件，从而绑定组件和前端
通过@remove="removeItems(index)"来绑定前端和vue实例

图解分析来一波