Vuejs --01 起步

你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。     ---摘自知乎徐飞

<div id="app">
     <p>{{message}}<p>
     <p v-bind:title="messa">鼠标悬浮时显示title，此时title被Vue绑定了messa（v-表示他们是Vue提供的特殊属性）</p>
</div>
 
<script>
     new Vue({
         el: ‘#app‘,     //注意不能漏掉#
         data: {
               message: ‘hello‘,          //方式一：元素内数据渲染
               messa: ‘悬浮显示title‘     //方式二：元素属性数据渲染（区于模板渲染（     <input value="{{message}}" />    ），属性绑定必须用v-bind:   (     <input v-bind:value="message" />     )）
         } 
     });
</script>

<div id="app1">
     <p v-if="seen">根据if是否为真判断是否可见，或者说是否运行此行代码</p>
</div>
 
<script>
     new Vue({
          el: ‘#app1‘,
          data:{
               seen: true
          }
     });
</script>

<div id="app1">
     <ul>
       <li v-for="key in list">
         {{key.text}}
       </li>
     </ul>
</div>
 
<script>
     new Vue({
          el: ‘#app1‘,
          data:{
               list: [
                    {text: ‘nihao‘},
                    {text: ‘wohao‘},
                    {text: ‘dajiahao‘}
               ]
          }
     });
</script>

<div id="app1">
     <input type="text" name="va" v-model="message">
     <p>
     {{message}}
     </p>
</div>
 
<script>
     new Vue({
          el: ‘#app1‘,
          data:{
              message: ‘你好‘
          }
     }); 
</script>

//自定义组建 ‘item-list‘ ，并定义该组件包含：li模板（内容数据是自定义属性值中传过来的） + 自定义属性props（包含属性名item（属性值从父级中通过v-bind传过来））---》完成了从父级中传值给子级即：自定义组件）
<div id="app2">
  <ul>
    <item-list v-for="key in dataList" v-bind:item="key" v-bind:key="key.id">
 
    </item-list>
  </ul>
</div>
 
<script>
    Vue.component(‘item-list‘, {
        props: [‘item‘],
        template: ‘<li>{{item.text}}</li>‘
    });
    var app2 = new Vue({
        el: ‘#app2‘,
        data: {
            dataList: [{
                id: 0,
                text: ‘你好‘
            }, {
                id: 1,
                text: ‘我好‘
            }, {
                id: 2,
                text: ‘大家好‘
            }]
        }
    }); 
</script>