专栏首页web前端Vuejs --01 起步

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vuejs --03 模板语法

    一、插值      1、文本 <span>{{msg}}</span> //mustache语法 <span v-once>{{msg}}</spa...

    用户1148399
  • JavaScript基础学习--03图片翻转

    一、利用纯js编写,兼容IE9以及IE9以上       1、两张图片重合排放,并且背面的图片display(none)。         2、点击事件中让正面...

    用户1148399
  • HTML+CSS基础

    第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

    用户1148399
  • 用代码说话!机器学习能预测股市吗?

    常用的量价技术指标:Chaikin A/D、BBAND、CCI、EMA、MACD、OBV、RSI、SMA和STOCH。

    量化投资与机器学习微信公众号
  • DDoS攻击的发展和应对

    尽可能地对被攻击目标造成最大程度的资源破坏是DDoS攻击的根本初衷。站在这个角度上来看DDoS攻击的发展,可以梳理出清晰的脉络。 ? 三个发展阶段   ...

    用户1289394
  • (4)打鸡儿教你Vue.js

    .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

    达达前端
  • 【一起来烧脑】一步学会Vue.js系统

    Vuejs是一个构建数据驱动的web界面的库,通过api实现响应的数据绑定和组合的视图组件,Vue.js的核心是一个响应的数据绑定系统,它让数据与DOM保持同步...

    达达前端
  • JS页面跳转代码怎么写?总结了5种方法

      我们在建站时有些链接是固定的,比如客服咨询链接,一般是第三方url,如果直接加上去不太专业,那么就想着用站内的页面做跳转,跳转用js比较多,那么JS页面跳转...

    ytkah
  • 慎用预训练深度学习模型

    似乎使用这些预训练模型已经成为行业最佳实践的新标准。合情合理,为什么不利用一个经过大量数据和计算训练的模型呢?

    AiTechYun
  • Elasticsearch索引增量统计及定时邮件实现

    0、需求 随着ELKStack在应用系统中的数据规模的急剧增长,每天千万级别数据量(存储大小:10000000*10k/1024/1024=95.37GB,假设...

    用户1390885

扫码关注云+社区

领取腾讯云代金券