Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<div @click="handleClick">
{{message}}
</div>
<item></item>
</div>
<script type="text/javascript">
Vue.component('item', {
template: '<div>hello item</div>'
})
var vm = new Vue({ // 根实例
el: '#root', // 绑定元素
data: { // 数据
message: "hello world"
},
methods: { // 方法
handleClick: function(){
alert("hello")
}
}
})
</script>
</body>
</html>
Vue实例生命周期函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
// 生命周期函数就是vue实例在某一个时间点会自动执行的函数
var vm = new Vue({
el: '#app',
template: "<div>{{test}}</div>",
data: {
test: "hello world"
},
beforeCreate: function(){
console.log("beforeCreate")
},
created: function(){
console.log("created")
},
beforeMount: function(){
console.log(this.$el)
console.log("beforeMount")
},
mounted: function(){
console.log(this.$el)
console.log("mounted")
},
beforeDestroy: function(){
console.log("beforeDestroy")
},
destroyed: function(){
console.log("destroyed")
},
beforeUpdate:function(){
console.log("beforeUpdate")
},
updated:function(){
console.log("updated")
}
})
</script>
</body>
</html>
Vue模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue模板语法</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 差值表达式 -->
<div>{{name + ' Lee'}} </div>
<!-- v-text 和差值表达式效果相同 -->
<div v-text="name + ' Lee'"></div>
<div v-html="name + ' Lee'"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
name: "Dell"
}
})
</script>
</body>
</html>
Vue计算属性、方法、侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue计算属性、方法、侦听器</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{firstName + " " + lastName}} -->
<!-- 计算属性 -->
<!-- {{fullName}} -->
<!-- {{age}} -->
<!-- 方法 -->
<!-- {{fullName()}} -->
<!-- {{age}} -->
<!-- 侦听器 -->
{{fullName}}
{{age}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName: "Dell",
lastName: "Lee",
fullName: 'Dell Lee',
age: 28
},
// 计算属性
// computed: { // 存在缓存机制，计算的属性无变化时不会重新计算
// fullName: function() {
// console.log("计算了一次")
// return this.firstName + " " + this.lastName
// }
// },
// 方法
// methods:{
// fullName: function(){ // 无缓存机制
// console.log("执行了一次")
// return this.firstName + " " + this.lastName
// }
// },
// 侦听器
watch:{
firstName: function(){
console.log("侦听了一次")
this.fullName = this.firstName + " " + this.lastName
},
lastName: function(){
console.log("侦听了一次")
this.fullName = this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
Vue计算属性的setter和getter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue计算属性的setter和getter</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName: "Dell",
lastName: "Lee",
},
computed: {
fullName: {
get: function(){
return this.firstName + " " + this.lastName
},
set: function(value){
var arr = value.split(" ")
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
</html>
Vue中的样式绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<script type="text/javascript" src="./vue.js"></script>
<style type="text/css">
.activated{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <div @click="handleDivClick"
:class="[activated, activatedOne]"
>
Hello world
</div> -->
<div :style="[styleObj,{fontSize: '20px'}]" @click="handleDivClick">
Hello world
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
styleObj: {
color: ""
}
// activated: "",
// activatedOne: "activated-one"
},
methods:{
// handleDivClick: function(){
// // if(this.activated === "activated"){
// // this.activated = ""
// // }else{
// // this.activated = "activated"
// // }
// this.activated = this.activated === "activated" ?
// "" : "activated"
// }
handleDivClick: function(){
this.styleObj.color = this.styleObj.color === "red" ?
"":"red"
}
}
})
</script>
</body>
</html>
Vue中的条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的条件渲染</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div v-if="show === 'a'" data-test="v-if">This is a</div>
<div v-else-if="show === 'b'" data-test="v-if">This is b</div>
<div v-else>This is others </div> -->
<div v-if="show">
用户名：<input type="" name="" key="username">
</div>
<div v-else>
邮箱名：<input type="" name="" key="password">
</div>
<!-- display: none v-show性能高 -->
<!-- <div v-show="show" data-test="v-show">{{message}}</div> -->
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
show: "a",
message: "Hello world"
},
})
</script>
</body>
</html>
Vue中的列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item of userInfo">
{{item}}
</div>
</div>
<script type="text/javascript">
// push pop shift unshift splice sort reverse
var vm = new Vue({
el: '#app',
data:{
userInfo: [
1,2,3,4
]
},
})
</script>
</body>
</html>
网友评论