vue常见指令
| 指令 | 描述 |
|---|---|
| v-text | 和插值一样也是使用vue中的变量，但是默认没有闪缩问题，但是会覆盖原本的内容，插值不会 |
| v-html | 显示HTML的内容 |
| v-bind | Vue提供的属性绑定机制，缩写是 ‘:’ |
| v-on | Vue提供的事件绑定机制，缩写是:’@’ |
v-text
给元素设置设置文本
语法 : 在标签里面 v-text="data里面的数据"
特点 : 直接设置 会覆盖掉标签原本的文本
没办法解析标签
简写方式 {{}}
如果我们要保留标签里面原始的文本 name就必须使用简写方式
开发中 简写方式用的很多 v-text用得比较少
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<!-- 3. Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 相当于jquery中的开发版本 开发中 经常使用 因为出错有提示-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
v-html
在标签内部 v-html= "data中的数据"
可以解析标签 也可以解析文本
标签内部如果说存在原始文本 name就会被覆盖
没有简写形式
相对于v-text 使用的频率不高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>----{{msg}}=====</p>
<p v-text="msg"></p>
<p v-text="msg">*******</p>
<p v-html="msg"></p>
</div>
</body>
</html>
//开发环境版本，包含了有帮助的命令行警告 相当于jquery中的开发版本 开发中 经常使用 因为出错有提示
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"<h3>千与千寻</h3>"
}
})
</script>
v-on
methods 是属于vue实例化对象的属性
给元素绑定事件 v-on:click blur dblclick
简写形式 : @事件名=
注册的事件 后面的函数可以传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击" v-on:click="show">
<!--还可以缩写为 @-->
<input type="button" value="点击" @click="show">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"<h3>千与千寻</h3>"
},
methods:{
show:function(){
alert('宫崎骏')
}
}
})
</script>
</body>
</html>
v-bind
v-bind是 Vue中，提供的用于绑定属性的指令,可简写为":",属性中的内容其实写的是js表达式，可以做类似的处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="提交1" title="提交按钮"><br>
<input type="button" value="提交2" v-bind:title="title">
<!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
<input type="button" value="提交2" :title="title">
<!-- v-bind 中，可以写合法的JS表达式-->
<input type="button" value="提交2" :title="title + ' 千与千寻'">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
title:"title123"
}
})
</script>
</body>
</html>
案例：图片无限循环
<body>
<div id="app">
<img :src="list[index]" alt="">
<br>
<input type="button" value="上一张" @click="pageOn">
<input type="button" value="下一张" @click="pageX">
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 相当于jquery中的开发版本 开发中 经常使用 因为出错有提示-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
index:0,
list:["./imgs/01.png","./imgs/02.png"]
},
methods : {
pageX(){
this.index++;
if(this.index >= this.list.length){
this.index=0;
// this.list[this.index]
}
},
pageOn(){
this.index--;
if(this.index < 0){
this.index = this.list.length-1;
}
}
}
})
</script>
v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>
最终仅显示第二个span的内容
v-cloak
作用：在Vue还没有解析完毕之前 把一些特殊的指令隐藏起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 属性选择器 */
[v-cloak]{
border: 1px solid plum;
display: none;
}
</style>
</head>
<body>
<div id="app">
<img src="./img/left.png" alt="">
<h2 v-cloak>{{info}}</h2>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 jquery.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
info : "千与千寻"
}
})
</script>
v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
//msg,list即使产生改变，也不会重新渲染。
v-show
根据表达式的真假切换元素的display css属性
v-if
根据表达式的真假条件渲染元素
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>v-show控制</h2>
<img src="./img/left.png" v-show="isShow" alt="">
<h2>v-if控制</h2>
<img src="./img/right.png" v-if="isShow" alt="">
<input type="button" value="切换" @click="isShow=!isShow">
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
v-show 后面可以放表达式 根据表达式的值 来控制元素的现实和隐藏 红纸display属性为block或none
v-if 也可以实现这个功能 控制的是元素想页面添加或者删除
如果需要频繁切换 那么就使用v-show
*/
const app = new Vue({
el : "#app",
data : {
isShow : true
}
})
</script>
v-if
v-if：可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
v-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
v-else-if：充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
<div v-if="type==='A'">
A
</div>
<div v-else-if="type==='B'">
B
</div>
<div v-else-if="type==='C'">
C
</div>
<div v-else>
Not A,B,C
</div>
v-for
用v-for指令根据遍历数组来进行渲染
两种渲染方式
<div v-for="(item,index) in items"></div> //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div> //使用of
注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
v-model
双向数据绑定
- 当文本输入框的内容发生改变时 会同步修改绑定的数据
- 如果我们直接修改data里面的值 也会同步修改文本输入框里面的文本
注意点：
1.没有简写形式
2.只有指定的表单元素可以使用（input select textarea）
3.原理 ： 检测用户输入 把输入的值获取到 然后同步更新给页面的元素
<div id="app">
<input v-model="somebody">
<p>hello {{somebody}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
somebody:'小明'
}
})
</script>
v-model修饰符
- .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
<input v-model.lazy="msg">
- .number
自动将用户的输入值转化为数值类型
<input v-model.number="msg">
- .trim
自动过滤用户输入的首尾空格
<input v-model.trim="msg">
4084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
