Vue学习(一)基本属性、Axios通信、插槽、官方脚手架搭建

芸丿兮

已于 2022-09-01 09:54:44 修改

阅读量7.7k

点赞数 9

分类专栏：笔记前端文章标签： vue.js javascript html

于 2021-07-11 21:05:25 首次发布

本文链接：https://blog.csdn.net/baiduwaimai/article/details/118632401

版权

笔记同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

前端

12 篇文章 1 订阅

订阅专栏

layout: post
title: Vue学习(一)基本属性、Axios通信、插槽、官方脚手架搭建
description: Vue学习(一)基本属性、Axios通信、插槽、官方脚手架搭建
tag: 前端

概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方中文文档

学习vue我们必须之到它的7个属性
el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

Hello Vue

<div id="app">
  {{ message }}<!--元素中获取message-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<!--使用CDN在线引入Vue-->
<script>
  const vm = new Vue({
    el : "#app",
    data :{
      message:"Hello Vue!"}<!--定义Vue对象，el（element）定位元素（id，class...）-->
  })
</script>

结果：
在这里插入图片描述数据和 DOM 已经被建立了关联，所有东西都是响应式的打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

v-bind:attribute 指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，vue可用于操作dom

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

（回顾html语法，title的作用是悬停文字显示）

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

Date().toLocaleString()方法是显示当前日期时间

在这里插入图片描述
vue v-bind绑定值与字符串拼接两种写法：

:title=“字符串${xx}”
:title=“‘字符串’ + xx”

条件与循环

用v-if控制切换一个元素是否显示

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
</script>

当在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
这表明v-if与语法中的if一样，当判断为真时才会执行后边的语句。类似的
v-for与for循环判断也是这种关系。
注意：for="todo in todos"这种for循环方式，表示遍历数组todos中的每一项

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
</script>

在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。

事件

用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

在这里插入图片描述

v-on:click=""监听鼠标点击，如果点击则执行后边的程序counter+=1；
点击按钮，下边自动+1

对于较为复杂的响应事件，v-on:click=""可以直接跟方法名

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

方法定义在vue的methods属性中

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      // `event` 是原生 DOM 事件
      alert('Hello ' + this.name + '!') 
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!

在这里插入图片描述

v-model进行表单数据双向绑定

<div id="app5">
    <input type="text" v-model="message">{{message}}
</div>

  var app5 = new Vue({
      el:'#app5',
      data:{
          message:""
      }
  })

在这里插入图片描述

Vue的组件

组件是可复用的 Vue 实例，类似于Vue形式的一个对象
构建格式：
Vue.component(‘组件名’，{template:元素})
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，所以组件复用时不至于相互影响。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

tmplate是HTML的一个模板元素（可嵌套）
定义了这个名为button-counter的组件以后，我们就可以把它当作html中的特定标签的格式来使用：

<div id="components-demo">
  <button-counter></button-counter><!--刚刚定义的组件-->
</div>

完成元素的vue绑定，只需要new一个Vue对象：

  new Vue({ el: '#components-demo' })

网页效果：

在这里插入图片描述
通过 Prop 向子组件传递数据：
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中，
简单一句话，props是用来向组件提交信息的：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

构建组件的时候，参数title是未知的，使用props来接受JS传递的参数，然后在html中使用该组件的时候就给组件赋值了参数

<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>

在这里插入图片描述在更复杂的应用中，假如你使用该组件，包含一个参数数组，并想要为每篇博文渲染一个组件：

new Vue({
  el: '#',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

这里的blog-post-demo是JS在调用组件时，给传递了数据posts，这样一个数组，数组中是三个对象，html中使用blog-post标签时，挂载到JS中，

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

key是一个属性，用于元素的标记

.Vue文件

新建vue component文件，该文件后缀为.Vue
在这里插入图片描述

Axios异步通信

使用的json数据包：

{
  "name": "haoyun",
  "url": "https://www.baidu.com",
  "page": 1,
  "address": {
    "street": "东咀",
    "city": "珠海",
    "country": "中国"
  }
}

<body>
    <div id="vue" v-clock>
        {{info.address.street}}
        {{info.name}}
        <a v-bind:href="info.url">百度</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#vue',
            data(){
                return{
                    info:{
                        name:null,
                        url:null,
                        page:null,
                        address:{
                            street:null,
                            city:null,
                            country:null
                        }
                    }
                }
            },
            /*钩子函数*/
            mounted(){
                axios.get("data.json").then(Response=>(this.info=Response.data));
            }
        });
    </script>
</body>

Axios官网

计算属性

computed: {
            //计算属性：methods，computed 方法名不能重名，重名字后，只会调用methods的方法
            currentTime2: function () {
                this.message;
                // 返回一个时间戳
                return Date.now();
            }
        }

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！
计算在虚拟dom中进行，计算结果在缓存中，不会随时间变化，当计算属性中的参数有更新时，虚拟dom清空，重新计算，这时计算属性才会发生变化。
注意计算属性是vue component的属性，可以用方法定义，但不可用作方法调用。

插槽

插槽的提出是为了实现合成组件，假定一个组件中大部分内容是固定的，仅有几个地方是需要变化更改的，我们就可以用插槽来代替这部分需要变化的，然后根据需要写相应的插槽组件

Slot的通俗理解是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；

假定一个组件：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

其中：navigation-link的模板写为合成组件的形式：

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

当组件渲染的时候，slot标签将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML，也可以是其他组件
具体见Vue文档插槽

下边给一个插槽使用的具体例子，可以看到的是视图层使用了插槽后，就是一个框架模板，不包含任何静态数据，真正类似html的标签，使用的插槽具体形式在后边定义插槽组件，最后渲染的时候，props接受数据，传递给插槽组件，再传给合成组件，最后渲染网页元素。
在这里插入图片描述

在这里插入图片描述

自定义事件内容分发

主要是组件与Vue实例之间的数据传输问题，组件中某些方法也需要参数传递，然而实际中参数只能由Vue实例向视图层传输。
为了实现组件与Vue实例之间的数据传输：

先将视图层与Vue实例数据绑定，视图层的方法与Vue实例绑定。
组件中使用props接受视图层传递的数据，使用自定义事件编写组件的methods，语法：methods:{
自定义事件名:function{
自定义事件名this.$emit(‘自定义事件名’, [参数])
}
}
在组件中完成方法构建。
这样一来，视图层的数据、方法与Vue实例绑定，通过视图层这个中介，实现组件接收Vue实例中的数据。

示例