标签：function Vue name 菜鸟 value 笔记 message data

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

标签：function,Vue,name,菜鸟,value,笔记,message,data
来源： https://www.cnblogs.com/hi-gdl/p/vue_s1.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。