vue
中的指令vue
中如果需要在html
标签的“内容区域”中表现数据,就可以使用**{{}}双花括号**,这个技术称为插值表达式
语法
:
<标签> {{ 表达式 }} 标签>
表达式:变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等
使用示例:
<body>
<div id="app">
<p>{{ city }}p>
<p>{{ people }}p>
<p>{{ 300 }}p>
<p>{{ people+400 }}p>
<p>{{ people>1000 }}p>
<p>{{ people>1000 && city==='北京' }}p>
<p>{{ people>1000 ? '超级城市' : '大城市' }}p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
// delimiters:['${','}$'],
el: '#app',
data: {
city: '北京',
people: 2000
}
})
script>
body>
如果{{}}使用中有冲突,想更换为其他标记,可以这样:
delimiters:['${','}$'] // 标记符号变为${ }$了
使用要点
:
javascript
表达式,不能设置复杂表达式(例如for循环)html
标签的内容区域;不能用在其他地方{{ msg}}、{{msg }}、{{ msg }}
等都可以,为了美观,表达式左右各一个空格即可。v-text与{{}}的作用是一样的,都是操控 标签的内容区域信息
语法
:
<标签 v-text="表达式"> 标签>
注意
:
使用示例:
<body>
<div id="app">
<p>{{ city }}87p>
<p v-text="city">87p>
<p v-text="people">{{city}}p>
<p v-text="300">p>
<p v-text="people+400">p>
<p v-text="people>1000">p>
<p v-text="people>1000 && city==='北京'">p>
<p v-text="people>1000 ? '超级城市' : '大城市'">p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
// delimiters:['$','#'],
el: '#app',
data: {
city: '北京',
people: 2000
}
})
script>
body>
v-text与{{}} 都可以操控 标签 内容区域,但是他们有一点区别
网速非常慢的时候,{{}} 有闪烁问题,而 v-text没有(属性 本身就是不会显示出来的)
什么是闪烁
:
网速非常慢时,{{ }}花括号 等原生内容 在 Vue编译期间 在浏览器短时显示的现象就是闪烁
闪烁是负面的内容,想方设法不要让其出现
出现闪烁的条件
:
解决闪烁:
vue.js
在div容器上边引入示例代码:
<div id="app">
<p>{{ city }}p>
<hr />
<p v-text="city">p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
// delimiters:['$','#'],
el:'#app',
data:{
city: '北京',
people: 2000
}
})
script>
v-html
v-html
与v-text
、{{ }}
的作用一样,都是操控标签的内容区域
语法:
<标签 v-html="表达式"> 标签>
v-html、v-text、{{ }}的异同
:
v-html
对 html
标签 和 普通文本 内容都可以设置显示
v-text、{{ }} 只针对 字符串 起作用,如果数据中有html
标签,那么标签的箭头符号要做字符实体转换,进而使得浏览器上直接"显示箭头"等标签内容,等同于不解析html
标签内容
v-html
和v-text没有闪烁问题
它们都可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用
应用场景:
如果 服务器返回的数据中,包含有HTML标签(例如富文本编辑器内容),就可以使用 v-html
来渲染(v-text和 {{}}都不行)
默认内容
<p>{{score}}默认内容p>
<p v-text="score">默认内容p>
<p v-html="score">默认内容p>
以上三者,v-text
和v-html
标签有默认内容,但是都会被覆盖掉,而 插值表达式 不会覆盖
注意:
v-html
尽量避免使用(除非完全掌控),否则会带来危险(XSS攻击 跨站脚本攻击)v-html
覆盖使用示例:
<div id="app">
<p>
<p>{{ city }}</p>
<p v-text="city"></p>
<p v-html="city"></p>
<p v-html="people"></p> <!--变量-->
<p v-html="300"></p> <!--常量-->
<p v-html="people+400"></p> <!--算术-->
<p v-html="people>1000"></p> <!--比较-->
<p v-html="people>1000 && city==='北京'"></p> <!--逻辑-->
<p v-html="people>1000 ? '超级城市' : '大城市'"></p> <!--三元运算-->
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
// delimiters:['$','#'],
el:'#app',
data:{
city: '北京是一个超级城市',
people: 2000
}
})
</script>
操作标签的属性需要通过 v-bind: 指令
语法:
<标签 v-bind:属性名称="表达式" >标签>
<标签 :属性名称="表达式">标签> // 简易方式设置,推荐使用
注意:
案例:
通过v-bind对img标签的src、width、height属性进行绑定
<body>
<div id="app">
<p>
<img v-bind:src="mysrc" alt="" :width="wh" :height="ht" />
p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el: '#app',
data: {
mysrc: './02.jpg',
wh: 480,
ht: 290
}
})
script>
body>
class属性较比其他属性不一样的地方是,其既可以接收一个值,也可以通过空格分隔接收多个值
例如:
<tag class="a">tag>
<tag class="a b c">tag>
class属性绑定的语法
:
1) 对象方式
<tag :class="{xx:true, xx:false}">tag>
2) 数组方式
<tag :class="['xx','yy','zz']">tag>
提示
:
通过数组方式给class绑定多个值,值如果不是Vue
的 data成员,就需要通过单引号圈选,表明其是普通字符串
案例:
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.a {
color: darkorange;
}
.b {
font-size: 25px;
}
.c {
background-color: cyan;
}
style>
head>
<body>
<div id="app">
<h2>属性绑定h2>
<p :class=" {a:true, b:true, c:true, d:false} ">中国的首都是北京p>
<p :class=" ['a','b','c'] ">北京是中国的首都p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el: '#app',
data: {}
})
script>
body>
html>
通过class绑定多个值,每个值都可以设置css样式
表达式:就是要按照javascript的语法规则设置相关内容
style样式属性较比普通属性也比较特殊,其也可以接收多个值
具体绑定语法:
(1)对象方式
<tag :style="{xx:yy,xx:yy.....}"></tag>
<!--xx:样式名称,yy:样式的值-->
(2)数组方式
<tag :style="[{xx:yy},{xx:yy.....}]"></tag>
<!--根据需要,数组的每个元素都是一个对象,每个对象包含一对或多对css样式-->
提示
:
案例
:
通过数组、对象两种style属性绑定方式,实现如下标签效果
学习Vue课程-style绑定
<div id="app">
<h2>属性绑定h2>
<p :style=" {'color':'blue','fontSize':'25px','background-color':'hotpink'} ">学习Vue课程-style绑定p>
<p :style=" [{'color':'blue','fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定p>
<p :style=" [{'color':'blue'},{'fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定p>
<p :style=" [{'color':'blue'},{'fontSize':'25px'},{'background-color':'hotpink'}] ">学习Vue课程-style绑定p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
// apple:'pingguo'
}
})
script>
通过传统方式也可以操作class或style属性,但是Vue的操控会更加灵活 和 精准,可以针对某一个值进行设置
web端网页应用程序开发,事件是一个不不可或缺的技术
在vue中给元素进行事件绑定,需要通过v-on:指令实现,也使用@符号,@是v-on:的简写,使用更方便
事件类型:
鼠标事件:onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等
键盘事件:onkeyup onkeydown onkeypress 等等
语法
:
<tag v-on:事件类型="事件处理驱动">tag>
<tag @事件类型="事件处理驱动">tag>
<div @click="事件处理驱动">tag>
<script>
var vm new Vue({
el:xx
data:xx,
// 给当前vue实例 声明方法,以供事件调用
methods:{
名称:function(){}
}
})
script>
注意
:
案例
:
定义一个按钮,使得单击后 控制台 可以输出 “hello,你好呀”
<div id="app">
<h2>事件操控h2>
<button v-on:click="say()">说button>
<button @click="say()">说button>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
// apple:'pingguo'
},
// 给Vue实例 声明方法,该方法可以给事件使用
methods:{
// 名称:function(){} // es6简易设置为 名称(){} :function被清除了
say(){
console.log('hello,北京')
}
}
})
script>
vue“单击”事件参数的3种类型:
<div id="app">
<h2>事件操控h2>
<p><button @click="delA(301)">删除Abutton>p>
<p><button @click="delB()">删除Bbutton>p>
<p><button @click="delC">删除Cbutton>p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
// 给Vue实例 声明方法,该方法可以给事件使用
methods:{
delA(id){
console.log('id为'+id+'的商品被删除了') // 301
},
delB(id){
console.log('id为'+id+'的商品被删除了') // undefined
},
delC(id){
console.log('id为'+id+'的商品被删除了') // [object MouseEvent/鼠标事件对象]
}
}
})
script>
千万注意
:
没有()括号情形,由于事件类型不一样,参数所代表的 事件对象 也会不同,请灵活使用
根据业务需要,事件在执行过程中需要对Vue实例的data数据进行操作,通过this关键字实现,
this代表Vue实例对象,并且针对data或methods成员都可以直接进行调用
案例
:
给data声明city成员,值为“铁岭”
设置按钮,使得单击后控制台可以输出“铁岭是一个大城市”
<button @click="getInfo()" >获取数据button>
<script>
var vm = new Vue({
el:'#app',
data:{
address:'铁岭'
},
methods:{
getInfo:function(){
// 通过 this关键字 获得 data区域的数据信息
console.log(this.address+'是一个大城市');
}
}
})
script>
在Vue实例内部包括不限于methods方法中,this关键字 是Vue实例化对象,具体与 new Vue() 是一样的
并且其可以对 data 和 methods成员进行直接访问
可以理解为this和vm是同一个对象的两个不同名字,this === vm
<div id="app">
<h2>事件操控h2>
<p><button @click="say()">说button>p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京',
weather:'snow'
},
// 给Vue实例 声明方法,该方法可以给事件使用
methods:{
say(){
console.log(this) // 是对象,具体是new Vue()的对象,构造器是Vue
// 外部的vm也是Vue实例化对象
// this 和 vm 是同一个Vue实例化对象的两部同步名字而已,它们全等于
console.log(this === vm) // true
// (实例化对象的构造函数 new XXX,XXX就是当前实例化出来对象的构造器)
console.log(this.city)
console.log(this.weather)
console.log(this.say2())
},
say2(){return 1234}
}
})
script>
注意
:
this 与 vm 的指引完全一致,它们可以通过===判断等于(是同一个实体对象的两个不同名字而已)
一般this指向
:
this就是window对象
var age = 20
function getInfo(){
console.log(this) // window
console.log(this.age)
}
getInfo() // 20
this代表调用该方法的当前对象
const tiger = {
name:'东北虎',
act:'猛虎扑食',
say(){
console.log('我的名字是'+this.name+',我的招牌动作是'+this.act)
// this代表tiger对象
}
}
tiger.say()
this代表元素节点对象
<button onclick="this.style.color='red'" />确定button>
注意
:
this在不同情况下代表不同对象,不用强记,通过console.log输出查看便知
具体设置
:
根据es6标准,可以给methods各个方法做简易设置如下:
<script>
var vm = new Vue({
el:'#app',
// 给Vue实例 声明方法,该方法可以给事件使用
methods:{
// 对象成员方法简易设置 方法名称:function(){} 简易设置为: 方法名称(){}
delA(id){
console.log('id为'+id+'的商品被删除了') // 301
},
delB(id){
console.log('id为'+id+'的商品被删除了') // undefined
},
delC(id){
console.log('id为'+id+'的商品被删除了') // [object MouseEvent]
}
}
})
</script>
// delA:function(){} 简易设置为 delA(){}
// delB:function(){} 简易设置为 delB(){}
// delC:function(){} 简易设置为 delC(){}
以后在其他应用中,对象中成员方法都可以把 “:function” 去除,做简易设置,是es6的标准规范
原理
:
es6标准里边规定,对象成员名称 与 值的变量名称 保持一致,就可以做简易设置
// 对象属性简易设置如下:
var name = "xiaoqiang"
var height = 176
var run = function(){
console.log('在跑步')
}
var person = {name:name,height:height,run:run} // 正常创建对象
var person = {name, height, run} // 简便方式创建对象
// 对象成员方法简易设置如下:
var obj = {
// walk:function(){
// console.log('走直线')
// }
//变形
// walk:function walk(){
// console.log('走直线')
// }
// 简易设置为如下:
walk(){
console.log('走直线')
}
}
给一个对象直接声明一个成员方法,也可以简写为如上形式,去除": function"字样
在Vue中有一个很重要的指令,名称为v-model,其被称为双向数据绑定指令,就是Vue实例对数据进行修改,页面会立即感知,相反页面对数据进行修改,Vue内部也会立即感知
v-model是vue中 唯一实现 双向数据绑定 指令
v-bind单向数据绑定,Vue实例修改数据,页面会感知到,相反页面修改数据Vue实例不能感知
v-model双向数据绑定,页面修改数据,Vue实例会感知到,Vue实例修改数据,页面也会感知到
语法
:
<标签 v-model="data成员">标签>
注意
:
v-model是vue中唯一的双向数据绑定指令
v-model只针对value属性可以绑定,因此经常用在form表单标签中,例如input(输入框、单选按钮、复选框)/select(下拉列表)/textarea(文本域),相反div、p标签不能用
v-model只能绑定data成员,不能设置其他表达式,否则错误
例如
v-model=“score+100” 错误
v-model=“120” 错误
v-model=“score” 正确的
v-model绑定的成员需提前在data中声明好
示例代码
:
<div id="app">
<p>{{ city }}p>
<p><input type="text" :value="city">p>
<p><input type="text" v-model="city">p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京'
},
})
script>
v-model对应的city发生变化后,其他的{{ }} 和 :value的值也会发生变化
v-text=“表达式”
v-html=“表达式”
v-bind:src=“表达式”
表达式此情此景有两种意思:
目标
:
知道什么是响应式
v-model数据双向绑定步骤
:
①页面初始加载,vue的数据渲染给div容器
②通过v-model修改数据,修改的信息会直接反馈给vue内部
③vue的数据发生变化,页面上(也包括Vue实例本身)用到该数据的地方会重新编译渲染
2和3 步骤在条件满足情况下会重复执行
响应式
:
vue实例的data数据如果发生变化,那么页面上(或Vue实例内部其他场合)用到的地方会重新编译执行,这样就把更新后的内容显示出来了,这个过程就是“响应式”,即上图的步骤3
如果Vue实例内部对变化的数据有使用,也会同步更新编译执行
注意
:
响应式 是Vue中非常重要的机制,请留意
案例
:
利用 v-model 和 事件绑定 实现 加法计算器案例效果:
<div id="app">
<input type="text" v-model="num1" />
<span>+span>
<input type="text" v-model="num2" />
<button @click="add">=button>
<span>{{ result }}span>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
num1:null,
num2:null,
result:null
},
methods:{
add(){
this.result = Number(this.num1) + Number(this.num2)
}
}
})
script>
提示
:
加法计算器用到的技术点有:v-model + 事件绑定 + 响应式 + this + 数据类型转换为数值的
给input输入框中定义oninput事件,在该事件中把用户输入的信息都给随时获得到,并对data成员进行赋值
data成员变化了,页面上用到的地方就重新渲染,达成简易双向绑定的效果
oninput:是事件,可以随时感知输入框输入的信息
具体设置
:
<div id="app">
<h2>v-model简易原理h2>
<p>{{city}}p>
<p><input type="text" :value="city">p>
<hr />
<p><input type="text" :value="city" @input="city = $event.target.value">p>
<p><input type="text" :value="city" @input="feel">p>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京'
},
// 给Vue实例 声明方法,该方法可以给事件使用
methods:{
feel(evt){
// console.log(evt) // InputEvent输入键盘事件对象
// evt.target: 触发当前事件的元素节点dom对象(类似document.getElementById()的返回结果)
// console.dir(evt.target)
// evt.target.value // 获得输入框当前输入的信息
// console.log(evt.target.value)
// 把输入框已经输入的信息赋予给city
this.city = evt.target.value
}
}
})
script>
结论
:
事件声明没有小括号(),第一个形参就是 事件对象
在元素行内事件驱动中可以直接使用**$event**,其也是事件对象
{{ name }}
注意:
多行文本框中不要使用
{{ name }}
的方式绑定,如果这样就没有双向绑定效果了
绑定一个复选框
遵守协议:<input type="checkbox" v-model="xieyi">
<div>{{ xieyi }}div>
<script>
var vm = new Vue({
el: '#app',
data: {
xieyi: true
}
})
script>
绑定多个复选框
吃饭:
睡觉:
敲代码:
{{ hobby }}
此种方式需要input标签提供value属性
男<input type="radio" name="xingbie" value="男" v-model="sex">
女<input type="radio" name="xingbie" value="女" v-model="sex">
<p>{{sex}}p>
<script>
var vm = new Vue({
el: '#app',
data: {
sex: ''
}
});
script>
<div id="app">
居住城市:
<select v-model="mycity">
<option disabled value="">请选择option>
<option value="B">北京option>
<option value="S">上海option>
<option value="G">广州option>
select>
<span>Selected: {{ mycity }}span>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
mycity: 'S'
}
});
script>
语法
:
<标签 v-for="成员值 in 数组">标签>
<标签 v-for="(成员值,下标) in 数组">标签>
示例
:
<div id="app">
<ul>
<li v-for="item in color">{{item}}li>
ul>
<ul>
<li v-for="(item,k) in color">{{k}}-----{{item}}li>
ul>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
color:['red','yellow','pink']
},
methods:{
}
})
script>
使用v-for指令的html标签,由于遍历机制,本身标签会被创建多份出来
步骤
:
引入vue.js文件
<script src="./vue.js">script>
实例化Vue对象,并通过data声明 brandsList 品牌列表信息
var vm = new Vue({
el:'#app',
data:{
// 品牌数组对象集
brandList:[
{id:10, name:'宝马', ctime:new Date()},
{id:11, name:'奔驰', ctime:new Date()},
{id:12, name:'奥迪', ctime:new Date()},
],
},
}
通过v-for给tr标签遍历展示品牌信息
<tr v-for="(item,k) in brandsList">
<td><input type="checkbox">td>
<td>{{ item.id }}td>
<td>{{ item.name }}td>
<td>{{ item.ctime }}td>
<td><button>删除button>td>
tr>
提示
:
可以在现有的brand.html模板基础上做应用
效果
:
目标
:
实现品牌添加操作
步骤
:
模板代码:
<table>
<tr>
<td>
<input type="text" v-model="newbrand" />
<button @click="add">添加button>
td>
<td><input type="text" placeholder="请输入关键字">td>
tr>
table>
Vue实例代码:
<script>
var vm = new Vue({
el:'#app',
data:{
newbrand:'', // 被添加的新品牌
xu:13, // 已有品牌最大序号信息
// 定义品牌列表信息,数组对象集
brandList:[
{id:10, name:'奔驰', ctime:new Date()},
{id:11, name:'宝马', ctime:new Date()},
{id:12, name:'奥迪', ctime:new Date()}
]
},
methods:{
// 添加品牌
add(){
// 判断如果没有输入品牌这停止添加
if(this.newbrand.trim().length===0){return false}
// 把新品牌做成是对象格式
var obj = {id:this.xu++, name:this.newbrand, ctime:new Date()}
// 把obj通过数组元素形式添加给brandList大数组
// 数组.push(元素)后缀追加 数组.unshift(元素)前置追加
this.brandList.unshift(obj)
// 清除添加好的品牌
this.newbrand = ''
}
}
})
</script>
注意
:
添加新品牌的xu序号,是临时设置的,真实项目中不用维护,数据库会自动生成
在vue中v-for做遍历应用时,都需要与:key一并进行使用
在2.2.0+版本里边,v-for使用的同时必须使用:key,以便vue能准确跟踪每个节点,从而重用和重新排序现有元素,你需要为每个数据项提供一个唯一的、代表当前项目的属性值赋予给key
语法
:
<标签 v-for="" :key="可以代表每个项目的唯一的值">标签>
应用
:
给品牌列表的v-for设置:key使用
<tr v-for="(item,k) in brandsList" :key="item.id">
项目应用中,每个v-for必须结合:key一并使用
注意
: