首页 > 代码库 > Vue.js 基本功能了解
Vue.js 基本功能了解
一、写在前面
隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~
回过头看自己第一篇相关文章《初试 Vue.js》(http://www.cnblogs.com/anniey/p/6307138.html),简直惨不忍睹、不忍直视、辣眼睛,怎么可以这么啰嗦,废话好多哦,没脸看下去了~(o′?ェ?`o)
都说入一门语言写好hello wrold开始,我上篇文章就已经打好这个头啦,不管是Vue1,还是2,现在咱们继续╰(*°▽°*)╯
二、起步
1.简单的方式
创建好一个html文件,通过script的方式引入,如下:
<script src="https://unpkg.com/vue"></script>
2.其他的方式
参考官网给出的选项:
https://cn.vuejs.org/guide/installation.html
三、数据的渲染
Vue.js的核心是采用简洁的模板语法来声明式的将数据渲染进DOM!
例1:
<div id="app">{{ message }}</div>
1 <script type="text/javascript"> 2 var app=new Vue({ 3 el:"#app", 4 data:{ 5 message:"hello vue" 6 } 7 }) 8 </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>
1 <script type="text/javascript"> 2 var app_2=new Vue({ 3 el:‘#app_2‘, 4 data:{ 5 message:‘You loaded this page on ‘+new Date() 6 } 7 }) 8 </script>
例子2涉及到了Vue的特殊属性 v-bind 指令,也会在相应的DOM元素上渲染!
四、条件与循环
Vue不仅可以绑定DOM文本到数据,也可以绑定DOM结构到数据!
1.条件
我们可以使用其中的 v-if 指令达到条件设置,而在实际应用中控制切换一个元素的显示也很简单。
例3:
1 <div id="app_3"> 2 <p v-if="flags">Now you see me</p> 3 </div>
1 <script> 2 var app_3=new Vue({ 3 el:‘#app_3‘, 4 data:{ 5 flags:true 6 } 7 }) 8 </script>
同样的可以修改data属性来达到响应。
2.循环
每个指令都有特殊的功能,v-for 指令可以绑定数组的数据来渲染一个列表!
例4:
1 <div id="app_3_2"> 2 <ul> 3 <li v-for="todo in todos"> 4 {{todo.text}} 5 </li> 6 </ul> 7 </div>
1 var app_3_2=new Vue({ 2 el:‘#app_3_2‘, 3 data:{ 4 todos:[ 5 { text:‘Learn JavaScript‘ }, 6 { text:‘Learn Vue‘ }, 7 { text:‘Learn Other ‘ } 8 ] 9 } 10 })
打开控制台,输入 app_3_2.todos.push({ text: ‘新项目‘ })
,你会发现列表中添加了一个新项。
五、双向绑定
Vue 提供了一个 v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
例5:
1 <div id="app5"> 2 <input type="text" v-model="msg2" /> 3 <p>{{msg2}}</p> 4 </div>
1 var app5 = new Vue({ 2 el: ‘#app5‘, 3 data: { 4 msg2: ‘# hello ‘ 5 } 6 })
六、界面交互
为了让用户和你的应用进行互动,我们可以用 v-on
指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法!
例6:
1 <div id="app6"> 2 <p>{{message}}</p> 3 <button v-on:click="reverseMessage">Reverse Message</button> 4 </div>
1 var app6=new Vue({ 2 el:‘#app6‘, 3 data:{ 4 message:‘Hello Vue.js!‘ 5 }, 6 methods:{ 7 reverseMessage:function(e){ 8 this.message=this.message.split(‘‘).reverse().join(‘‘); 9 } 10 } 11 })
注意:在methods方法中,只更新了状态,没有触动到DOM!
七、组件构建(简单版)
一定要先注册完组件,再来实例化!
一定要确保在初始化根实例之前注册了组件!
否则未注册就使用会报错的!
组件比较强大,可以扩展,封装可重用代码,就是比较腻害(*@ο@*) 哇~一定要好好的熟悉熟悉它!
例7:
1 <div id="app_7"> 2 <ol> 3 <todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item> 4 </ol> 5 </div>
1 Vue.component(‘todo-item‘,{ 2 props:[‘todo‘], 3 template:‘<li>{{todo.text}}</li>‘ 4 }); 5 var app_7=new Vue({ 6 el:‘#app_7‘, 7 data:{ 8 itemsList:[ 9 {text:‘Vegetables‘}, 10 {text:‘Cheese‘}, 11 {text:‘Whatever else humans are supposed to eat‘} 12 ] 13 } 14 })
组件是很重要的一部分,当你熟悉完以上的内容后要好好研究组件系统,其中涉及到许多内容需要更详细的掌握。
在实际项目中使用时,多个页面有相同的part,组件复用简直厉害的不要不要~O(∩_∩)O~~
---------------------------------------------------------------
vue的基本功能介绍就到这里了,谢谢思密达O(∩_∩)O~~
多多指教n(*≧▽≦*)n
Vue.js 基本功能了解