Vue.js入门笔记 Vue基本指令学习
指令
- 解释：指令 (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-bind:style="[csRed, csBgblue]">hello world</p>
</div><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 属性
本文链接：https://cloud.tencent.com/developer/article/1558564
本文采用CC BY-NC-SA 3.0 Unported协议进行许可，转载请保留此文章链接
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录