Vue从入门到放弃（一）——指令篇
文章目录
- 1.v-if/v-else和v-show
- 1.1 v-if
- 1.2v-show
- 1.3区别
- 2.v-for
- 2.1遍历数组
- 2.2遍历对象
- 3.v-text和v-html
- 3.1v-text
- 3.2v-html
- 4.v-on
- 5.v-model
- 5.1绑定输入框
- 5.2绑定文本域
- 5.3绑定单选框
- 5.4绑定多选框
- 5.5绑定下拉框
- 6.v-bind
- 6.1绑定style
- 7.其他内部指令
1.v-if/v-else和v-show
1.1 v-if
常和v-else连用，v-if：跟true，则这个dom被渲染，否则就渲染else
body>
<div id="app">
<p v-if="isOk">v-if为true就显示</p>//这一行显示
<p v-else>v-else显示的情况</p>//这一行不显示
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isOk:'true'
}
})
</script>
</body>
1
1.2v-show
让dom节点显示，实际上是改变display属性
我是使用v-show指令的
1.3区别
- v-if用来判断是否加载，在需要的时候再让服务器加载，减轻服务器压力
- v-show调整css display属性，可以让客户端操作更加流程
2.v-for
v-for主要用来遍历，可以渲染列表，常用在标签，标签
2.1遍历数组
<div id="app">
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[1,2,6,32,65,8]
}
})
</script>
- 也可以写成
(item,index) in items其中index是索引 - 给数组排序
<div id="app">
<ul>
<li v-for="item in sortItem">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[1,2,6,32,65,8]
},
computed: {
sortItem:function(){
return this.items.sort(paixu)//这里传入自己定义的排序方法
}
}
}
);
function paixu(a,b){//自己定义的排序方法
return a-b;
}
</script>
2.2遍历对象
- 对象循环输出
<body>
<div id="app">
<ul>
<li v-for="student in students">{{student}}</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
students:[
{name:'宫崎英高',age:34},
{name:'尾田',age:55},
{name:'jojo',age:12},
{name:'路德维希',age:89},
{name:'劳伦斯',age:3},
]
}
}
);
</script>
</body>
显示：
{ "name": "宫崎英高", "age": 34 }
{ "name": "尾田", "age": 55 }
{ "name": "jojo", "age": 12 }
{ "name": "路德维希", "age": 89 }
{ "name": "劳伦斯", "age": 3 }
3.v-text和v-html
3.1v-text
有时候网速也比慢，或者js出错时，会出现显示{{message}}这种情况
- v-text就是解决这个问题的
3.2v-html
- 如果message中是html样式，则{{message}}会把标签也显示出来
- v-html会将其中的标签解释出来
{{message}}
4.v-on
-
监听DOM事件
比如：点击按钮，实现数字自动加1，此时监听鼠标点击事件
v-on：click可以简写成@click
<body>
<div id="app">
<p>{{count}}</p>
<button v-on:click="add">点我加1</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count: 10
},
methods: {
add: function () {
this.count++
}
}
})
</script>
</body>
-
也可以监听键盘事件：比如点击enter键
代码实现了点击回车，数字自动加1
<body>
<div id="app">
<p>{{count}}</p>
<input type="text" v-on:keyup.enter="add">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count: 10
},
methods: {
add: function () {
this.count++
}
}
})
</script>
</body>
5.v-model
5.1绑定输入框
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'very well good hunter'
}
})
</script>
</body>
修改data里的message，输入框也会随之改变；相反的，修改输入框内的信息，data里的message也会随之改变。这就是v-model双向绑定的作用
5.2绑定文本域
<body>
<div id="app">
<p>{{message}}</p>
<textarea v-model="message"></textarea>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'very well good hunter'
}
})
</script>
</body>
5.3绑定单选框
<body>
<div id="app">
<input type="radio" name="gender" value="man" v-model="picked">男
<input type="radio" name="gender" value="female" v-model="picked">女
你选择的是：{{picked}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>
单选框中name属性将多个选项设置进一组，value为你选择后的值
5.4绑定多选框
<body>
<div id="app">
<input type="checkbox" id="game" value="bloodborne" v-model="picked">血源诅咒
<input type="checkbox" id="game" value="monster hunter" v-model="picked">怪物猎人
<input type="checkbox" id="game" value="dark souls" v-model="picked">黑暗之魂
你选择的是：{{picked}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
picked: []
}
})
</script>
</body>
5.5绑定下拉框
<body>
<div id="app">
<select v-model="picked">
<option value="请选择" disabled></option>
<option v-for="game in games">{{game}}</option>
</select>
你选择的是：{{picked}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
picked: [],
games: ['黑暗之魂', '怪物猎人', '血源诅咒']
}
})
</script>
</body>
6.v-bind
6.1绑定style
将Vue结构体中的data与标签的属性绑定，可以使标签的属性动态变化
<body>
<div id="app">
<div v-bind:style="styleColor">v-bind绑定style</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
styleColor: {
color: 'green'
}
}
})
</script>
</body>
7.其他内部指令
- v-pre :在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<body>
<div id="app">
<p v-pre>{{message}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello vue'
}
})
</script>
</body>
显示{{message}}，而不是hello vue
- v-once：只对dom渲染一次，后面视为静态资源
- v-cloak：在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，