首页 > 代码库 > 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 基本功能了解