vue java企业官网 vue官方

转载

mob64ca14196783 2023-11-13 19:43:25

文章标签 vue java企业官网 javascript html5 html Vue 文章分类 Java 后端开发

Vue官方教程知识整理

序言 vue.js介绍
1. 安装与部署
2. 创建第一个vue程序
3. 数据与方法
4. 生命周期
5. 模板语法-插值

文本
原始HTML
Attribute
使用 JavaScript 表达式

6. 模板语法-指令

参数
动态参数
修饰符

7. style与class绑定

绑定HTML Class

对象语法
数组语法

绑定内联样式

对象语法
数组语法

8. 条件渲染

v-if
v-show

9. 列表渲染
10. 事件绑定

事件修饰符

11. 表单输入绑定

文本
复选框
单选按钮
选择框

单选
多选

12. 组件基础
13. 组件注册

全局注册
局部注册

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

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：虚拟化软件 IDC排名虚拟化厂商排名

下一篇：cdf是什么意思python cdf python

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯