一个学习vue的例子
<template><div class="hello">
<h1>{{ msg }}</h1>
<label for="r1">下载后删除</label><input type="checkbox" v-model="use" id="r1">
<div v-bind:class="{'class1': use}">
<h1>site : {{site}}</h1>
</div>
<h1>url : {{url}}</h1>
<h1>Alexa : {{book}}</h1>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<p id="demo">这是一个段落</p>
<button id="demo" type="button" onclick="document.getElementById('demo').innerHTML=Date()">显示日期</button>
<pre><a v-bind:href="url">edgexfoundry社区</a></pre>
<a v-on:click="doSomething">点这里</a>
<form v-on:submit.prevent="onSubmit"></form>
<p>{{ message }}</p>
<button v-on:click= "reverseMessage" >反转字符串</button>
<template v-if="ok">
<h1>学些东西</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
<li v-for= "site in sites" :key="site.id">
{{ site.name }}
</li>
</template>
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
<ul>
<li v-for="value in meizhou" :key="value.id">
{{ value }}
</li>
<br>
<br>
<li v-for="(value, key, index) in object" :key="value.id">
{{ index }}. {{ key }} : {{ value }}
</li>
<li v-for="(value, key) in meizhou" :key="value.id">
{{ key }} : {{ value }}
</li>
</ul>
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage1 }}</p>
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
<p id="info"></p>
</div>
</template>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<script type="text/javascript">
import Vue from 'vue'
var data = {site: '菜鸟教程', url: 'www.runoob.com', alexa: 10000}
var vm = new Vue({
el: '#hello',
data: data
})
export default {
name: 'hello',
data () {
return {
site: '菜鸟教程',
msg: '圣诞节快乐！',
url: 'https://edgexfoundry.club/',
book: 'turing',
use: false,
ok: true,
message: 'RUNOOB',
id: 1,
seen: true,
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
],
meizhou: {
name: '厄瓜多尔',
url: 'http://www.runoob.com',
slogan: '乌拉圭！'
},
kilometers: 0,
meters: 0
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessage1: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
watch: {
kilometers: function (val) {
// document.getElementById('info').innerHTML = '修改前值为: ' + this.kilometers + '，修改后值为: ' + val
this.kilometers = val
this.meters = this.kilometers * 1000
},
meters: function (val) {
// document.getElementById('info').innerHTML = '修改前值为: ' + this.kilometers + '，修改后值为: ' + val / 1000
this.kilometers = val / 1000
this.meters = val
}
}
}
document.write(data.alexa === 10000)
vm.site = 'Runoob'
document.write(data.site + '<br>') // Runoob
document.write(vm.$data === data) // true
document.write('<br>')
document.write(vm.$el === document.getElementById('hello'))
// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
vue.输入字符并反转显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<textarea placeholder="请输入记录评语..." v-model="message">
</textarea>
<p>{{content}}</p>
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2 }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
content: '',
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
页:
[1]