Vue.js

Posted Cmyoung

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js相关的知识,希望对你有一定的参考价值。

什么是 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>

// 未完待续。。。

 








以上是关于Vue.js的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

使用 Vue 模板清晰地分离视图和代码

第1129期对vue.js单文件(.vue)进行单元测试

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件

Vue.js中子组件向父组件传递信息。