Vue 数据,属性,样式,绑定 + 分支循环
Posted 鲸渔要加油
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 数据,属性,样式,绑定 + 分支循环相关的知识,希望对你有一定的参考价值。
在学习 Vue 的时候尽量多查阅文档
学习目标
◆ 能够说出 Vue 的基本用法
◆ 能够说出 Vue 的模板语法
◆ 能够说出 Vue 的常用属性
◆ 能够基于 Vue 实现需求效果
文章目录
一、Vue
Vue 是一套用于 构建用户界面的渐进式框架
声明式渲染 —— 组件系统 —— 客户端系统 —— 集中式状态管理 —— 项目构建
官网: Vue
使用Vue渲染页面
- el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
- data: 模型数据(值是一个对象)
- 插值表达式:
用于填充数据,也可实现简单的计算
<div class="box1">msg</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
let vm = new Vue(
el: '.box1',
data:
msg: '远近渔'
)
</script>
二、指令
- 就是自定义属性
- 格式: 以 v- 开始
v-cloak 解决闪烁
防止页面加载时出现闪烁问题
<style>
[v-cloak]
display: none;
</style>
<div v-cloak>msg</div>
1. 数据绑定指令
v-text
<div v-text="msg"></div>
- 和 v-cloak 一样用于将数据填充到标签中,但 v-text 没有闪动问题
- 如果数据中有html标签会将html标签一并输出
- 注意: 此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
v-html
<div v-html="msg1"></div>
- 用法和 v-text 相似,但是他可以将HTML片段填充到标签中
- 可能有安全问题, 一般只在可信任内容上使用
v-html
,永不用在用户提交的内容上 - 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出
v-pre
<div v-pre>msgstrht</div>
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
v-once
<div v-once>msg</div>
- 执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
- 如果显示后的信息后续不需要再修改,使用 v-once 可提高性能
2. 双向数据绑定
- 当数据发生变化的时候,视图也就发生变化
- 当视图发生变化的时候,数据也会跟着同步变化
v-model
v-model是一个指令,限制在 <input>、<select>、<textarea>、components
中使用
<input type="text" v-model='msg'>
mvvm
MVVM 把前端的视图层,分为了三部分 Model, View , VM ViewModel
- m model
数据层 Vue 中 数据层 都放在 data 里面 - v view 视图
Vue 中 view 即我们的 HTML 页面 - vm(view-model)控制器将数据和视图层建立联系
vm 即 Vue 的实例就是 vm
v-on
- 用来绑定事件的
- 形式如:
v-on:click
缩写为@click
- 使用
data
中的数据一定要加this
是 Vue 的实例对象
<body>
<div class="box1">
<div v-text="num"></div>
<div>
<button @click="num++">远近渔1</button>
<button @click="a">远近渔2</button>
<button @click="a()">远近渔3</button>
</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
let vm = new Vue(
el: '.box1',
data:
num: 0
,
methods:
a: function ()
// 这里的 this 是 Vue 的实例对象
// 要使用 data 的数据一定要加 this
this.num++
)
</script>
</body>
v-on 事件函数中传入参数
- 如果事件直接绑定函数名称,就是不加括号,那么 默认会传递事件对象 作为事件函数的 第一个参数
- 如果事件绑定函数调用,就是加括号传参,那么 事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是
$event
<body>
<div class="box1">
<div v-text="num"></div>
<div>
<button @click="a1">远近渔1</button>
<button @click="a2(123,321,$event)">远近渔2</button>
</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
let vm = new Vue(
el: '.box1',
data:
num: 0
,
methods:
a1: function (e)
console.log(e.target.innerHTML)
this.num++
,
a2: function (ppp, ooo, e)
console.log(ppp, ooo)
console.log(e.target.innerHTML)
this.num++
)
</script>
</body>
事件修饰符
- 在事件处理程序中调用
event.preventDefault()
或event.stopPropagation()
是非常常见的需求 - Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为
v-on
提供了 事件修饰符 - 修饰符是由点开头的指令后缀来表示的
<!-- 阻止冒泡 -->
<button @click.stop="a2">远近渔1</button>
<!-- 阻止默认行为,阻止了跳转 -->
<a href="http://www.baidu.com" @click.prevent>百度</a>
<!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 -->
<a @click.stop.prevent></a>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div @click.self></div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生
因此,用 v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击
按键修饰符
Vue 允许为 v-on
在监听键盘事件时添加按键修饰符
<input @keyup.13="a1">
<input @keyup.enter="a1">
<input type="text" @keyup.enter.space="a1" >
常用的按键修饰符
.enter enter键
.tab tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc 取消键
.space 空格键
.up 上
.down 下
.left 左
.right 右
自定义按键修饰符别名
在Vue中可以通过 config.keyCodes
自定义按键修饰符别名
规则:修饰符名字是自定义的,但是对应的必须是 event.keycode
值
可以不用定义直接 @keyup.65='a1'
<input type="text" v-model='mima' @keyup.a='a1'>
<script>
Vue.config.keyCodes.a = 65;
</script>
3. 属性绑定
v-bind
v-bind
指令被用来响应地更新 HTML 属性v-bind:href
可以缩写为:href;
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
v-model 底层原理
<body>
<div id="box">
<input type="text" :value="msg" @input='a1'>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue(
el: '#box',
data:
msg: '远近渔'
,
methods:
a1: function (e)
this.msg = e.target.value
)
</script>
</body>
4. 样式绑定
对象绑定
<div :class="aaa: ooo"></div>
如果绑定的是一个对象
键 为对应的类名 值 为对应data中的数据
<body>
<div id="box">
<div :class="aaa: ooo,bbb: ooo"></div>
<button @click='a1'>转换</button>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue(
el: '#box',
data:
ooo: true
,
methods:
a1: function ()
this.ooo = !this.ooo
)
</script>
</body>
数组绑定
<body>
<div id="box">
<div :class="[aaa1,bbb1]"></div>
<button @click='a1'>转换</button>
</div>
<script src="./vue.js"></script>
<script>
let x = true
let vm = new Vue(
el: '#box',
data:
aaa1: 'aaa',
bbb1: 'bbb'
,
methods:
a1: function ()
this.aaa1 = ''
this.bbb1 = ''
)
</script>
</body>
绑定对象和绑定数组
- 绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是 data 中的数据
- 对象绑定可以和数组绑定结合使用
- class 绑定的值可以简化操作
- 默认的 class 会保留
<body>
<div id="box">
<div :class="[aaa1,bbb1,ccc: ccc]">远近渔</div>
<div :class="abc">远近渔</div>
<div :class="obj">远近渔</div>
<button @click='a1'>转换</button>
</div>
<script src="./vue.js"></script>
<script>
let x = true
let vm = new Vue(
el: '#box',
data:
aaa1: 'aaa',
bbb1: 'bbb',
ccc: true,
abc: ['aaa', 'bbb'],
obj:
aaa: true,
bbb: true
,
methods:
a1: function ()
this.ccc = !this.ccc
)
</script>
</body>
绑定style
数组绑定的话相同的会被覆盖,没有的会增加
<div v-bind:style="styleObject">绑定样式对象</div>
<div v-bind:style=" color: activeColor, fontSize: fontSize,background:'red' ">内联样式</div>
<!--数组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>
三、分支循环结构
1. 分支结构
- v-if
- v-else
- v-else-if
这个是设置元样式是否 渲染
<div id="box">
<div v-if='a>=90'>优</div>
<div v-else-if='a<90&&a>=70'>良</div>
<div v-else>差</div>
</div>
- v-show
这个是设置元素样式是否 显示
<div v-show='flag'></div>
- v-show本质就是标签display设置为none,控制隐藏
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点 - v-if是动态的向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
2. 循环结构
v-for
- 不推荐同时使用
v-if
和v-for
- 当
v-if
与v-for
一起使用时,v-for
具有比v-if
更高的优先级
遍历数组
<li v-for='(item,index) in a'>i</li>
每一项 索引
遍历对象
<li v-for='(value,key,index) in obj'>i</li>
值 键 索引
v-if 和 v-for 结合使用
<li v-if='v===12' v-for='(v,k,i) in obj'>i</li>
值为12才会渲染
<body>
<div id="box">
<div>列表</div>
<ul>
<li v-for='i in a'>i</li>
<li v-for='(i,n) in a'>n---i</li>
</ul>
Vue模板语法
(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过滤器