<!-- Vue.js demo
https://www.runoob.com/vue2/vue-tutorial.html
-->
<div id="vue_det">
<p>{{ message }}</p>
<p>{{details()}}</p>
<!--双大括号支持js计算 -->
<p>{{5+5}}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p><!-- 反转字符串 -->
<!-- 和双大括号一样,可以输出 -->
<p v-html="message"></p>
</div>
<script type="text/javascript">
var data = {//绑定的数据
message: "菜鸟教程" ,
ok : true
//可以添加更多绑定数据
}
var vm = new Vue({
el: '#vue_det', // Dom对象ID
data: data,
methods: {//绑定的方法
details: function() {
return this.message + " - 学的不仅是技术，更是梦想！";
}
}
})
//注意前缀 $
document.write(vm.$data === data) // true
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
<!----------------------------------------------------->
<!-- https://www.runoob.com/try/try.php?filename=vue2-v-bind
v-model 绑定 vue 中的 data.use , 复选框选中 use=true , 不选时 use=false
v-bind 绑定 class , 根据use判断类class1 用还是不用
-->
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
<!-- v-bind绑定了id , 根据 vue 中的$data.id改变 -->
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false ,
id : 1
}
});
</script>
<!----------------------------------------------------->
<!--
指令 :
v-bind 指令被用来响应地更新 HTML 属性
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
v-show 指令来根据条件展示元素
v-for 指令实现循环
v-on 指令，它用于监听 DOM 事件
v-model 指令来实现双向数据绑定
复选框是true,false
文本框等是文本值
-->
<div id="app">
<a v-bind:href="url">菜鸟教程</a>
<!-- v-bind: 缩写 : -->
<a :href="url">菜鸟教程</a>
<p v-if="seen">现在你看到我了</p>
{{#if ok}} <h1>Yes</h1>{{/if}} <!-- Handlebars 模板 -->
<!-- if else ; else if 参考 https://www.runoob.com/try/try.php?filename=vue2-v-else-if-->
<div v-if="Math.random() > 0.5"> Sorry </div><div v-else> Not sorry </div>
<h1 v-show="ok">Hello!</h1>
<!-- 下面是各种循环的例子 -->
<ol>
<li v-for="site in sites">{{ site.name }}</li>
</ol>
<ul>
<template v-for="site in sites"><li>{{ site.name }}</li><li>--------------</li></template>
</ul>
<!-- 下面三个循环依次获取 值 , 键值 , 序号和键值 -->
<ul>
<li v-for="value in object"> {{ value }} </li>
</ul>
<ul>
<li v-for="(value, key) in object"> {{ key }} : {{ value }} </li>
</ul>
<ul>
<li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li>
</ul>
<ul> <!-- 循环整数 -->
<li v-for="n in 10"> {{ n }} </li>
</ul>
<a v-on:click="doSomething">
<!-- v-on:click缩写@ -->
<a @click="doSomething">
<!-- 英文句号后缀.用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：表示取消事件的默认动作 -->
<form v-on:submit.prevent="onSubmit">
<button v-on:click="reverseMessage">反转message字符串</button>
</form>
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
ok : true ,
message: 'Runoob!',
seen: true ,
url: 'http://www.runoob.com' ,
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
],
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
},
methods: {
doSomething : function(){
//...
},
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
<!----------------------------------------------------->
<!--
过滤器
以下capitalize实例对输入的字符串第一个字母转为大写
-->
<div id="app">
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>
<!-- 过滤器可以串联 -->
{{ message | filterA | filterB }}
<!-- message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数 -->
{{ message | filterC('arg1', arg2) }}
</div>
<script>
new Vue({
el: '#app',
data: {
//arg2 : 'bbb' ,
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
} ,
filterA : function(value){
//...
}
filterB : function(value){
//
},
filterC : function(value,arg1,arg2){
//TODO arg2 怎么获取呢 , 待验证
}
}
})
</script>
