VUE指令
1.v-model双向绑定数据
<input type="text" v-model="msg"/> {{msg}} <!--取数据-->
<div id="app">
<input v-model='message'>
<p>{{message}}</p>
</div>
<script>
var obj = {
message: 'hello vue.js'
}
new Vue({
el: '#app',
data: obj
})
</script>
2.v-for循环
<div id="box">
<ul>
<li v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#box',
data() {
return {
//rr:['module','views','controlle','aaaaa']
arr: [
{ "name": "xiaohong1", "age": 12 },
{ "name": "xiaohong2", "age": 12 },
{ "name": "xiaohong3", "age": 12 },
{ "name": "xiaohong4", "age": 12 }
]
}
}
})
或者
<div id="box01">
<p v-for="item in arr">{{item}}</p>
</div>
<script>
new Vue({
el: '#box01',
data() {
return { arr: ['a', 'b', 'c', 'd'] }
}
})
</script>
3.v-show 显示与隐藏
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
4.v-if显示与隐藏 (dom元素的插入与删除)
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
5.v-else
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
6.v-else-if
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
关于v-if,v-else,v-else-if的区别,请参考 https://www.jianshu.com/p/8ecde5953465
7.v-bind,响应被绑定HTML的属性
<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">点击</a>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"1、v-model.html"
}
}
})
</script>
8.v-on 事件
<div id="box">
<!-- v-on -->
<button v-on:click="say">按钮</button>
<!--<button @click="say">按钮</button>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>
9.v-text读取文本不能读取html标签
<div id="box">
<div v-text="msg"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"11111"
}
},
methods: {
say() {
alert(111);
}
}
})
</script>
10.v-html 能读取html标签
<div id="box">
<p v-text="msg"></p>
<p>{{msg}}</p>
<p v-html="msg"></p>
<p v-text="'今天是'+year+'年'+month+'月'"></p>
<p>今天是{{year}}年{{month}}月</p>
<p>
<span>姓名:{{person.name}}</span>
<span>年龄:{{person.age}}</span>
<span>性别:{{person.sex}}</span>
</p>
</div>
<script>
new Vue({
el:'#box',
data:{
msg:'<span>你好吗?</span>',
year:new Date().getFullYear(),
month:new Date().getMonth()+1,
person:{
name:'小明',
age:18,
sex:'男'
}
}
})
</script>
v-text与v-html的区别:
v-text只会将内容以纯文本的方式输出;v-html会将HTML代码解析后在输出
11.v-class 类名
<style>
.box{
width: 400px;
height: 100px;
padding: 20px;
}
.active {
background: #EF5656;
}
.fontColor {
color: #F9F9F9;
}
</style>
<div id="example">
<input type="checkbox" v-model="isShow" name="font"><label for="font">调整字体颜色-白色字体</label>
<div class="box" v-bind:class="{'active':isActive,'fontColor':isShow}">
表示 active 这个 class 是否存在将取决于数据属性 isActive 的 值。
</div>
</div>
<script>
new Vue({
el: '#example',
data: {
isActive: true,
isShow: false
}
})
</script>
v-style 与v-class用法大致一样
总结
v-model 数据绑定 data 返回对象用 return v-for 循环 格式 v-for="字段名 in(of) 数组json" v-show 显示 隐藏 传递的值为布尔值 true false 默认为false v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind 动态绑定 作用: 及时对页面的数据进行更改 v-on 绑定事件 函数必须写在methods里面 @click 快捷方法 v-text 解析文本 v-html 解析html标签 v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三目型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
文章出处:https://www.cnblogs.com/calledspeed001/p/7096755.html
更多内容可借鉴:https://www.jianshu.com/p/98dfa4c6389c
https://www.cnblogs.com/liuchuanfeng/p/6742631.html