抄寫vue框架的第一天??
起步測試實例
<!DOCTYPE?html>
<html?lang="en">
<head>
????<title></title>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1">
????<link?href="css/style.css"?rel="stylesheet">
</head>
<body>
????<script?src="css/vue.js"></script>
????<div?id="app">
????????<p>{{?message?}}</p>
????</div>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
? ? ? ? ? ? //你好vue
????????????????message:?'Hello?Vue.js!'
????????????}
????????})
????</script>
</body>
</html>
起步測試練習2
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title></title>
????<script?src="css/vue.js"></script>
</head>
<body>
????<div?id="vue_det">
????????<h1>site?:?{{site}}</h1>
????????<h1>url?:?{{url}}</h1>
????????<h1>{{details()}}</h1>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?'#vue_det',
????????????data:?{
????????????????site:?"測試練習",
????????????????url:?"www.baidu.com",
????????????????alexa:?"10000"
????????????},
????????????methods:?{
????????????????details:?function()?{
????????????????????return?this.site?+?"-?學的不緊是技術，更是夢想"
????????????????}
????????????},
????????})
????</script>
</body>
</html>
測試模板練習
<!DOCTYPE?html>
<html?lang="en">
<head>
????<title></title>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1">
????<link?href="css/style.css"?rel="stylesheet">
????<script?src="css/vue.js"></script>
</head>
<body>
????<div?id="app">
????????<p>{{message}}</p>
????</div>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????message:?'你好vue.js！'
????????????}
????????})
????</script>
</body>
</html>
條件語句練習
<!DOCTYPE?html>
<html?lang="en">
<head>
????<title></title>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1">
????<link?href="css/style.css"?rel="stylesheet">
????<script?src="css/vue.js"></script>
</head>
<body>
????<div?id="app">
????????<p?v-if="seen">vue:“現(xiàn)在你看到我啦”</p>
????????<template?v-if="ok">
? ? ? ? ? ? <h1>vue練習</h1>
????????????<p>學的不僅是技術，更是夢想?。?！</p>
????????????<P>你好呀vue</P>
????????</template>
????</div>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????seen:?true,
????????????????ok:?true
????????????}
????????})
????</script>
</body>
</html>
