了解一下，其它的什么SASS,COMPASS,WEBPACK,VUE.JS都看看，了解一下前端开发的一些知识点吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
<div id="app-3">
<p v-if="seen"> Now you see me</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p> {{ message }} </p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<div id="app-6">
<p> {{message}}</p>
<input v-model="message">
</div>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
});
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: 'Learn JavaScript' },
{text: 'Learn Vue' },
{text: 'Build something awesome' }
]
}
});
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
});
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Wahtever else human eat'}
]
}
});
</script>
</body>
</html>
时间： 2024-09-30 21:41:22