Vue基础知识

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就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

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>'
   });

img_1.png

网络通信

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>

img.png
这里可以看出如果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>

事件分发

img_2.png

基于插槽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>

解构赋值

在vue组件中我们可以在一个数组中提取出一个数组对象，这就叫解构赋值

比如

let a, b, rest;
[a, b] = [10, 20];
 
console.log(a);
// expected output: 10
 
console.log(b);
// expected output: 20
 
[a, b, ...rest] = [10, 20, 30, 40, 50];
 
console.log(rest);
// expected output: Array [30,40,50]
这里的Array就成了一个对象

props

const app = Vue.createApp({})
 
app.component('blog-post', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#blog-post-demo')
<div id="blog-post-demo" class="demo">
  <blog-post title="My journey with Vue"></blog-post>
  <blog-post title="Blogging with Vue"></blog-post>
  <blog-post title="Why Vue is so fun"></blog-post>
</div>

当一个值被传递给一个 prop attribute 时，它就成为该组件实例中的一个 property。该 property 的值可以在模板中访问，就像任何其他组件 property 一样。

prop 都有指定的值类型,我们可以使用一个对象列出所有的props，

 props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // 或任何其他构造函数
}

加：是代表动态赋值,没有加就是常量赋值

<!-- 动态赋予一个变量的值 -->
<blog-post :title="post.title"></blog-post>
 
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>
posted @   小罗要有出息  阅读(44)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue的其他指令
·  参数传递和重定向
·  Java后端应该掌握的前端知识Vue入门（中）
·  Vue3 笔记 指令 选项api class类与style样式
·  Vue基础
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示
AI IDE Trae