Vue简介与基础
一、什么是Vue.js
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的**主流框架之一**，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
vue基本代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ msg }}</h1>
<input type="button" :value="msg" @click="hello">
</div> <script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue',
},
methods:{
hello: function(){
alert('hello vue')
}
},
})
</script>
</body>
</html>
二、vue常用指令
1、v-bind(用于绑定属性的指令)
v-bind简写: :(':'符号)
<input type="button" value="按钮1" v-bind:title="mytitle + '123'">
<input type="button" value="按钮2" :title="mytitle + '123'">
2、v-on(事件绑定机制)
v-on简写: @
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @click="show">
3、v-cloak(防止闪烁)
<p v-cloak>++++++ {{ msg }} ----------</p>
<h4 v-text="msg">==================</h4>
<!-- 默认 v-text 是没有闪烁问题的 -->
4、v-text（ 解析文本）
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
5、v-html（解析html标签）
<div v-html="html"></div>
6、v-model（多用于表单元素实现双向数据绑定）
<h4>{{ msg }}</h4>
<input type="text" style="width:100%;" v-model="msg">
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'aaaaaaaaaaaaa'
},
methods: {
}
});
</script>
7、v-show（ 显示内容）
8、v-if（显示与隐藏）
例子：（7、8的例子）
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
});
</script>
9、v-else-if（必须和v-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>
10、v-else（必须和v-if连用）
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
11、v-once（进入页面时 只渲染一次 不在进行渲染）
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>//加载后，数据不会再更改了
</div>
12、v-pre（把标签内部的元素原位输出，不解析）
<div v-pre>{{msg}}</div>//结果还是{{msg}}
13、v-for（循环）
<div id="app">
<!-- 循环数组-->
<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
<!-- 循环对象数组-->
<p v-for="(user, i) in list2">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
<!-- 循环对象-->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
<!-- 循环数字-->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
,
list2: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
],
user: {
id: 1,
name: '汤姆·杰克',
gender: '男'
}
}, methods: {}
});
</script>
三、vue样式
1、class三种绑定方法
(1)直接传递一个数组
<h1 :class="['thin', 'italic']">1111</h1> (2)使用三元表达式
<h1 :class="['thin', 'italic', flag?'active':'']">1111</h1> (3)在数组中使用对象来代替三元表达式
<h1 :class="['thin', 'italic', {'active':flag} ]">1111</h1>
例子：
<h1 :class="classObj">11111</h1> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
</script>
2、vue中使用style
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>
三、事件修饰符
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 添加事件侦听器时使用事件捕获模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
使用例子
<!-- 使用.stop 阻止冒泡（阻止上级所有层的事件）仅son -->
<div class="father" @click="father">
<div class="son" @click.stop="son"></div>
</div>
四、v-for与v-if优先级
当它们处于同一节点，v-for 的优先级比 v-if 更高。
Vue简介与基础的更多相关文章
- Vue.js应用基础
声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...
- APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例
前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...
- OpenStack实践系列①openstack简介及基础环境部署
OpenStack实践系列①openstack简介及基础环境部署 一.OpenStack初探1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运 ...
- 2.JSR简介 - JavaEE基础系列
JSR, Java Specification Request, Java规范请求; 也有的地方翻译为Java规范提案. 在前面的文章 1. Java EE简介 - JavaEE基础系列中, 简要介绍 ...
- 爬虫开发7.scrapy框架简介和基础应用
scrapy框架简介和基础应用阅读量: 1432 scrapy 今日概要 scrapy框架介绍 环境安装 基础使用 今日详情 一.什么是Scrapy? Scrapy是一个为了爬取网站数据,提取结构性数 ...
- Vue.js的基础学习
Vue.js的基础网上很多,这里不记录 开始正式页面的开发 1.页面加载时请求数据 methods: { post() { //发送post请求 this.$http.post('../../ashx ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- Spring简介和基础
Spring介绍 1.什么事Spring? spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. spring的设计模式是单例模式和工厂模式. 2.spring的四大优点 轻量 ...
- 《零成本实现Web自动化测试--基于Selenium》第二章 Selenium简介和基础
第一部分 Selenium简介 1.Selenium 组建 1.1 Selenium-IDE Selenium-IDC是开发Selenium测试案例的集成开发环境.它像FireFox插件一样的工作,支 ...
随机推荐
- DFS——深度优先搜索的一般格式
DFS是一种深度优先的搜索思想,运用递归完成搜索,本质上也算是穷举思想的一类,可以通过剪枝进行优化. DFS的核心是回溯和递归, 如果以迷宫为例,一般会指定走各个方向的顺序(例如先左再上再右再下).从 ...
- hdu6703 线段树+set
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6703 给你一个数组两种操作.操作一是将pos位置的数字加上10000000:操作二是给你个r和k,问你 ...
- 搞定SpringBoot多数据源(3)：参数化变更源
目录 1. 引言 2. 参数化变更源说明 2.1 解决思路 2.2 流程说明 3. 实现参数化变更源 3.1 改造动态数据源 3.1.1 动态数据源添加功能 3.1.2 动态数据源配置 3.2 添加数 ...
- Ceph 之RGW Cache
Overview 缓存是为达到系统快速响应的一项关键技术,Ceph 作为一个复杂的分布式存储系统,有多种.多级缓存存在.缓存按照位置分为: 客户端缓存 服务端缓存 网络中缓存 按照部署方式分为: 单体 ...
- 解决---MISCONF Redis被配置为保存RDB快照，但目前无法在磁盘上存留。可能修改数据集的命令被禁用。请检查Redis日志，了解有关错误的详细信息。
解决---MISCONF Redis被配置为保存RDB快照,但目前无法在磁盘上存留.可能修改数据集的命令被禁用.请检查Redis日志,了解有关错误的详细信息. 出现bug: 在学习celery,将数据 ...
- STM8 ADC1连续模式切换通道干扰问题的解决
初始化ADC1: void Init_ADC(void){ GPIO_Init(GPIOD, (GPIO_Pin_TypeDef)(GPIO_PIN_2|GPIO_PIN_3|GPIO_PIN_5|G ...
- Shell常用命令之read
前言 Linux read命令用于从标准输入读取数值.read 内部命令被用来从标准输入读取单行数据.这个命令可以用来读取键盘输入,当使用重定向的时候,可以读取文件中的一行数据. 格式 read [- ...
- IDEA | Dot Executable: null..No dot executable found
背景 今天想在IDEA上打开.puml后缀的类图,发现IDEA并不能识别,但是正常的时序图却能正常打开,打开类图就报如下错误: 解决方案 经排查,idea的plantuml插件默认只支持时序图,类图还 ...
- 给定区间[-2的31次方, 2的31次方]内的3个整数A、B和C，请判断A+B是否大于C
题目描述给定区间[-2的31次方, 2的31次方]内的3个整数A.B和C,请判断A+B是否大于C. 输入描述:输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一 ...
- Eclipse导入项目提示No projects are found to import解决办法
使用Eclipse导入项目时遇到No projects are found to import提示的解决办法. 这是因为导入的文件里面缺少两个文件:.classpath.project 在这里三种方案 ...