首页 > 代码库 > Vuejs --01 起步

Vuejs --01 起步

2024-11-28 04:31:02   203人阅读

一、是什么
     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="http://www.mamicode.com/{{message}}" />    ），属性绑定必须用v-bind:   (     <input v-bind:value="http://www.mamicode.com/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="http://www.mamicode.com/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 起步


联系
我们