vue中常用的指令
想要使用vejs來进行开发，就必须学会vuejs中提供的指令，明白每个指令是什么意思，才能更灵活的让他去显示我们想要的效果。
1、插值表达式
一般在显示文本内容的标签中使用。通过{{ }}包含变量
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id= "app">
<div>我叫{{name}},我喜欢{hobby}},邮箱:{{dataInfo.email)}</div>
<ul>
<li>{{'李杰'}}</li>
<li>{{'李杰' + "土鳖"}}</li>
<li>{{ base + 1 + 1 }}</li>
<li>{{ 1===1 ?"李杰":"alex"}}</li>
</u1>
<ul>
<li>{{ condition?"李杰" :"alex"}}</li>
</ul>
<input type=" button" value="点我" v-on:click="clickMe">
</div>
<script>
var app = new vue({
el: ' #app',
data: {
name :'张顺',
hobby: ' 篮球',
dataInfo: {
id: 1,
email: 'Xxx. com'
},
condition: false ,
base: 1
},
methods:
clickMe: function () {
this.name = "苑日天";
this.condition = true;
this.dataInfo. email = "1145.qq.com" ;
this.base += 100;
}
}
})
</script>
</body>
</html>
2、v-bind
般用于对标签中的属性进行操作。
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.ig {
border: 2px solid red;}
</style>
</head>
<body>
<div id= "app">
<img src="xx.png" class-'c1' />
<img alt="" v-bind:src="imageUr1" v-bind:class="cls">
</div>
<script>
var app = new vue({
el: ' #app',
data: {
imageUr1 :'https://XXXXXX.png',
cls: 'ig',
}
})
</script>
</body>
</html>
v-bind 注意：
简单的格式：属性名=XXX, 例如
<h1 v-bind:class="v1">h1>
<h1 :class="v1">h1>
v-bind 属于单向绑定，js修改->HTML修改
3、v-model
一般用于在交互的表中中使用，例如: input、 select. textarea等。 [双向绑定]
标签中输入的用户名和密码的值变化了，script中的user和pwd变量的值也跟着变化； 如果script中的user和pwd变量的值发生了变化，标签中的值也会跟着变化
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div>
用户名：<input type="text" v-model="user">
div>
<div>
密码：<input type="password" v-model="pwd">
div>
<input type="button" value="登录" v-on:click="clickMe">
<input type="button" value="重置" v-on:click="resetFrom">
<script>
var app = new Vue({
el: '#app',
data: {
user: "",
pwd: "",
},
methods:{
clickMe: function() {
console.log(this.user,this.pwd)
},
resetForm:function (){
this.user="";
this.pwd = "";
}
}
})
script>
body>
html>
4、v-for
用户数据进行循环并展示。
通过v-for循环创建li标签，循环多少次看dataList的长度，li标签里面显示的值就是黛玉，暴雨，宝钗
<body>
<div id="app">
<ul>
<li v-for="item in dataList">{{ item }}}li>
ul>
div>
<script>
var app = new Vue({
el: '#app',
data: {
datalist: ["黛玉","暴雨","宝钗"],
}
})
script>
body>
5、v-on
与事件相关的指令，如
v-on:click
v-on:dblclick
v-on:mouseover
v-on:mouseout
v-on:change
v-on:focus
body>
<div id="app">
<ul>
<li v-on:click="clickMe">点击li>
<li v-on:dblclick="doSomething('双击')">双击li>
<li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开li>
ul>
div>
<script>
var app = new Vue({
el: '#app',
data: {
},
methods:{
clickMe:function (){
alert("点击了")
},
doSomething:function (msg){
console.log(msg);
}
}
})
script>
body>
6、v-if
条件判断
如果条件成立就显示，如果不成立就显示另外的
如下例子，isLogin的是false, 就不显示user的值，而是显示登录
<body>
<div id="app">
<a v-if="isLogin">{{user}}}a>
<a v-else> 登录a>
div>
<script>
var app = new Vue({
el: '#app',
data: {
isLogin: false,
user: "黛玉"
}
})
script>
body>
7、v-show
根据条件显示或隐藏（标签都会渲染到页面）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<h1 v-show="v1">电影h1>
<h1 v-show="!v1">电视剧h1>
div>
<script>
var app = new Vue({
el: '#app',
data: {
v1: false,
}
})
script>
body>
html>
v-if 和v-show 都是根据条件展示，他们的区别是v-if 条件不成立的不会渲染，v-show 条件不成立的也会渲染，只上会加上一个display: none的样式把他隐藏起来了。