vuejs的功能有哪些

发布时间:2021-10-26 15:36:16 作者:iii
来源:亿速云 阅读:155

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

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:

<div id="app">{{ message }}</div>
<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>

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

例2:

    <div id="app_2">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>
<script type="text/javascript">
        var app_2=new Vue({
            el:'#app_2',
            data:{
                message:'You loaded this page on '+new Date()
            }
        })
    </script>

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

2、条件与循环

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

  1、条件

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

    例3:

<div id="app_3">
  <p v-if="flags">Now you see me</p>
</div>
<script>
        var app_3=new Vue({
            el:'#app_3',
            data:{
                flags:true
            }
        })
    </script>

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

  2、循环

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

    例4:

<div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>
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:

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>
var app5 = new Vue({
        el: '#app5',
        data: {
          msg2: '# hello '
       }
    })

4、界面交互

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

  例6:

     <div id="app6">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
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:

     <div id="app_7">
         <ol>
            <todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item>
        </ol>
    </div>
Vue.component('todo-item',{
            props:['todo'],
            template:'<li>{{todo.text}}</li>'
        });
        var app_7=new Vue({
            el:'#app_7',
            data:{
                itemsList:[
                    {text:'Vegetables'},
                    {text:'Cheese'},
                    {text:'Whatever else humans are supposed to eat'}
                ]
            }
        })

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

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

推荐阅读:
  1. 功件与面向功件编程
  2. Java 基本功 之 CAS

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vuejs

上一篇:如何描述Python 代码开发工具的强大功能

下一篇:javascript object如何转json

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》