Vue基础（1）
Vue简介
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动
Vue基础
通过下面代码引用vue:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<!-- 引用vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</html>
编写一个简单Vue程序步骤:
- 导入开发版本的vue.js
- 创建Vue实例对象，设置el属性和data属性
- 实际简洁的模板把数据渲染到页面上
el:挂载点
用于选中需要被vue渲染的部分，如: el:"#box"，样只会选中id为box中的内容进行渲染，" # "表示id选择器，el也可以选中其它css选择器，如: el:".red" 等等..
data: 状态|数据
可以在data里面定义一些数据变量(数组，对象，...)
插值:
{{ 10+20 }} 将数据渲染到页面元素中，不解析html标签
v-html 将数据渲染到页面元素中，可以解析html标签
vue指令
v-show
值为bool类型，为true表示显示元素，false表示隐藏元素(display:none)
v-if
值为bool类型，为true表示创建元素，false表示删除元素
v-bind
绑定属性，如 <div v-bind:class="red"></div>，通过v-bind就可以将div的类样式设置为red， <img v-bind:src="mySrc" />。
动态绑定class:
三目写法:<div v-bind:class=" 2>1? 'red' : 'yellow' "></div> 如果前面条件为true就应用red样式,false则应用yellow样式。
对象写法:
<div v-bind:class=" classobj "></div> html的内容
data:{ js内容,data数据
classobj:{
red:true,
yellow: false,
aaa:true
}
}
上面div将会同时应用red和aaa两个类样式，如果想不应用red样式，可以将classobj.red的值设置为false,该样式将不被应用。
数组写法:
<div :class=" classarr "></div> html的内容，缩写的方式
data:{ js内容,data数据
classarr:["red", "a", "b" ] //数组中存放类样式名
}
在数组中存在的样式都将被应用，通过数组的 pop()方法删除数组元素（删除样式），push()方法添加数组元素（添加样式）
v-bind可以简写为" : "号，如 <div :class="red"></div>，用 : 号代替b-bind
绑定style属性：
三目写法: <div :style=" 'background:'+ (1>2? 'red' : 'yellow' ) "></div>
这里注意，如果样式是background-color的话要写成backgroundColor才行，所有样式中 - 的都要这样写
对象写法:
<div :style=" styleobj "></div> html的内容
data:{ js内容,data数据
styleobj :{
background: "red",
fontSize: "30px", //对象属性就是需要应用的样式
}
}
数组写法:
<div :class=" stylearr "></div> html的内容，缩写的方式
data:{ js内容,data数据
stylearr:[] //数组
}
添加样式 stylearr.push({ backgroundColor:"red" }) 通过这种形式添加样式，删除样式还是通过操作数组就行
条件渲染：
v-if 和 v-else 的使用，当v-if中的条件为假的时候显示v-else里面的内容
这个有什么用呢？比如：有些购物软件，当你购物车没有添加商品是会显示 购物车空空如也，添加商品后再展示商品。这种就可以用v-if和v-else来实现
代码:
html内容:
<div id="box">
<div v-if="goods.length">
<h2>商品列表</h2>
<ul>
<li v-for="item in goods">{{ item }}</li>
</ul> <button type="button" v-on:click="goods.pop()">删除一个商品</button>
</div> <h2 v-else>商品空空如也!</h2>
</div>
js内容:
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
goods:["苹果", "鼠标"]
}
})
</script>
数组中有元素时显示v-if的内容，单击删除按钮会从数组中删除一个元素，当数组中元素被删除时将显示v-else的内容
v-else-if 有v-if、v-else那肯定少不了v-else-if
v-else-if使用方式跟v-else使用差不多，如果v-if为false继续判断v-else-if
代码演示:
<div id="box">
<div v-if="num === 1">1</div>
<div v-else-if="num == 2">2</div>
<div v-else>3</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
num:2
}
})
</script>
只有条件 num===2 是为true的 所以页面显示的将是 2 ，还是挺好理解的
v-for
语法:
<li v-for="变量名 in 数组或对象">{{ 变量名 }}</li>
in 可以改成 of 也是可以使用的
<li v-for="(变量名, index) in 数组或对象">{{ 变量名 }}</li>
index表示数组的索引
遍历数组或对象中的元素进行展示，一般配合列表使用
代码:
<div id="box">
<h2>遍历数组内容进行展示</h2>
<ol>
<li v-for="item in datalist">{{ item }}</li>
</ol> <h2>遍历对象内容进行展示</h2>
<ul>
<li v-for="each in dataobj">{{ each }}</li>
</ul>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
datalist:["111", "222", "333"], dataobj:{
name:"kk",
age:18,
sex:"男"
}
}
})
</script>
结果:
可以看到列表的数量是取决于数组或对象中的元素数量。
key 在使用v-for的时候可以设置key属性，一般key的值为data.id
跟踪每个节点的身份，从而重用和重新排序现有元素
理想的key值是每项都有的且唯一的id。data.id
数组更新检测
使用一下方法操作数组，可以检测变动
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
filter()、concat()、slice()、map() ,新数组替换旧数组
filter()方法使用:
语法:
新数组 = 旧数组.filter(变量名=>条件)
条件为true才包含在新数组中，如: b = a.filter(item => item>1 ),是有数组a中元素大于1的才会被存放到数组b中
事件处理：
监听事件-直接触发代码
方法事件处理器-写函数
内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象
事件修饰符
按键修饰符
表单绑定
v-model 双向数据绑定
绑定text文本框: <input type="text" v-model="mytext"/>
绑定checkbox多选框: <input type="checkbox" v-model="checkgroup" value="游泳">
checkgroup 是数组类型，并且input标签必须设置value值，多个选择框绑定同一个数组
绑定 radio 单选框: <input type="radio" v-model="picked" value="Java">
picked为字符串类型，选中某一个单选框后会将它value的值给picked，多个选择框绑定同一个变量
v-model修饰符:
v-model.lazy 失去焦点后同步
v-model.number 只同步数字部分
v-model.trim 同步时去除前后空格
Vue基础（1）的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- 刷题[HCTF 2018]WarmUp
解题思路 进入页面之后,一个大大的滑稽. 查看源码 查看源码发现有source.php .打开 发现还有一个hint.php.打开发现 由此可知是代码审计了 解题 代码审计 先看此段代码,大致意思是. ...
- Python-求序列长度和序列长度协议-len() __len__
len() 求序列的长度 print(len("beimenchuixue")) print(len([1, 2, 3])) __len__ 对象中实现这个方法,则 len() 方 ...
- 关于C++的右值引用的一些看法
简介 关于C++中的右值引用的详细可以看这一批博文<从4行代码看右值引用>.那一篇博文详细结合四行简单的代码详细介绍了右值引用的使用方法和一些场景,非常实用. 而本篇博文主要介绍一下我在学 ...
- 085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用
085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用 本文知识点:构造方法调用 说明:因为时间紧张,本人写博客过程中只是 ...
- 048 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 10 案例——阶乘的累加和
048 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 10 案例--阶乘的累加和 本文知识点:通过案例练习嵌套循环应用 案例练习--阶乘的累加和 案例题目 ...
- arduino中SCoop库的简单应用案例
转载:https://www.csdn.net/gather_27/MtTaggzsMDExMS1ibG9n.html arduino中SCoop库的简单应用案例首先这篇文章来在视频https://v ...
- TCP/IP 邮件
原文:TCP/IP 邮件 第一节:TCP/IP 简介 第二节:TCP/IP 寻址 第三节:TCP/IP 协议 第四节:TCP/IP 邮件 电子邮件是 TCP/IP 最重要的应用之一. 你不会用到... ...
- 浅谈Exgcd（扩展欧几里得）
我们已知,求最大公约数的方法: 求A,B两数的最大公约数,递归求解,递归边界是B==0. gcd(a,b)=gcd(b,a%b) 我们进一步来求Ax+By=Gcd(A,B)的解. 尝试套用欧几里得求法 ...
- 55.Qt-将界面程序封装成静态库
1.生成dll 然后选择创建静态链接库: 创建的时候,记得勾选QtGui,并且修改pro文件,添加下面1句(这样就可以创建界面了): 修改staticlib.cpp: #include "s ...
- 实验五 Internet与网络工具的使用
实验五 Internet与网络工具的使用 [实验目的]⑴.FTP服务器的架设和客户端的使用. ⑵.使用云盘和云笔记应用 ⑶.运用QQ的远程协助功能. (4).默认安装foxmail软件,进行邮件的收发 ...