编译器：visual studio code
Hello vue.js World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js! World'
}
})
</script>
</body>
</html>列表v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>列表</h3>
<div v-if="seen">2020.1.7</div>
<ol>
<li v-for="game in games">{{ game.title}} / {{game.price}}元</li>
</ol>
</div>
<script>
var myApp = new Vue({
el: '#app',
data: {
seen: false,
games:[{title:'薯片',price:10},{title:'可乐',price:3},{title:'酸奶',price:7},],
},
});
</script>
</body>
</html>输入v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<p>最爱吃的食物是：{{food}}</p>
<input v-model="food">
</div>
<script>
var myApp = new Vue({
el: '#app',
data: {
food:'可乐'
},
});
</script>
</body>
</html>按钮v-on
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<p>最爱吃的食物是：{{food}}</p>
<button v-on:click="btnClick('薯片')">薯片</button>
<button v-on:click="btnClick('可乐')">可乐</button>
<button @click="btnClick('酸奶')">酸奶</button>
</div>
<script>
var myApp = new Vue({
el: '#app',
data: {
food:'jj'
},
methods:{
btnClick:function(fname){
this.food=fname;
},
},
});
</script>
</body>
</html>组件component
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<ol>
<game-item v-for="item in games" v-bind:game="item"></game-item>
</ol>
</div>
<script>
Vue.component('game-item',
{props:['game'],
template:'<li>{{ game.title}}</li>'
});
var myApp = new Vue({
el: '#app',
data: {
games:[
{title:"aa"},
{title:'bb'}
]
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
