Vue.js入门笔记 Vue基本指令学习
- 2019 年 12 月 24 日
- 笔记
指令
- 解释：指令 (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 属性
