这篇文章主要介绍“vuejs的功能有哪些”，在日常操作中，相信很多人在vuejs的功能有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vuejs的功能有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
vuejs的功能：1、采用简洁的模板语法来声明式的将数据渲染进DOM；2、利用“v-if”和“v-for”指令实现条件与循环结构；3、利用“v-model”指令实现数据双向绑定；4、利用事件监听器，实现界面交互；5、组件式开发等等。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
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元素上渲染！
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: '新项目' })，你会发现列表中添加了一个新项。
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 '
}
}) 为了让用户和你的应用进行互动，我们可以用 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!
一定要先注册完组件，再来实例化！
一定要确保在初始化根实例之前注册了组件！
否则未注册就使用会报错的！
组件比较强大，可以扩展，封装可重用代码，就是比较腻害(*@ο@*) 哇～一定要好好的熟悉熟悉它！
例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的功能有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
