文章目录
1. 事件处理、以及Vue生命周期函数、事件描述符
1.1 基本用法
事件绑定：v-on:事件名=“函数名或者代码块”
语法：v-on:click 等价于 @click – 简写
<body>
<div id="app">
<p>{{num}}</p>
<button v-on:click="add">增加</button>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
num: 0
},
methods: {
add: function() {
this.num++;
}
},
created: function() {
console.log("vue对象创建成功");
console.log(this);
}
})
</script>
1.2 获取事件对象，阻止默认行为、事件冒泡行为、事件描述符
获取事件对象，实参 $event
传统阻止默认行为：event对象.preventDefault();
<body>
<div id="app">
<p>{{num}}</p>
<a href="http://baidu.com" v-on:click="add($event)">增加</a>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
num: 0
},
methods: {
add: function(e) {
this.num++;
e.preventDefault();
}
}
})
</script>
Vue阻止默认行为：v-on:事件名.prevent="函数名"
<a href="http://baidu.com" v-on:click.prevent="函数名">增加</a>
Vue阻止冒泡行为：v-on:事件名.stop="函数名"
<a href="http://baidu.com" v-on:click.stop="函数名">增加</a>
类似使用属性段来约束事件、元素的某些行为
语法格式：v-on:事件名.事件描述符
2. for循环
2.1 基本数据类型数组的遍历
<body>
<div id="app">
<ul>
<li v-for="num in nums">{{num}}</li>
</ul>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
nums: [1,2,3,4]
}
})
</script>
2.2 对象数组类型的遍历
<body>
<div id="app">
<ul>
<li v-for="student in studnets">姓名：{{student.name}},年龄：{{student.age}}</li>
</ul>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
studnets: [{name:"lrc", age: 18}, {name:"lcj", age: 20}, {name:"yxx", age: 19}]
}
})
</script>
注意：还有一种写法获取数组的小标值
<script>
<ul>
<li v-for="(student,index) in studnets">姓名：{{student.name}},年龄：{{student.age}}, 序号：{{index}}</li>
</ul>
</script>
2.3 对象属性的遍历
<body>
<div id="app">
<ul>
<li v-for="(value,key,index) in student">{{value}} = {{key}}</li>
</ul>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
student: {name:"lrc", age: 18}
}
})
</script>
2.4 数组的特殊遍历set()
vue实例.data内数组属性[index]=’'不能动态修改到页面显示
<body>
<div id="vueBox">
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
<p>{{msg}}</p>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
names: ["lrc", "lcj", "yxx"],
msg:"7978"
},
})
vue.names[2]='直接操纵vue数组属性某个元素不能修改';
</script>
<body>
<div id="vueBox">
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
<p>{{msg}}</p>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
names: ["lrc", "lcj", "yxx"],
msg:"7978"
},
})
Vue.set(vue.names,0,'全局修改');
vue.$set(vue.names, 1, 'vue实例进行修改');
vue.names[2]='直接操纵vue数组属性某个元素不能修改';
vue.msg="非数组元素可以直接操纵属性"
</script>
2.5 对象数据的修改
<script>
vue实例.对象属性名.对象属性="" //-- 不能反应到view，只能反应到model
// model、view同时修改
vue实例.$set(对象属性名, 对象属性, 修改的值)
Vue.set(vue实例.对象属性名, 对象属性, 修改的值)
</script>
3. DOM元素显示
3.1 v-if判断 - 决定元素是否被渲染
3.1.1 单if判断
决定元素是否会被显示
<body>
<div id="app">
<div v-if="isShow" style="border:1px solid black;width:50px;height:50px;" v-on:click="show"></div>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
isShow: true,
},
methods: {
show: function() {
this.isShow = false;
}
}
})
</script>
3.1.2 多if判断 - if-else
注意：v-else必须紧跟在v-if或者v-else-if后面
<body>
<div id="app">
<span v-if="num>0.9">num大于0.9</span>
<span v-else-if="num>0.8">num大于0.8</span>
<span v-else>num小于等于0.8</span>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
num: 0.5
},
})
</script>
等价于 - Java代码
if(num > 0.9) {
}else if ( num > 0.8 ) {
)else {
}
3.1.3 v-for、v-if结合使用
<body>
<div id="vueBox">
<ul>
<li v-for="student in students" v-if="isShow(student)">{{student.name}}:{{student.age}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
students:[{name:'lrc', age:20},{name:'lcj', age:30},{name:'yxx', age:40}]
},
methods: {
isShow: function(student) {
if(student.age >= 30) {
return true;
}else {
return false;
}
}
}
})
</script>
等价于Java伪代码
for( Student student : Students) {
if(student.age > 20 ) { 显示 }
else { 不显示 }
}
3.2 v-show判断 - 决定元素是否被展示display，已经加载
使用CSS属性 display*
注意：事件绑定中写代码段操纵vue的data属性，不需要写this，否则无反应
<body>
<div id="app">
<span style="color:red;" v-show="isShow">你好，世界！</span>
<button v-on:click="isShow = !isShow">显示</button>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
isShow: true,
},
})
</script>
4. DOM元素属性值的绑定 - v-bind
class属性处理
语法：v-bind:属性=“date属性名” 等价于 :属性=“data属性名” *
<head>
<meta charset="UTF-8">
<title>Vue测试</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<style>
.one {
color: red;
}
.two {
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<span v-bind:class="styleClass">你好，世界！</span>
<br>
<span v-bind:class="{one:hasOne, two:hasTwo}">你好，世界！</span>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
styleClass: ["one", "two"],
hasOne: true,
hasTwo: false
},
})
</script>
style属性处理
<body>
<div id="vueBox">
<div v-bind:style="{border:borderStyle, width:widthStyle, height: heightStyle}"></div>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
borderStyle: '1px solid black',
widthStyle: '50px',
heightStyle: '50px'
},
})
</script>
5. 计算vue实例中属性值 - comput
methods与computed的区别，前者无缓存，后者有缓存
由结果可知：
- computed属性的方法在使用时可以不直接声明调用，直接写函数名即可
- methods属性的方法则必须写函数名()进行调用
<body>
<div id="vueBox">
<p>{{new Date().getFullYear()+"年" + (new Date().getMonth()+1) + "月" + new Date().getDate() + "日"}}</p>
<p>{{date.getFullYear()+"年" + (date.getMonth()+1) + "月" + date.getDate() + "日"}}</p>
<p>{{date2()}}</p>
<p>{{date1}}</p>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
date: new Date()
},
methods: {
date2:function() {
var date = this.date;
return date.getFullYear()+"年" + (date.getMonth()+1) + "月" + date.getDate() + "日"
}
},
computed: {
date1:function() {
var date = this.date;
return date.getFullYear()+"年" + (date.getMonth()+1) + "月" + date.getDate() + "日"
}
}
})
</script>
