重庆分公司

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

{{ message }}

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

    
        
            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()
            }
        })
    

  Now you see me

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

2、循环

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

例4：

        

            
                {{todo.text}}
            
        
    

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

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4