vue基础入门（2.2）
2.2.基础指令
2.2.1.什么是指令
指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="fn">点击</button>
<p v-if="flag">hello nodeing</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
flag: true,
},
methods: {
fn(){
this.flag = !this.flag
}
}
});
</script>
</body>
</html>
上面代码中v-if就是一个指令，用来处理条件判断，根据表达式的值的真假条件渲染元素
2.2.2.常用的指令
1.v-text和v-html
v-text可以将数据文本渲染到标签中，需要注意的是，渲染出来的内容只是文本，并不会解析html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-text="message"></p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: '<h1>hello, nodeing</h1>'
}
});
</script>
</body>
</html>
v-text的功能和这种形式一样
<p v-text="message"></p>
<!-- 两种写法一样 -->
<p>{{message}}</p>
注意：v-text和还是有一点差异的，那就是当vue的实例还没有创建出来的时候，会显示文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-text="message"></p>
<p>{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
setTimeout(() => {
let vm = new Vue({
el: '#app',
data: {
message: 'hello nodeing'
}
});
}, 3000)
</script>
</body>
</html>
v-html和v-text的区别是v-html渲染出来的内容，html标签是会被解析的,把上面代码中的v-text改写成v-html试试
<p v-text="message"></p>
<p >{{message}}</p>
<p v-html="message"></p>
2.v-show
v-show可以根据表达式的值切换css的display属性，决定内容是否显示，需要注意的是，v-show只是单纯的切换css的display属性，内容始终都会被创建出来的，和if条件渲染不同，if条件渲染是会销毁内容的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="fn">点击</button>
<p v-show="flag">{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: '<h1>hello, nodeing</h1>',
flag: false
},
methods:{
fn(){
this.flag = !this.flag
}
}
});
</script>
</body>
</html>
3.v-if、v-else、v-else-if
这几个指令和js语言中的if else类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="fn">点击</button>
<p v-if="num >= 90">非常优秀: {{num}}</p>
<p v-else-if="num>=80">良好:{{num}}</p>
<p v-else-if="num>=70">中等:{{num}}</p>
<p v-else-if="num>=60">及格:{{num}}</p>
<p v-else>不及格:{{num}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
num: 0,
flag: false
},
methods:{
fn(){
this.num =Math.floor( Math.random()*101 )
}
}
});
</script>
</body>
</html>
4.v-for
v-for指令用来做循环渲染，需要使用item in items这种特殊的语法，items表示一个数据源数组，item表示每一个被循环出来的项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul v-for="item in arr">
<li>{{item}}</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [1,2,3,4,5,6]
}
});
</script>
</body>
</html>
注意： v-for是可以打印出数组元素的下标的,需要写成下面这样，第二个参数index就表示下标
<ul v-for="(item, index) in arr">
<li>{{item}}-{{index}}</li>
</ul>
注意2: 对象也是可以被循环的，使用方法和上面一样
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
<!-- 支持第三个参数 索引 -->
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
注意3: 可以控制循环次数
<ul v-for="n in 10">
<li>{{n}}</li>
</ul>
注意4: 数组更新检测,要让数组更新后页面也跟着渲染，那么必须使用vue包含的一组观察数组的变异方法，例如，添加一个数据 必须使用push方法，如果使用this.arr[6] = 7 这种方法是不会触发页面更新的
let vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5, 6],
},
methods: {
fn() {
// this.arr[6] = 7; 使用这种方法添加元素，页面不会更新
this.arr.push(7)
console.log(this.arr)
}
}
});
同理，对数组的其他操作，也需要用相关方法,具体如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
上面这些方法执行后会改变原来数组，这些我们称为变异方法，还有一些方法执行后总是会返回一个新的数组，并不会改变原来数组，这些我们成为非变异方法，对于非变异方法，通常需要用返回的这个新数组，去替换原来的数组，例如：concat
let vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5, 6],
},
methods: {
fn() {
//新数组替换原来的数组，说白了就是要把执行concat后返回的新数组赋值给原来的数组
//这样才会触发页面更新
this.arr = this.arr.concat([9,9,9]);
console.log(this.arr)
}
}
});
注意5: 对象的更新也需要使用具体的方法，如果直接在对象上添加或删除属性，将不会触犯页面更新
let vm = new Vue({
el: '#app',
data: {
obj: {
id: 0,
name: 'xh',
age: 19
},
},
methods: {
fn() {
// this.obj.num = 30; 这样直接添加不会触发页面更新
//$set表示添加属性 $delete 表示删除属性 vm.$delete(this.obj,'id')
vm.$set(this.obj,'num', 30);
}
}
});
5.v-on
v-on用来添加事件，前面我们已经用过很多次了，这个指令可以简写，我们绑定事件可以写成下面这样
<!-- 绑定一个点击事件 -->
<button @click=‘fn’>点击</button>
<!-- 绑定一个鼠标移入事件 -->
<div @mouseover='fn2'>hello</div>
6.v-bind
v-bind用来绑定属性，它也有简写的形式
<!-- 绑定一个href属性 -->
<a v-bind:href="'http://www.baidu.com'">百度一下</a>
<!-- 可以简写成下面的形式 -->
<a :href="'http://www.baidu.com'">百度一下</a>
<!-- 绑定src属性 -->
<img :src="imageSrc" alt="">
<img :src="'images/banner1.jpg'">
7.v-model 可以在表单控件或者组件上创建双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="val" >
<button @click="fn">增加</button>
<p>{{val}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
val: 123
},
methods: {
fn() {
this.val++
}
}
});
</script>
</body>
</html>
8.v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。通俗的说，加了这个指令，元素和它的子元素将不会被编译
<span v-pre>{{ message }}</span>
9.v-cloak
隐藏未编译的Mustache语法标签，直到实例准备完毕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
setTimeout(() => {
let vm = new Vue({
el: '#app',
data: {
message: 'hello nodeing'
}
});
}, 3000)
</script>
</body>
</html>
10.v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">点击</button>
<p v-once>{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hello nodeing'
},
methods:{
fn(){
this.message = 'hello world!!!!'
}
}
});
</script>
</body>
</html>
螺钉课堂视频课程地址：http://edu.nodeing.com
vue基础入门（2.2）的更多相关文章
- vue基础入门（2.1）
2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...
- vue基础入门
Hello World <body> <!-- 在angularJS中用ng-model --> <!-- {{mseeage?message:11}}支持三元表达式 ...
- vue基础入门（4）
4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求 需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...
- vue基础入门（3）
3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...
- vue基础入门（2.3）
2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- Vue基础入门笔记
不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...
- vue基础入门（1）
1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...
- vue 基础入门（一）
app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...
随机推荐
- Java并发编程 (八) J.U.C组件拓展
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.J.U.C-FutureTask-1 FutureTask组件,该组件是JUC中的.但该组件不是 A ...
- Java实现 蓝桥杯 算法提高 歌唱比赛（暴力）
试题 算法提高 歌唱比赛 问题描述 X市正在进行歌唱比赛,请你写一个程序计算得分. 每名选手从1到N编号,每名选手的综合成绩由以下几个部分组成: 1.歌唱得分占70% 2.才艺展示得分占20% 3.观 ...
- Java实现 LeetCode 657 机器人能否返回原点（暴力大法）
657. 机器人能否返回原点 在二维平面上,有一个机器人从原点 (0, 0) 开始.给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束. 移动顺序由字符串表示.字符 move[i ...
- Java实现 LeetCode 258 各位相加
258. 各位相加 给定一个非负整数 num,反复将各个位上的数字相加,直到结果为一位数. 示例: 输入: 38 输出: 2 解释: 各位相加的过程为:3 + 8 = 11, 1 + 1 = 2. 由 ...
- Java实现 蓝桥杯VIP 算法提高 阶乘差
问题描述 给定n和m以及p,保证n>=m,求(n!-m!)对p取余的结果. 输入格式 一行三个正整数n,m,p. 输出格式 一行一个非负整数表示结果. 样例输入 3 2 10 样例输出 4 数据 ...
- java实现指数问题
3^n mod 19 求n次幂,对19取模 ================ (3 * 3) * (3 * 3) * 3 public class A { // 分治 public static in ...
- java实现第九届蓝桥杯整理玩具
整理玩具 小明有一套玩具,一共包含NxM个部件.这些部件摆放在一个包含NxM个小格子的玩具盒中,每个小格子中恰好摆放一个部件. 每一个部件上标记有一个0~9的整数,有可能有多个部件标记相同的整数. 小 ...
- Windows10开启Ubuntu子系统并搭建Docker环境
前言 很早就听说微软有个基于Ubuntu的子系统,一直也没机会尝试一下,之前也只是用VMware安装,但是还要单独安装软件,安装镜像,一点都不fit,所以就瞎折腾下(也是因为最近有空). 搭建Ubun ...
- ModelArts准备工作
说明: 本文是一个ModelArts准备工作文档,适用于初次使用ModelArts的用户.使用ModelArts之前,需要做如下工作:注册华为云账号.完成ModelArts全局配置.以及熟悉OBS相关 ...
- Canvas绘制圆点线段
最近一个小伙遇到一个需求,客户需要绘制圆点样式的线条. 大致效果是这样的: 思路一:计算并使用arc填充 他自己实现了一种思路,然后咨询我有没有更好的思路. 先看看他的思路是如何实现的,大致代码如下: ...