<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../js/vue.min.js"></script>
<link rel="stylesheet" href="../css/css1.css">
<title> 1-vue基础 -- hello world </title>
</head>
<body>
<h1 id="h1">hello vue.js</h1>
<div id="app">
{{message}}
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
</html>
image.png
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
},
beforeCreate:function () {
console.log("vue beforeCreate....")
},
created:function () {
console.log("vue created...")
},
beforeMount:function () {
console.log("vue beforeMount...")
},
mounted:function () {
console.log("vue mounted ....")
},
beforeUpdate:function () {
console.log("vue beforeUpdate...")
},
updated:function () {
console.log("vue updated ...")
},
beforeDestroy:function () {
console.log("vue beforeDestroy...")
},
destroyed:function () {
console.log("vue destroyed....")
}
})
</script>
控制台打印结果：（PS：注意拼写错误）
image.png
生命周期图：（很形象）
image.png
Vue.js 允许自定义过滤器：
<h1 id="h1">hello vue.js</h1>
<div id="app">
{{message|capitalize}}
</div>
var app = new Vue({
el:'#app',
data:{
message:'abcdefg'
},
filters:{
capitalize:function (value) {
if (!value){
return ''
}else {
value = value.toString();
return value.charAt(0).toUpperCase()+value.slice(1);
}
}
}
})
image.png
缩写：
v-bind
<div v-bind:href="url"></div>
<div :href="url"></div>
v-on
<div v-on:click="doit"></div>
<div @click="doit"></div>
计算属性：
<div id="eg">
<p>old:{{message}}</p>
<p>computed:{{reversedMessage}}</p>
</div>
var vm = new Vue({
el:'#eg',
data:{
message:'hello'
},
computed:{
reversedMessage:function () {
return this.message.split('').reverse().join('')
}
}
})
image.png
