Vue.js初体验
Posted Java引导者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js初体验相关的知识，希望对你有一定的参考价值。
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
1.Vue.js的简单介绍
Vue.js是目前前端领域一个非常流行的MVVM框架，他不像jquery给我们封装了兼容性的dom操作，Vue不提倡操作dom元素，把程序员从复杂的dom操作中解放出来，让我更多的关心业务逻辑代码的实现，Vue,js提供了很多的指令为我们更方便的数据操作，同时，只要我们修改了vue对象里面的数据，页面就会被重新的渲染。(单向数据流，双向的数据绑定,简单的说就是M-VM-V-M....)
下面一个简单的小例子说明vue的双向数据绑定(vue.min.js可以找一个CDN),当你改变input框里面的值的时候,页面会重新渲染，上面h2里面的值也会改变,(v-model是一个双向数据绑定的指令)。
<head>
<title></title>
<script type="text/javascript" src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<input type="input" v-model="msg">
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:"我爱前端,爱学习vue.js"
}
})
</script>2.vue.js的简单指令
1 v-cloak [v-cloak] {display: none;} 取消插值表达式网速慢时候的闪烁问题（就是网速很慢解析到{{}}时浏览器出现{{msg}}）。
2. v-text 绑定标签样式的指令 例如上面的可以改为<h2 v-text="msg"></h2> 这样可以 解决闪烁问题。
3 v-html 可以插入html的标签的vue指令
4 v-bind vue绑定属性的指令 可以缩写为：
5 v-on vue 提供的绑定事件的指令 可以缩写为@
6 v-if vue提供的判断的指令 不成立元素是不会被创建的
7 v-show vue提供的隐藏元素的指令 元素会创建知识css显示为无，用法和v-if类似。
8 v-for vue提供的元素迭代的指令 可以迭代数组 对象和数字。
3.vm对象和vue绑定事件
vm对象里面的el 表示vue这个对象需要操作的元素，在这个元素外部的vm对象是不能控制的，不要偷懒给body一个id(高版本的vue不支持)
vm对象的data属性就是当前页面的数据，改变这个data里面的数据，会印发页面的重新渲染。（程序员从复杂的dom操作里面解放了出来)
vm对象的methods属性就是这个vm对象里面的方法注意data和methods里面的方法如果互相访问必须加上this。
<body>
<div id="app">
<h1>{{msg}}</h1>
<input type="button" @click="change" value=按钮>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:"我爱前端,爱学习vue.js"
},
methods:{
change(){
this.msg="我不爱前端,爱学习java"
}
}
})
</script>
好了，今天的vue.js初体验就到这里了，下次有机会给大家继续介绍其他的知识。
以上是关于Vue.js初体验的主要内容，如果未能解决你的问题，请参考以下文章