Vue（2.X）入门使用

焦焦焦焦焦

已于 2022-07-25 17:38:21 修改

阅读量304

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-07-25 16:37:23 首次发布

本文链接：https://blog.csdn.net/weixin_60645637/article/details/125977027

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.js是什么？

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

安装

直接用<script>标签引入

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

这里我使用的是2.x的版本：https://cn.vuejs.org/js/vue.js

先来试试创建第一个Vue应用吧

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

var app = new Vue({
  el: '#app',
  data： {
    message: 'Hello Vue!'
  }
})
//Hello Vue!

插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

Vue指令

指令是带有 v- 前缀的特殊attribute。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

动态参数

Vue从2.6.0的版本开始，可以使用方括号括起来的JavaScript表达式作为一个指令的参数

<a v-bind:[attributeName]="url"> ... </a>

这里的attributeName将被作为一个JavaScript表达式进行动态求值，求得的值会作为最终参数来使用。在这个示例中，当attributeName的值为href时，将等价于v-bind:href

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。因此，Vue为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind 缩写

<!-- 完整语法 --><a v-bind:href="url">...</a>
<!-- 缩写 --><a :href="url">...</a>
<!-- 动态参数的缩写(2.6.0+) --><a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 --><a v-on:click="doSomething">...</a>
<!-- 缩写 --><a @click="doSomething">...</a>
<!-- 动态参数的缩写(2.6.0+) --><a @[event]="doSomething"> ... </a>

v-bind：绑定用户属性

基本语法：v-bind:属性名 = "JS表达式"，表示将 JS 表达式的值赋值给此属性（单向绑定）

简写：:属性名 = "JS表达式"

<input type=”button” value=”bin” v-bind:title=”message”>

代码示例：

<div id="app">
    <p>{{message}}</p>
    <input type="text" v-bind:title="message">
</div>

var app = new Vue({
    el: '#app',
    data: {
        message:"请输入6-12位数字"
    }
})

v-model：双向绑定

基本语法：v-model:value = "JS表达式"，表示双向绑定，也就是 data 中的值被修改，页面的值也会被修改；页面的值被修改，对应的 data 属性值也会随之修改

简写：v-model = "JS表达式"，即双向绑定默认操作的属性就是 value

代码示例：

<body>
    <div id="root">
        <!-- 普通写法 -->
        双向数据绑定：<input type="text" v-model:value="name"><br/>
        <!-- 简写 -->
        双向数据绑定：<input type="text" v-model="name"><br/>
        <div> data属性的值：{{name}} </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'Bruno Mars'
        }
    })
</script>

v-if：根据表达式值的真假来渲染元素

<div id="app">
    <p v-if="seen">隐藏状态</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        seen:false
    }
})

v-else-if：充当 v-if 的“else-if 块”，可以连续使用

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

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意：v-show 不支持 <template> 元素，也不支持 v-else

v-for：把一个数组对应成一组元素

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<div id="app">
<ul>
<li v-for="string in aString">{{string}}</li>
</ul>
</div>

var app = new Vue({
el: '#app',
data: {
 aString:['我','是','数','组']
})

v-for 里使用对象

index为索引，name为键名，index为键值

<ul id="v-for-object" class="demo">
  <li v-for="(value, name, index) in object">
   {{ index }}. {{ name }}: {{ value }}  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

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-model：在表单控件上或组件上创建双向绑定

<div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is:{{message}}</p>
</div>

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

组件基础

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用；

你可以将组件任意次的复用，注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

注意：data 必须是一个函数

组件名

在注册一个组件的时候，我们始终需要给它一个名字

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。

Vue.component('button-counter', {
data: function () {
 return {
      count: 0
} },
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
 })
<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。通俗的说是：slot 是在父组建控制了子组件显示或隐藏相关内容。

插槽缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

插槽又分三种：普通插槽，具名插槽，作用域插槽

普通插槽

<div id="app">
    <my-buttons>
        <p>组件标签中的内容 {{msg}}</p>
        <h3>标题</h3>
    </my-buttons>  
</div>
<template id="myButton">
    <div>
        <!-- 插槽 slot  此时slot标签就代表 组件标签中的内容-->
        <slot></slot>
        <button>按钮1</button>
        <slot></slot>
        <button>按钮2</button>
        <slot></slot>
    </div>
</template>

Vue.component('myButtons',{
        template:'#myButton',
        data(){
            return {
            }
        }
    })
    let vm=new Vue({
        el:"#app",
        data:{
            msg:"899999999"
        }
    })

如果 <my-buttons> 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

具名插槽

在一个组件中有多个插槽，调用的时候为了给不同的组件传递，

参数就需要为插槽进行命名。为不同需求的组件传递不同的参数。

<div id="app">
    <my-button>
        <template v-slot:header>组件标签中的内容</template>
        <template v-slot:main>标题</template>
        <template #c>文本</template>
    </my-button>
</div>
<template id="myButton">
    <div>
        <slot name="header"></slot>
        <slot name="main"></slot>
        <slot name=”c”></slot>
    </div>
</template>

Vue.component('myButton',{
    template:'#myButton',
    data(){
        return {
        }
    }
})
let vm=new Vue({
    el:"#app",
})

过度动画

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class

可以配合使用第三方 CSS 动画库，如 Animate.css

在过渡钩子函数中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

这里是一个典型的例子：

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition></div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

简单理解：

v-enter：就是进入时候的第一帧
v-enter-to：就是进入时候的第二帧（这帧结束进入效果结束）
v-enter-active：就是第一帧和第二帧中间的执行过程
v-leave：就是离开时候的第一帧
v-leave-to：就是离开时候的第二帧（这帧结离开效果结束）
v-leave-active：就是第一帧和第二帧中间的执行过程

焦焦焦焦焦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（2.X）入门使用

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。直接用标签引入这里我使用的是2.x的版本：https://cn.vuejs.org/js/vue.js先来试试创建第一个Vue应用吧插值数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：Mustache 标签将会被替代为对应数据对象上 msg property 的......
复制链接

扫一扫