Vuejs --01 起步

一、是什么

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>
时间: 2024-10-21 21:09:41

Vuejs --01 起步的相关文章

Vue的介绍及安装和导入

08.27自我总结 Vue的介绍及安装和导入 本质就是封装一些js 一Vue的介绍 进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 三大主流框架之一:Angular React Vue 先进的前端设计模式:MVVM 这个我们可以和之前的mav设置模式结合其实他相当于mvcmc他将其中的逻辑控制又进行划分划分成视图的逻辑,数据的逻辑. 可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发 数据

我喜欢减肥我们来减肥吧

http://www.ebay.com/cln/honus.jyw4mvptb/cars/158313278016/2015.01.28.html http://www.ebay.com/cln/honus.jyw4mvptb/cars/158313282016/2015.01.28.html http://www.ebay.com/cln/honus.jyw4mvptb/cars/158313289016/2015.01.28.html http://www.ebay.com/cln/usli

百度回家看沙发沙发是减肥了卡斯加积分卡拉是减肥

http://www.ebay.com/cln/hpryu-caw8ke/cars/158056866019/2015.01.31 http://www.ebay.com/cln/xub.50x2l7cj/cars/158445650015/2015.01.31 http://www.ebay.com/cln/xub.50x2l7cj/cars/158445674015/2015.01.31 http://www.ebay.com/cln/xub.50x2l7cj/cars/1584456790

巢哑偕倥乇椭煞谙暗逞帕俸

IEEE Spectrum 杂志发布了一年一度的编程语言排行榜,这也是他们发布的第四届编程语言 Top 榜. 据介绍,IEEE Spectrum 的排序是来自 10 个重要线上数据源的综合,例如 Stack Overflow.Twitter.Reddit.IEEE Xplore.GitHub.CareerBuilder 等,对 48 种语言进行排行. 与其他排行榜不同的是,IEEE Spectrum 可以让读者自己选择参数组合时的权重,得到不同的排序结果.考虑到典型的 Spectrum 读者需求

我国第三代移动通信研究开发进展-尤肖虎200106

众所周知,数据科学是这几年才火起来的概念,而应运而生的数据科学家(data scientist)明显缺乏清晰的录取标准和工作内容.此次课程以<星际争霸II>回放文件分析为例,集中在IBM Cloud相关数据分析服务的应用.面对星际游戏爱好者希望提升技能的要求,我们使用IBM Data Science Experience中的jJupyter Notebooks来实现数据的可视化以及对数据进行深度分析,并最终存储到IBM Cloudant中.这是个介绍+动手实践的教程,参会者不仅将和讲师一起在线

pl/sql学习1——标量变量psahnh6S

为类型.不能用于表列的数据类型.范围为的子类型.自然数.为的子类型.具有约束为单精度浮点数.为变量赋值时.后面要加为双精度浮点数.为变量赋值时.后面要加.为数字总位数.为小数位数是的子类型.最大精度位是的子类型.最大精度位单精度浮点型是的子类型.最大精度位双精度浮点型定义精度为位的实数..定义为位的整数.变长字符串.最长测试变量数据!.定长字符串.最长测试变长二进制字符串物理存储的为类型...固定长度.个字节使用定义数据类型那个最小值:最大值:最小值:最大值:最小值:最大值:最小值:最大值:最小

使用XCB编写X Window程序(01):快速起步

估计现在已经没有谁使用XCB这么底层的库写应用程序了,要用也是用经过精心封装的Motif, LessTiff, GTK, Qt, EWL,  ETK或者Cairo等高层次的库.我之所以这么费心地去折腾XCB,其实主要也是为了学习.毕竟,使用最接近底层的UI库写代码是学习X协议及GUI编程原理的最好方法. XCB的主要教程可以参考这里:http://xcb.freedesktop.org/tutorial/ 和X协议有关的文档,在这里:http://www.x.org/releases/X11R7

uva 12563(动态规划起步第三天 01背包变形)

谈到背包,大家肯定都熟悉,我就不多讲,而这题挺有意思.DP[i][j] 表示前 i 首歌在j时间内唱的最多曲目: 状态有了,那么怎么转移呢? DP[i][j] = max{DP[i - 1][j],DP[i - 1][j - t[i]] + 1}; 但是此题还有时间.所以如果初始化为0的话,按照平常背包的代码,很难求出最长时间. 所以我们初始化为-1,且-1时不计算,那么这就避免了01背包的情况: 是不是觉得很像01背包的恰好装满情况.对,当然可以初始化为-无穷: 1 #include <ios

vueJs源码解读0-1

vue源码解读-1 在github上下载到源码的后在src的目录下也即是该所有分块的源文件的地址所在的地方,使用webstrom在file–>Settings–>languages&Frameworks中选择javascript使用ECMAScript6 1. index.js import Vue from './instance/vue' import installGlobalAPI from './global-api' import { inBrowser, devtools