VUE的常用方法跟标签【初学者】
一,导入vue的js包
二,在
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
</script>
【1】.内容渲染指令(全部应用于,html的标签中间)
1.v-text 例子 :
<p v-text="值(在vue函数中的对应的值,即上述函数中,data里面的数据)"></p>
2,{{(值)}} 例子:
<p >{{值}}</p>
3,v-html可以在html代码中间插入,对应html格式的数据 例子:
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>html例子</h1>'
}
})
</script>
【2】.属性绑定指令
1.v-bind指令[单向的绑定] 对属性的值进行修改 绑定数据,数据渲染网页 例子:
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
2.v-model双向绑定指令,对应在可以修改,对应函数中的值也会被改变,全局会受影响
div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
<input v-model="message">
相当于
<input v-model:value="message">
【3】,Vue条件语句
1,v-if语句,相当于if语句,如果条件不成立,其代码不会在html中出现与其对应的是v-show v-show条件不成立时,只是把显示给display但代码仍存在于html代码中 例子:
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<p>v-if的判定</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
2.v-else语句 与v-if连用 跟java中的异曲同工 例子:
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
3,v-else-if语句 例子:
<div id="app">
<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>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
【4】Vue循环语句
1,v-for语句 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 例子:
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
其中也可以有索引的写法 例子:
<div id="app">
<ol>
<li v-for="(site,index) in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>