我们放了四天假，刚好借此机会，系统的了解一下VUE.JS。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div id="app">
<p>123</p>
</div>
<template id="tpl">
<div>
<p>This is a tmp from template tag. </p>
<span>Hello {{name}}</span>
<span v-once="name">{{name}}</span>
<div v-bind:id="'id-' + id">
your nkow
</div>
<img v-bind:src="avatar"/>
<button v-on:click.stop="alert">alert</button>
{{firstName}}
{{lastName}}
{{fullName}}
{{price}}
<my-component title="myTitle" content="myContent"></my-component>
</div>
</template>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<script>
var Myconponent = Vue.component('my-component', {
props: ['title', 'content'],
data: function() {
return {
desc: '123'
}
},
template: '<div>\
<h1>title: {{title}}</h1> \
<p>content: {{content}}</p> \
<p>desc: {{desc}}</p> \
</div>'
})
var data = {id : 1,
index: 0,
name: 'Vue',
avatar: 'http://www.baidu.com/',
count: [1, 2, 3, 4, 5],
names: ['Vue1.0', 'Vue2.0'],
firstName: "Gavin",
lastName: "CLY",
cents: 100,
items: [
{name: 'Vue1.0', version: '1,0'},
{name: 'Vue1.1', version: '1.0'}
]};
var vm = new Vue({
el: "#app",
template: "#tpl",
data: data,
beforeCreate: function() {
console.log("beforeCreate");
},
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
},
price: {
set: function(newValue) {
this.cents = newValue * 100;
},
get: function() {
return (this.cents/100);
}
}
},
methods: {
alert: function() {
alert(this.id);
}
}
})
</script>
</html>
时间： 2024-09-11 03:47:58