VUE2

Soc:关注度分离原则

网络通信:axios

页面跳转:vue-router

状态管理:vuex

VUE-UI:ICE

vue基本语法

判断语句

HTML

<body>
<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>No</h1>
</div>

<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model 数据
        data:{
            type:'B'
        }

    })
</script>
</body>

循环语句

HTML

<body>
<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    //Model 数据
    data:{
      items:[
          {message:'A'},
          {message:'B'},
          {message:'C'},
          {message:'D'},
      ]
    }

  })
</script>
</body>

事件 v-on

HTML

<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model 数据
        data:{
            message:"TEST func!!"
        },
        methods:{
            //方法必须定义在VUE的methods对象中,v-on:事件
            sayHi:function (){
                alert(this.message);
            }
        }
    })
</script>

双向绑定 v-model

HTML

<!--view层 模板-->
<div id="app">

<select v-model="checked">
    <option value="" disabled>---请选择---</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
    <span>{{checked}}</span>
</div>

<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            checked:""
        }
    })
</script>

vue组件:模板

HTML

<div id="app">
    <!--组件传参-->
    <firscomponent v-for="item in items" v-bind:items="item"></firscomponent>
</div>

<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义vue组件
    Vue.component("firscomponent",{
        //传参
        props:['items'],
        template:'<li>{{items}}</li>'
    });

    var vm=new Vue({
        el:"#app",
        //Model 数据
        data:{
            items:["java","linux","vue"]
        }
    })

</script>

网络通信

JQuery
Axios

HTML

<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--v-clock 解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>


<!--view层 模板-->
<div id="vue" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <div>{{info.address.street}}</div>
    <a v-bind:href="info.url">Click ME</a>
</div>



<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#vue",
        //Model 数据

        //data方法
        data(){
            return {
                //请求的返回参数格式 必须和json字符串一样
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null
                }
            }
        },
        mounted(){
            //钩子函数
            axios
            .get('../data.json')
            .then(response=>(this.info=response.data))
        }
    });

</script>
</body>

计算属性

计算出来的结果保存在属性中,内存中运行.

作用: 对不经常变化的数据进行缓存...

HTML

<!--view层 模板-->
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    //Model 数据
    data:{
      message:"hello vue!"
    },
      methods: {
        currentTime1:function (){
            return Date.now();
        }
      },
      computed:{
        //计算属性
          currentTime2:function (){
              return Date.now();
          }
      }
  })

</script>

插槽:Slot

HTML

<!--view层 模板-->
<div id="app">

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

</div>
<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //slot 插槽
    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",
        //Model 数据
        data:{
            title:"书籍列表",
            todoItems:['Java','VUE','Linux']
        }
    })
</script>

自定义事件内容分发

this.$emit('name','param')

HTML

<!--view层 模板-->
<div id="app">

    <todo>
        <Ttitle slot="todo-title" :title="title"></Ttitle>
        <items slot="todo-items" v-for="(item,index) in todoItems"
               :item="item" :index="index" v-on:remove="removeItems(index)"></items>
    </todo>

</div>
<!--1.导入VUE．js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //slot 插槽
    Vue.component("todo",{
       template:
           '<div>\
               <slot name="todo-title"></slot>\
               <ul>\
                    <slot name="todo-items"></slot>\
               </ul>\
           </div>'
    });
    Vue.component("Ttitle",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    Vue.component("items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{item}}<button @click="remove">删除</button></li> ',
        methods:{
            remove:function (index){
                this.$emit("remove",index);
            }
        }
    })

    var vm=new Vue({
        el:"#app",
        //Model 数据
        data:{
            title:"书籍列表",
            todoItems:['Java','VUE','Linux']
        },
        methods: {
            removeItems:function (index){
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    })
</script>

VUE-CLI

vue脚手架