Vue学习

Vue学习

vue基础学习

绑定(demo1)

<div id="app1">
{{message}}
</div>

<div id="app2">
<span v-bind:title="message2">
    鼠标悬停几秒查看动态绑定的提示信息！
</span>
</div>

<script src="../vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            message:"hello vue!"
        }
    });

    var vm = new Vue({
        el:"#app2",
        data:{
            message2:"hello vue!"
        }
    });
</script>

判断(demo2)

v-if
v-else-if
v-else
<div id="app1">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>
<div id="app2">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>
<script src="../vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            ok: true
        }
    });
    var vm2 = new Vue({
        el:"#app2",
        data:{
            type: "A"
        }
    });
</script>

循环(demo3)

v-for
<div id="app1">
    <ul>
        <li v-for="(item, index) in items">
            {{item.message}}--{{index}}
        </li>
    </ul>

</div>
<script src="../vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            items: [
                {message: "曾琳学Java"},
                {message: "曾琳学前端"}
            ]
        }
    });
</script>

绑定事件(demo4)

v-on
methods
<div id="app1">
    <button v-on:click="saiHi">Click me</button>

</div>
<script src="../vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            items: [
                {message: "曾琳学Java"},
                {message: "曾琳学前端"}
            ]
        },
        methods:{//方法必须定义在Vue的methods对象中，v-on:事件
            saiHi(){
                alert(this.items[0].message);
            }
        }
    });
</script>

双向绑定(demo5)

<div id="app1">
    <input type="text" v-model="message">{{message}}
</div>
<div id="app2">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    {{selected}}
</div>
<script src="../vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            message: ""
        }
    });
    var vm1 = new Vue({
        el:"#app2",
        data:{
            selected: ""
        }
    });
</script>

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

组件(demo6)

Vue.component

<div id="app">
//vue的组件必须放在注册的HTML组件中
    <zll v-for="item in items" v-bind:p="item"></zll>
    <zl></zl>
</div>

<script>

    Vue.component("zl",{
        template: '<li>hello</li>'
    });
    Vue.component("zll",{
        props: ['p'],
        template: '<li>{{p}}</li>'
    })
    //这个要在component后面
    var vm = new Vue({
        el: "#app",
        data:{
            items: ["Java","C","C++"]
        }
    });
</script>

网络通信(demo7)

<div id="app" v-cloak>
    <div>
        {{info.name}}
    </div>
    <div>
        {{info.links}}
    </div>
    <a v-bind:href="info.url">百度</a>
</div>


<script src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            info:null,
        },
        //上面的data表示属性，下面的data表示方法
        // data(){
        //     return{
        //         info:null
        //     }
        // },
        mounted(){//钩子函数
            axios.get("../data.json").then(response=>this.info=response.data);
        }
    });
</script>

计算属性(demo8)

<div id="app" v-cloak>
    <p>{{currentTime1()}}</p>
    <p>{{currentTime2}}</p>
</div>


<script src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            info:"zl",
        },
        methods:{
            currentTime1(){
                return Date.now();
            }
        },
        //计算属性的主要特性就是将不经常变化的计算结果进行缓存，以节约我们系统的开销
        //计算属性可以看出缓存
        computed:{
            currentTime2(){
                this.info;
                return Date.now();
            }
        }
    });
</script>

可以看到普通方法的结果会每一次重新计算，而计算属性的方法不会重新计算，只有发生改变的时候才会重新计算

插槽(demo9)

<div id="app">
    <todo>
<!--       : 是v-bind:的简写 -->
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
    </todo>
</div>


<script src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.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: "动漫列表",
            items: ["某科学的超电磁炮","Angel Beat","游戏人生"]
        }
    });
</script>

自定义事件分发(demo10)

<div id="app">
    <todo>
<!--       : 是v-bind:的简写 -->
<!--        @是 v-on: 的简写-->
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items"
                    :item="item" :index="index"  @remove="removeItems(index)"></todo-items>
    </todo>
</div>

<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:'<li>{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove(index){
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title: "动漫列表",
            items: ["某科学的超电磁炮","Angel Beat","游戏人生"]
        },
        methods:{
            removeItems(index){
                console.log("删除了"+this.items[index]+"ok");
                this.items.splice(index,1);
            }
        }
    });
</script>

第一个vue-cli程序

//创建一个webpack的vue程序，一般都选择no
vue init webpack myvue
cd myvue
npm install
npm i element-ui -S
cnpm install vue-router --save-dev

cnpm install sass-loader node-sass --save-dev
npm run dev

vue-router路由

1. 安装vue-router

//安装vue-router并且保存在dev中
cnpm install vue-router --save-dev

2. 写好两个组件

<template>
  <div>内容页</div>
</template>

<script>
export default {
  name: "content"
}
</script>

<style scoped>

</style>
========================================================================================

<template>
<div>首页</div>
</template>

<script>
export default {
  name: "main"
}
</script>

<style scoped>

</style>

3. 配置路由

import Vue from 'vue';
import VueRouter from "vue-router";
import Content from '../components/content';
import Main from '../components/main';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path:'/content',
      name: 'content',
      component: Content
    },
    {
      path:'/Main',
      name: 'main',
      component: Main
    }
  ]
})

4. main.js中绑定

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5. App.vue中使用

<template>
  <div id="app">
    <router-link to="/content">内容页</router-link>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>
  </div>
</template>
  ]
})

4. main.js中绑定

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5. App.vue中使用

<template>
  <div id="app">
    <router-link to="/content">内容页</router-link>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>
  </div>
</template>