vue的学习

vue

引入js文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

1 第一个vue程序

<!--view层，模版-->
<div id="app">
    {{message}} <br>
    {{msg}}
</div>
<script>

    var vm = new Vue({
        //绑定元素
        el: "#app",
        data: {
            message: "hello,vue!",
            msg:'xiao vue'
        }
    });
</script>

2 if-else语句

<!--view层，模版-->
<div id="app">
    <!--
        if-else
    -->
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>

    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>


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

3 for-each

<div id="app">
    <!--
    items   数组名
    item    数组中的变量
    -->
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>


<script>
    var vm = new Vue({
        //绑定元素
        el: "#app",
        data: {
            items: [
                {message: 'java'},
                {message: 'python'},
                {message: '运维'}
            ]
        }
    });
</script>

4 绑定事件

<div id="app">
    <!--绑定事件-->
    <button v-on:click="sayhi"> click me</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'java'
        },
        methods: {
            sayhi: function () {
                //this指向vm
                alert(this.message)
            }
        }
    });
</script>

5 双向绑定–(v-model)

<!--view层，模版-->
<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}} <br>
    输入的文本：<br>
    <textarea v-model="message"></textarea>{{message}}<br>
    <input type="radio" name="sex" value="男" v-model="qingjiang"/>男
    <input type="radio" name="sex" value="女" v-model="qingjiang"/>女
    <p>选中了谁：{{qingjiang}}</p><br><br>
    下拉框：
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>value：{{selected}}</p><br><br>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: '123',
            qingjiang: '',
            selected:''
        }
    });
</script>

6 组件component

<div id="app">
    <qingjiang v-for="item in items" v-bind:qin="item"></qingjiang>
</div>
<script>

    Vue.component("qingjiang", {
        //<qingjiang></qingjiang>就可以代替<li>hello</li>
        //props接受参数
        props: ['qin'],
        template: '<li>{{qin}}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data: {
            items: ['java', 'linux', '前端']
        }
    });
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vju3sCAs-1626422573621)(vue.assets/image-20210319170304411.png)]

7 axios（异步通信）

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"/>
<script src="https://unpkg.com/axios/dist/axios.min.js"/>

data.json
{
  "name": "狂神java",
  "url": "www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "四川",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "www.baidu.com"
    },
    {
      "name": "狂神java",
      "url": "https://www.bilibili.com/video/BV18E411a7mC?p=9&spm_id_from=pageDriver"
    },
    {
      "name": "京东",
      "url": "https://www.jd.com/"
    }
  ]
}

<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        //data:属性
        data() {
            return {
                //请求的返回参数，必须和json字符串一样
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        //钩子函数,链式编程
        mounted(){
            axios
                .get('../data.json')
                .then(response => (console.log(response.data)));
        }
    });
</script>

8 计算属性

<!--view层，模版-->
<div id="app">
    <p>currentTime1 = {{currentTime1()}}</p>
    <p>currentTime2 = {{currentTime2}}</p>
</div>
<script>
    var vm = new Vue({
        //绑定元素
        el: "#app",
        data:{
            message:"hello,kuangshen"
        },
        methods:{
            currentTime1: function (){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性
            currentTime2: function (){
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>



<!--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>
<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",
        data:{
            title:'列表',
            todoItems:['java','前端','linux']
        }

    });
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t0TJvN6y-1626422573623)(vue.assets/image-20210319220217725.png)]

v-bind：绑定属性 v-on：操作事件

<!--view层，模版-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>

</div>
<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','index'],
        template: '<li>{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                //alert("111")
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data:{
            title:'列表',
            todoItems:['java','前端','linux']
        },
        methods:{
            removeItems:function (index){
                this.todoItems.splice(index,1);
            }
        }

    });
</script>

10 nodejs[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fgFKEkCy-1626422573625)(vue.assets/image-20210320144707209.png)]

main.js

import Vue from 'vue'
import App from './App'
import router from './router/index'

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Main.vue

<template>
<h1>首页</h1>
</template>

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

<style scoped>

</style>

Contenxt.vue

<template>
  <h1>内容页</h1>
</template>

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

<style scoped>

</style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Context from "../components/Context";
import Main from "../components/Main";

Vue.use(VueRouter);

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

App.vue

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

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>