首页 > 代码库 > Note ---- About Vue.js
Note ---- About Vue.js
demo1
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello vuejs</title>
<script src="http://www.mamicode.com/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el:‘#app‘,
data: {
message:‘Hello World!‘
}
});
</script>
</body>
</html>
demo2
[html] view plain copy
<div id="app">
<p>{{ message }}</p>
<!--不变化-->
<p>{{* message}}</p>
<!-- 字符串连接 -->
<p>{{ message + ‘官网地址：www.qq.com‘ }}</p>
<!-- 字符串反转 -->
<p>{{ message.split(‘‘).reverse().join(‘‘) }}</p>
<input v-model="message">
</div>
<script src="http://www.mamicode.com/app.js"></script>
[html] view plain copy
//app.js
new Vue({
el: ‘#app‘,
data: {
message: ‘Hello World!‘
}
})
demo3 列表输出
[html] view plain copy
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
todos: [
{ text: ‘1‘ },
{ text: ‘2‘ },
{ text: ‘3‘ }
]
}
})
</script>
demo4 多维数组
[html] view plain copy
<div id="app">
<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
<script>
var example2 = new Vue({
el: ‘#example-2‘,
data: {
parentMessage: ‘hello‘,
items: [
{ message: ‘周杰伦‘ },
{ message: ‘彭于晏‘ }
]
}
})
</script>
demo5 条件判断
[html] view plain copy
<div id="app">
<div v-if="Math.random() > 0.5">
随机数大于 0.5
</div>
<div v-else>
随机数不大于 0.5
</div>
</div>
<script>
new Vue({
el: ‘#app‘
})
</script>
Note ---- About Vue.js