Vue官方教程知识整理

最新推荐文章于 2024-05-29 12:00:00 发布

舍予一

最新推荐文章于 2024-05-29 12:00:00 发布

阅读量3k

点赞数 1

分类专栏： VUE 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/hsy0827/article/details/123336129

版权

VUE 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

序言 vue.js介绍

Vue.js是渐进式的JavaScript框架

优点：

体积小。压缩后33k
更高的运行效率。虚拟DOM
双向数据绑定。让开发人员不再执着于DOM，更关注于业务逻辑
生态丰富、学习成本低。

1. 安装与部署

安装略，详细见https://cli.vuejs.org/zh/guide/installation.html

在项目中，可以直接用<script>中引入，如

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

2. 创建第一个vue程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">{{message}}</div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            }
        });
    </script>
</body>

</html>

3. 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。（必须在实例被创建时就将变量加入才会进行响应）

/ 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

Object.freeze()方法会阻止现有property的改变，即阻止数据响应
$前缀用于区分用户定义的property

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

$watch可用于观察某一数据的变化

vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

4. 生命周期

beforeCreate：页面创建之前。实例初始化之后，数据观测（data observer）和event、watcher事件配置之前。
created：实例创建之后立即调用。数据观测、属性和方法的运算、watch、event事件回调完成。挂载未开始，当前$el不可见。
beforeMount：挂载开始之前调用。相关的渲染函数收藏被调用。
mounted：挂载成功。el被vm.$el替换。
beforeUpdate：数据更新之前。
updated：dom已更新，组件更新完毕。

5. 模板语法-插值

文本

{{}}

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

v-once数据不可改，只进行一次插值

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

{{}}会将数据解释为普通文本，要输出HTML代码需要用到v-html

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute

v-bind

<div v-bind:id="dynamicId"></div>

使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

6. 模板语法-指令

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

<p v-if="seen">现在你看到我了</p>
<!--这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素（是否渲染该p标签）。-->

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
如：

<a v-bind:href="url">...</a>
<!--在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。-->

v-on用于事件监听

<a v-on:click="doSomething">...</a>
<!--这里参数是监听的事件名-->

动态参数

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

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

如果Vue 实例有一个 data property attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。

<a v-on:[eventName]="doSomething"> ... </a>

当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus。当 eventName 的值为“null”时，即移除绑定。

修饰符

修饰符 (modifier) 是以半角句号 .指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()（防止链接打开url）
如：
prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()（防止链接打开url）

<form v-on:submit.prevent="onSubmit">...</form>

stop修饰符告诉v-on指定对于触发的事件调用event.stopPropagation()（阻止冒泡）

<a v-on:click.stop="doSomething">...</a>

7. style与class绑定

绑定HTML Class

对象语法

active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。

<div v-bind:class="{ active: isActive }"></div>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

绑定内联样式

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

或

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

8. 条件渲染

v-if

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

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。key可以解决这一情况，使两个元素完全独立。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

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

9. 列表渲染

可以用 v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果会是两个li标签

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

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

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

事件修饰符

.stop 阻止单击事件继续传播，阻止冒泡
.prevent 提交事件不再重载页面
.capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的（阻止捕获）
.once
.passive

11. 表单输入绑定

可以用 v-model 指令在表单、及元素上创建双向数据绑定。

文本

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

复选框

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

单选按钮

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

选择框

单选

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

多选

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

12. 组件基础

<div id="components-demo">
  <button-counter></button-counter>
</div>

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

data必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝（不会影响到其他复用到的模块）

13. 组件注册

全局注册

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

局部注册

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

舍予一

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue官方教程知识整理

Vue教程知识整理序言 vue.js介绍1. 安装与部署2. 创建第一个vue程序3. 数据与方法4. 生命周期5. 模板语法-插值文本原始HTMLAttribute使用 JavaScript 表达式序言 vue.js介绍Vue.js是渐进式的JavaScript框架优点：体积小。压缩后33k更高的运行效率。虚拟DOM双向数据绑定。让开发人员不再执着于DOM，更关注于业务逻辑生态丰富、学习成本低。1. 安装与部署安装略，详细见https://cli.vuejs.org/zh/guide
复制链接

扫一扫