码迷,mamicode.com
首页 > Web开发 > 详细

Vuejs --01 起步

时间:2017-08-14 19:04:36      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:模板   java   解释   react   log   hello   元素属性   传值   简洁   

一、是什么
     1、是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计
          1.1     解释:框架譬如angular,是强主张,如果用之---必须使用它的模块机制,必须使用它的依赖注入,必须使用它的特殊形式定义组件(此每个视图框架都一样,难以避免);框架比如react,侵入性看似没有angular强,因为它是软性侵入。    
           而Vue是渐进式,没有强主张
你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。     ---摘自知乎徐飞
 
二、声明式渲染
     1、Vue核心:采用简洁的模板语法来声明式地将数据渲染进DOM
<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>
 
四、处理用户输入
     1、事件
<div id="app1">
     <input type="text" name="va" v-bind:value="message">
     <a href="javascript:;" v-on:click="btnEvent">绑定点击事件</a>
</div>
 
<script>
    new Vue({
        el: ‘#app1‘,
        data: {
            message: ‘你好‘
        },
        methods: {
            btnEvent: function() {
                this.message = ‘点击之后,message值改变‘
            }
        }
    });
</script>  
 
     2、表单输入和应用状态之间的双向绑定
<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>
 
 
 
 
 
 
 
 
 
 

Vuejs --01 起步

标签:模板   java   解释   react   log   hello   元素属性   传值   简洁   

原文地址:http://www.cnblogs.com/hihao/p/7359231.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!