友情提示:此篇文章大约需要阅读 8分钟38秒,不足之处请多指教,感谢您的阅读。 订阅本站
指令
- 解释:指令 (Directives) 是带有
v-
前缀的特殊属性 - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
常用指令
v-text
- 解释:更新元素的 textContent
<h1 v-text="msg"></h1>
v-html
- 解释:更新元素的 innerHTML
<h1 v-html="msg"></h1>
v-bind
- 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
- 语法:
v-bind:title="msg"
- 简写:
:title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
// 2 创建 Vue 的实例对象
var vm = new Vue({
// el 用来指定vue挂载到页面中的元素,值是:选择器
// 理解:用来指定vue管理的HTML区域
el: '#app',
// 数据对象,用来给视图中提供数据的
data: {
url: 'http://www.baidu.com'
}
})
</script>
v-on
- 作用:绑定事件
- 语法:
v-on:click="say"
orv-on:click="say('参数', $event)"
- 简写:
@click="say"
- 说明:绑定的事件从
methods
中获取
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething(“123”)"></a>
<script>
// 2 创建 Vue 的实例对象
var vm = new Vue({
el: '#app',
// methods属性用来给vue实例提供方法(事件)
methods: {
doSomething: function(str) {
//接受参数,并输出
console.log(str);
}
}
})
</script>
事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .captrue 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身(比如说不是子元素)触发的回调
- .once 事件只触发一次
V-Model
- 作用:在表单元素上创建双向数据绑定
- 说明:监听用户的输入事件以更新数据
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
V-Class及V-Style
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind
处理它们:只需要通过表达式计算出字符串结果即可。
- 说明:控制元素class样式,使用v-bind,只需要通过表达式计算出字符串结果即可;
- 表达式类型:字符串、数组、对象。
// 公共样式定义
<style>
.red{
color: red;
}
.font35{
font-size: 35px;
}
.bgblue{
background-color: blue;
}
</style>
<div id="app">
<!-- v-bind:class用法 -->
<!-- 1、class对象语法 -->
<h2 v-bind:class="{ red:isActive, bgnlue:false}">你好么,世界!!</h2>
<hr>
<!-- 2、数组语法 -->
<h2 v-bind:class="[classRed, classBgblue]">你好</h2>
<hr>
<!-- v-bind:style用法 -->
<!-- 1、对象语法 -->
<p v-bind:style = "PClass">hello world</p>
<!-- 2、数组语法 -->
<p v-bin
<script src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el : '#app',
data : {
// v-bind:class 数据绑定
// 1、class对象语法
isActive : true,
isHidden : false,
// 2、数组语法
classRed : 'red',
classBgblue : 'bgblue',
// v-bind:style 数据绑定
// 1、对象语法
PClass : {
color : 'red',
font35 : true,
},
// 2、数组语法
csRed: {
color: 'red',
},
csBgblue: {
bgblue: true,
},
},
methods: {
},
});
</script>
V-for
- 作用:基于源数据多次渲染元素或模板块
<!-- 1、迭代数组 -->
<ul v-for="item in items">
<li>{{ item.message }}</li>
</ul>
<!-- 2、迭代数组中的属性 -->
<ul v-for="(item, i) in items" key="item">
<li>{{ item.message }}-----{{i}}</li>
</ul>
<!-- 3、迭代数字 -->
<ul v-for="i in 10">
<li>这是第{{i}}个标签</li>
</ul>
var vm = new Vue({
el: '#app',
data: {
items: [
{ message: 'a1111111' },
{ message: 'b2222222' },
{ message: 'c3333333' },
]
},
});
v-if 和 v-show
v-if
:根据表达式的值的真假条件,销毁或重建元素v-show
:根据表达式之真假值,切换元素的 display CSS 属性
Vue 指令基本使用大全 for 掘金
文章借鉴
Vue官方教程 for vue.js
发表回复