vuejs的功能有哪些
这篇文章主要介绍“vuejs的功能有哪些”,在日常操作中,相信很多人在vuejs的功能有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vuejs的功能有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
原阳网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。成都创新互联于2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
vuejs的功能:1、采用简洁的模板语法来声明式的将数据渲染进DOM;2、利用“v-if”和“v-for”指令实现条件与循环结构;3、利用“v-model”指令实现数据双向绑定;4、利用事件监听器,实现界面交互;5、组件式开发等等。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
Vue.js 基本功能了解一下~
1、数据的渲染
Vue.js的核心是采用简洁的模板语法来声明式的将数据渲染进DOM!
例1:
{{ message }}
这已经生成了一个vue应用,现在数据和DOM已经绑定在一起,只要修改app.message,相应的也会更新DOM!
例2:
Hover your mouse over me for a few seconds to see my dynamically bound title!
例子2涉及到了Vue的特殊属性 v-bind 指令,也会在相应的DOM元素上渲染!
2、条件与循环
Vue不仅可以绑定DOM文本到数据,也可以绑定DOM结构到数据!
1、条件
我们可以使用其中的 v-if 指令达到条件设置,而在实际应用中控制切换一个元素的显示也很简单。
例3:
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}}
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:'
组件是很重要的一部分,当你熟悉完以上的内容后要好好研究组件系统,其中涉及到许多内容需要更详细的掌握。
到此,关于“vuejs的功能有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站标题:vuejs的功能有哪些
链接分享:http://scyanting.com/article/jhdpoe.html