Vue笔记1.1 : 开始

<!-- 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>