没有合适的资源?快使用搜索试试~ 我知道了~
Vue使用方法和基础知识了解学习 Vue (读音 /vjuː/,类似于 view ) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。 安装 直接引入 直接下载并用 <script> 标签引入, Vue 会被注册为一个全局变量。 下载本地(就是一个js文件),直接通过标签引入页面中 通过在线地址直接使用 起步 创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 当创建一个 Vue 实例时,你可以传入一个选项对象。 数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当 这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值 // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的属性 // 返回源数据中对应的字段 vm.a == data.a // => true // 设置属性也会影响到
资源推荐
资源详情
资源评论
官网
http:/vuejs.org
Vue.js 是什么
渐进式 JavaScript 框架。
Vue (读音 /vjuː /,类似于 view ) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同
的是,Vue 被设计为可以自底向上逐层应用。
渐进式代表的含义是:没有多做职责之外的事,vue.js只提供了vue-cli生态中最核心的组
件系统和双向数据绑定,就像 vuex、vue-router都属于围绕vue.js开发的库。
安装
直接引入
直接下载并用 <script> 标签引入, Vue 会被注册为一个全局变量。
下载本地(就是一个js文件),直接通过标签引入页面中
通过在线地址直接使用
https://cdn. jsdelivr.net/npm/vue/dist/vue. js
https://cdn.bootcss.com/vue/2.6.11/vue.js
NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装[ 1] 。NPM 能很好地和诸如 webpack 或
Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发 单文件组件 。
起步
创建一个 Vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的:
当创建一个 Vue 实例时,你可以传入一个 选项对象 。
# 最新稳定版
$ npm install vue
var vm = new Vue({
// 选项
})
数据与方法
当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的 响应式系统 中。当
这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
当这些数据改变时,视图会进行重渲染。
插值
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上
msg 属性发生了改变,插值处的内容都会更新。
使用 JavaScript 表达式
对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是 单个
JavaScript 表达式 ( v-for 是例外情况)。指令的职责是,当表达式的值改变时,将其产生的
连带影响,响应式地作用于 DOM。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
<span>Message: {{ msg }}</span>
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
这里, v-if 指令将根据表达式 seen 的值的真假来插入/移除 p 元素。
参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如, v-bind 指令可以用于响
应式地更新 HTML attribute:
在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值
绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
在这里参数是监听的事件名。
缩写
v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的 attribute。然而,对于一些频繁用到
的指令来说,就会感到使用繁琐。因此,Vue 为 v-bind 和 v-on 这两个最常用的指令,提
供了特定简写:
v-bind 缩写
v-on 缩写
它们看起来可能与普通的 HTML 略有不同,但 : 与 @ 对于 attribute 名来说都是合法字符,
在所有支持 Vue 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。
条件渲染指令
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被
渲染。
也可以用 v-else 添加一个“else 块”:
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<h1 v-if="awesome">Vue is awesome!</h1>
v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”:
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
v-else-if
2.1.0 新增
v-else-if ,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:
类似于 v-else , v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素
的 CSS 属性 display 。
v-if 对比 v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当
地被销毁和重建。
v-if 也是 惰性的 :如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,
才会开始渲染条件块。
相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地
基于 CSS 进行切换。
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<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>
<h1 v-show="ok">Hello!</h1>
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非
常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
列表渲染指令
v-for
在 v-for 里使用数组
v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式
的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的 别名 。
在 v-for 块中,我们可以访问所有父作用域的属性。 v-for 还支持一个可选的第二个参数,
即当前项的索引。
你也可以用 of 替代 in 作为分隔符:
在 v-for 里使用对象
你也可以用 v-for 来遍历一个对象的属性。
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
<div v-for="item of items"></div>
剩余34页未读,继续阅读
资源评论
创可贴治愈心灵
- 粉丝: 167
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于 Vue.js 2.0 的树和多选组件.zip
- Vue Composition-api 中的 React Dnd 实现
- java基于SSM的汽车租赁后台管理系统源码数据库 MySQL源码类型 WebForm
- layui - vue 是 一 套 Vue 3.0 的 桌 面 端 组 件 库
- 海淘行业整体搜索趋势分析 海淘行业搜索趋势分析
- 基于 Vue 3 和 Vue 2 的 ContextMenu.zip
- 1. **`random` 模块**:用于生成随机选择 2. **`tkinter` 模块**:用于创建 GUI 应用程序 3. **`Tk` 类**:创建主窗口 4. **`Label` 类*
- 基于 Bulma 的 Vue.js 轻量级 UI 组件.zip
- java基于Servlet的图书管理系统源码数据库 MySQL源码类型 WebForm
- vue.calendar日期选择器
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功