Vue.js

Posted 2020-08-17 Cmyoung

什么是 Vue.js?

 

Vue.js  自身不是一个全能框架----它只聚焦于视图层，它是一个构建数据驱动的web 界面的库,即 Vue.js 是 MVVM 的一个库。

Vue.js 的目标是通过尽可能简单的 API 实现  响应的数据绑定和组合的视图组件。

 

好，不多说，直接上代码：

 

双向绑定：

 

     <div id="app">
        <p>{{ message }}</p>
         <!--//双向绑定，当 input 改变时 p 内也会改变 但是，当花括号里加上 *  后就变成了单向绑定{{* message }}-->
            <input v-model=‘message‘ />
             <li v-for="todo in todo">
                 {{ todo.text }}
             </li>
  　　　　　　　　
　　　　　　　// 绑定事件用 v-on: 缩写： @
           <button v-on:keyup="click_test"> 点我试试 </button>
<script>
//实例化
new Vue({
    el : "#app",
    data : {   // 数据列表
         message : ‘1234‘,
         todo :[
             {text : "我是1"},
             {text : "我是2"},
             {text : "我是3"},
             {text : "我是4"}
         ]
    },
    methods : {   // 所有的事件
         click_test : function(){
             alert(this.todos[0])
         }
    }
});

</script> 

 

 

自定义组件:

 
html 部分
 
 
 <div id="app">
     <app-header></app-header> //自定义标签
   </div>
 
js  部分
<script> 
// 定义组件
//  用 Vue.extend() 创建一个组件构造器
 
var appHeader =Vue.extend({
    template : ‘<div id="Header">头部</div>‘
 
});
 
//注册   （要把这个组件构造器 用作组件，需要用 Vue.component(tag,constructor)  注册 ：）
//注意  组件注册后会去替换   自定义的元素
 
Vue.component(‘app-header‘,appHeader)
 
//  创建根实例
 
new Vue({
    el:"#app"
});

</script>

// 未完待续。。。