Vue基础知识

2023-10-08 14:51:04

vue核心

数据双向绑定

指令

指令带有v-的，表示vue特有的属性，他们会在渲染的DOM上，应用特殊的响应式行为

导入支持

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

- v-bind:(bind:绑定),作用是绑定特别的元素,元素的值将会在vm对象中获取(缩写为:)

- if指令：作用与java中的if相同

<div id="app">
    <h1 v-if="message==='a'">
        A
    </h1>
    <h1 v-else-if="message==='b'">
        B
    </h1>
    <h1 v-else>
        C
    </h1>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "a"
        }
    });
</script>

- for指令：作用与java中的if相同

<div id="app">
    <h1 v-for="item in items">
        {{item.name}}
    </h1>

</div>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            items:[
                {name:"Spring"},
                {name:"SpringMVC"},
                {name:"Mybatis"}
            ]
        }
    })
</script>

绑定事件

v-on：事件(v-on:缩写@)
v-on:click="sayhi"

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
<div  id="app">
  <button v-on:click="sayhi">click Me</button>
   或者 <button @click="sayhi">click Me</button>
</div>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      message: "就TM你学java"
    },
    methods:{//要绑定的事件的方法要写在methods中,function()参数要填event
      sayhi:function (event){
        alert(this.message);
      }
    }
  });


</script>
</body>
</html>

vue表单绑定(数据双向绑定)

model：可以做到表单输入什么，页面的指定位置就显示什么

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

单选框

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-module="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>双向绑定事件</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
<div  id="app">
  请输入文本：<input type="text" v-model="message">{{message}}
</div>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      message: "就TM你学java"
    }
  });


</script>


</body>
</html>

多选框

<!--多选框-->
<div  id="app">
  <p>请选择：</p>
  <input type="checkbox" value="jack" v-model="usernames">
  <input type="checkbox" value="mark" v-model="usernames">
  <input type="checkbox" value="fuck" v-model="usernames">
  <span>checked name:{{usernames}}</span>
</div>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      usernames:[]
    }
  });

组件

定义一个组件很简单，像这样

Vue.component("king",{
        template:'<li>{{king}}</li>'+...+(后面还可以加)
    });

简单理解就是，把一个或者多个标签，集合起来，给取一个别名。然后使用这个
别名标签，就能达到模板标签的作用。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <!--传递给组件的值 使用props（中间商）-->
<king v-for="item in items" v-bind:king="item"></king>
</div>

<script>
    //定义一个组件：
    Vue.component("king",{
        props:["king"],
        template:'<li>{{king}}</li>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            items:["vue.js","Node.js","springBoot"]
        }
    });
</script>

如何将值传递到组件中呢？
我们直接传是达不到要求的，需要一个中间商props
别名标签中使用v-bind绑定一个属性，组件中使用props也一样绑定
同样的属性，然后template中的标签直接取值就可以了

<king v-for="item in items" v-bind:king="item"></king>
</div>

<script>
   //定义一个组件：
   Vue.component("king",{
       props:["king"],
       template:'<li>{{king}}</li>'
   });

网络通信

1.可以使用jQuery.ajax

2.使用Axios

导入Axios

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>

具体使用和需要注意的地方

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>
<div id="app">
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">请点击</a>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data(){//data方法，返回的是axios中的数据
            //请求返回的参数，必须和json字符串的参数一样
            return{
                info:{
                    name:null,
                    url:null
                }
            }
        },
        mounted(){/*axios在钩子mounted中实现.钩子函数，需要链式编程*/
            axios.get("../data.json").then(response=>(this.info=response.data))
        }
    });
</script>

计算属性（computed）

这是Vue中的特性，将计算出来的结果，缓存在属性中。就类似
缓存机制。属性中有参数发生改变，缓存的数据也会刷新

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

<div id="app">
    <p>CurrentTime:{{CurrentTime1}}</p>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data:{
            message:"haha"
        },
        computed:{
            CurrentTime:()=>Date.now(),//返回一个时间戳
            CurrentTime1:function (){
                this.message;
                return Date.now()
            }
        }
    });
</script>

这里可以看出如果message的值没有发生改变，缓存的值也不会改变
，一旦message发生改变，缓存中的数据也会跟着改变

计算属性的主要特征是为了将不经常改变的计算结果进行缓存，以节省系统的开销

插槽slot

作用：slot用来连接组件

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


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/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>'
    })

    let vm = new Vue({
      el: "#app",
      data: {
        title: "课程列表",
        items:["狂神说java","狂神说前端","狂神说Linux"]
      }
    });
</script>

事件分发

基于插槽slot实现事件分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
<div id="app">
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in items" :item="item" :index="index" @removes="remove"></todo-items>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/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:'<li>{{index}} {{item}} <button @click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                //通过this.$meit绑定view层的自定义事件
                this.$emit('removes',index)
            }
        }
    })

    let vm = new Vue({
        el: "#app",
        data: {
            title: "课程列表",
            items:["狂神说java","狂神说前端","狂神说Linux"]
        },
        methods:{
            remove:function (index){
                this.items.splice(index,1);//使用splice可以删除指定的元素
            }
        }
    });
</script>
</body>
</html>

码农公寓