vuejs有什么功能-Voir.js-php.cn

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

Copier après la connexion

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

例2：

  Hover your mouse over me for a few seconds to see my dynamically bound title!

Copier après la connexion

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

2、条件与循环

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

　　1、条件

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

　　　　例3：

 Now you see me

Copier après la connexion

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

　　2、循环

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

　　　　例4：

   {{todo.text}}

Copier après la connexion

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

Copier après la connexion

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

3、双向绑定

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

　　例5：

  {{msg2}}

Copier après la connexion

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

Copier après la connexion

4、界面交互

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

　　例6：

 {{message}}

Copier après la connexion

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

Copier après la connexion

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

5、组件构建（简单版）

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

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

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

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

　例7：

Copier après la connexion

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'} ] } })

Copier après la connexion

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

在实际项目中使用时，多个页面有相同的part，组件复用简直厉害的不要不要~O(∩_∩)O~~