vue快速入门(二)
工程搭建完成,接下来如何使用。
首先找到src\rooter\index.js文件 这里是路由文件配置要访问的组件,这个会在后期说明
这里的components/A 是组件里边的
需要手动 创建A.vue文件,结构如下:
<template>
<div> <!---只允许有一个最外层标签 !-->
<div>
{{message}}
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
message:'vue好帅!'
}
}
}
</script>
<style> </style>
这里的"/a" 是在路由中配置的path,其它的同理。
基本语法使用:走起。
1、数据双向绑定 (v-model)
<p>{{message}}</p>
<p><input type="text" v-model="message"></p>
当input输入“真的吗” ,会发现<p>{{ message }}</p>
中的内容也会被更新,MVVM模式已实现双向绑定
2、常用的指令
vue.js已 v-开头的
v-bind
v-on
v-if
v-else
v-show
v-for
@v-bind
v-bind
指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class
v-bind:argument="expression"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
如图,绑定属性,class,id,..... v-bind:name='........'
@v-on 监听DOM事件,点击事件监听 v-on:click="dosomething"
<p v-on:click="showAlert">点击我会弹出框</p>
<script>
export default {
data: function () {
return {
message: 'vue好帅!',
url:'www.baidu.com'
}
},
methods: {
showAlert: function(){
alert(1)
},
otherMethod: function(){
//.....
}
} }
</script>
在methods对象下,v-on对应的绑上了showAlert函数,点击会触发该事件,如果有多个同理。
@v-if 条件渲染 遇见真值创建
v-if="expression"
expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。例如:
<p v-if="seen">true</p>
data: function () {
return {
message: 'vue好帅!',
url:'www.baidu.com',
seen: true,
age: 22
}
}
seen 条件为真 ,页面会显示。否则是不会创建的。下边表达式age大于20 会显示年龄,否则是不会被创建的。
<p v-if="age > 20">{{age}}</p>
@v-show
v-show
也是条件渲染指令,和v-if指令不同的是,使用v-show
指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性
<p v-show="age> 25">{{age}}</p>
当条件不成立,也会常见改标签,会使用行内样式处理 隐藏
@v-else指令 可以用v-else
指令为v-if
或v-show
添加一个“else块”。v-else
元素必须立即跟在v-if
或v-show
元素的后面——否则它不能被识别。
<p v-if="age>20">我大于{{age}}</p>
<p v-else>我小于{{age}}</p>
@v-for指令
v-for
指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
v-for="item in items"
items是一个数组,item是当前被遍历的数组元素。
data: function () {
return {
message: 'vue好帅!',
url:'www.baidu.com',
seen: true,
age: 21,
dataList: [
{name: 'zs'},
{name: 'ee'},
{name: 'cc'}
]
}
}
<div v-for="item in dataList">
{{item.name}}
</div>
v-for ="(item, index) in dataList" index为索引值。
@ 绑定Class
v-bind:class
我们可以传给 v-bind:class
一个对象,以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div>
data: {
isActive: true // 为true显示,否则 不显示
}
渲染为:
<div class="active"></div>
vue快速入门(二)的更多相关文章
- vue 快速入门 系列 —— vue-cli 下
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...
- vue 快速入门 系列 —— 虚拟 DOM
其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
- vue 快速入门 系列
vue 快速入门(未完结,持续更新中...) 前言 为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
- vue 快速入门 系列 —— vue 的基础应用(上)
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用(下)
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
随机推荐
- 获取iframe自适应后的宽高
1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...
- kaggle Partial_Dependence_Plots
# Partial dependence plots# 改变单变量对最终预测结果的影响# 先fit出一种模型,然后取一行,不断改变某一特征,看它对最终结果的印象.# 但是,只使用一行不具有典型性# 所 ...
- IDEA使用maven创建SSM及其依赖的导入
$.说明: 1.IDEA创建maven SSM web项目 2.导入依赖 一.IDEA创建maven SSM项目 对于初入IDEA的人来说此篇博客适用于不会创建maven 项目的人 首先下载IDEA ...
- 正经学C#_判断[IF语句]:[c#入门经典]
判断语句几乎是最为常用的语句之一,是最有效的. 先说IF语句,IF语句也是属于分支的一种,用来控制流程的. IF的语句是这样的 IF(xxx 条件) { //代码块 } ,b; ) { b=a--; ...
- CF567E President and Roads
\(\color{#0066ff}{ 题目描述 }\) 给出一个有向图,从起点走到终点(必须走最短路),问一条边是否一定会被经过,如果不经过它,可以减小它的多少边权使得经过它(边权不能减少到0) \( ...
- SP8791 DYNALCA - Dynamic LCA
\(\color{#0066ff}{ 题目描述 }\) 有一个森林最初由 n (\(1 \le n \le 100000\))n(\(1\leq n\leq 100000\)) 个互不相连的点构成 你 ...
- sublime侧边栏管理sidebarEnhancements浏览器设置
sidebarEnhancements是为了增强sublime Text侧边栏功能的一个插件,但是同时也可以实现设置浏览器浏览当前文件的功能. Ctrl+Shift+p 输入package contr ...
- sql 日期对比
来自这里
- CodeForces - 476B -Dreamoon and WiFi(DFS+概率思维)
Dreamoon is standing at the position 0 on a number line. Drazil is sending a list of commands throug ...
- Gym - 101615J Grid Coloring DP 2017-2018 ACM-ICPC Pacific Northwest Regional Contest (Div. 1)
题目传送门 题目大意: 给出n*m的网格,有红蓝两种颜色,每个格子都必须被染色,当一个格子被染成蓝色后,这个格子左上方的一块都必须被染成蓝色,问最后的方案数量. 思路: 按照题目条件,如果有一个格子被 ...