乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

    • vuejs的功能有哪些

    这篇文章主要介绍“vuejs的功能有哪些”，在日常操作中，相信很多人在vuejs的功能有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vuejs的功能有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

    原阳网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

    vuejs的功能：1、采用简洁的模板语法来声明式的将数据渲染进DOM；2、利用“v-if”和“v-for”指令实现条件与循环结构；3、利用“v-model”指令实现数据双向绑定；4、利用事件监听器，实现界面交互；5、组件式开发等等。

    vuejs的功能有哪些

    本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

    Vue.js 基本功能了解一下~

    1、数据的渲染

    Vue.js的核心是采用简洁的模板语法来声明式的将数据渲染进DOM！

    例1：

    {{ message }}
    
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    

    这已经生成了一个vue应用，现在数据和DOM已经绑定在一起，只要修改app.message，相应的也会更新DOM！

    例2：

        
        
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        
    
    
        var app_2=new Vue({
            el:'#app_2',
            data:{
                message:'You loaded this page on '+new Date()
            }
        })
    

    例子2涉及到了Vue的特殊属性 v-bind 指令，也会在相应的DOM元素上渲染！

    2、条件与循环

    Vue不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据！

    1、条件

    我们可以使用其中的 v-if 指令达到条件设置，而在实际应用中控制切换一个元素的显示也很简单。

    例3：

    
  Now you see me

    同样的可以修改data属性来达到响应。

    2、循环

    每个指令都有特殊的功能，v-for 指令可以绑定数组的数据来渲染一个列表!

    例4：

    
        
    
    var app_3_2=new Vue({
            el:'#app_3_2',
            data:{
                todos:[
                    { text:'Learn JavaScript' },
                    { text:'Learn Vue' },
                    { text:'Learn Other ' }
                ]
            }
        })

    打开控制台，输入 app_3_2.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

    3、双向绑定

    Vue 提供了一个  v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

    例5：

        
        
        
    {{msg2}}
    
    
    var app5 = new Vue({
        el: '#app5',
        data: {
        　　msg2: '# hello '
     　　}
    })

    4、界面交互

    为了让用户和你的应用进行互动，我们可以用  v-on  指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法!

    例6：

         
         
    {{message}}
    
         Reverse Message
    
    var app6=new Vue({
            el:'#app6',
            data:{
                message:'Hello Vue.js!'
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })

    注意：在methods方法中，只更新了状态，没有触动到DOM!

    5、组件构建（简单版）

    一定要先注册完组件，再来实例化！

    一定要确保在初始化根实例之前注册了组件！

    否则未注册就使用会报错的！

    组件比较强大，可以扩展，封装可重用代码，就是比较腻害(*@ο@*) 哇～一定要好好的熟悉熟悉它！

    例7：

         
         
      
            
        
    
    
    Vue.component('todo-item',{
            props:['todo'],
            template:'
  • {{todo.text}}
    • '
        });
        var app_7=new Vue({
            el:'#app_7',
            data:{
                itemsList:[
                    {text:'Vegetables'},
                    {text:'Cheese'},
                    {text:'Whatever else humans are supposed to eat'}
                ]
            }
        })

    组件是很重要的一部分，当你熟悉完以上的内容后要好好研究组件系统，其中涉及到许多内容需要更详细的掌握。

    到此，关于“vuejs的功能有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


    分享文章：vuejs的功能有哪些
    URL地址：http://lszwz.com/article/jhdpoe.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：乐山市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    响应式网站   子晨包装   成都网站设计   定制网站建设   关键词排名优化   广安园林绿化公司   成都企业网站制作   彭山网站制作   温江电信机房   柔性防护网   

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 

    蜀ICP备2021004003号-25