Vue.js入门

Vue.js是一个提供 MVVM 风格的双向数据绑定的库。

首先下载vue.js 。地址：http://cn.vuejs.org/

相关命令:

a、npm install vue   安装vue版本

b、npm install -g vue-cli 全局安装vue-cli

c、vue init webpack  project  创建一个基于“webpack”模板新项目(project为项目名)

d、cd  project

npm install

npm run dev 安装依赖

Vue.js使用的相关步骤

a、调用vue.extend()方法创建组件构造器

eg:  var my = Vue.extend({

template:'<div>Hello!!!!!!!</div>'

})

其中template是定义组件要渲染的HTML

b、调用Vue.component()方法注册组件

eg:   Vue.component('my',my)

其中第一个my是组件标签，作用类似html,body等标签，第二个my是组件构造器

c、在Vue实例的作用范围内使用组件

ps:以上注册的组件为全局注册，将组件注册到实例下为局部注册，用components

eg:new Vue({

el:'#app',

components : {

'my'  :    my

}

)}

父组件和子组件步骤

a、定义一个子组件构造器eg: var  Child =  Vue.extend({.....})

b、定义一个父构造器，并将子组件写入父构造器

eg：   var  Parent =  Vue.extend({

template: 'XXXXXX<child></child>',

components: {

'child',Child

}

})

   c、全局注册Parent组件

eg: Vue.component('parent',Parent)

d、在页面中渲染父组件

使用<script>标签

<script type="text/x-template"  id = "lalala">

<div>xxxxx</div>

</script>

然后在注册的组件中template部分写成

Vue.component('my',{

template:‘#lalala’

})

PS:也可以使用<template>标签，与script标签类似，但是不用指定type属性

数据绑定

a、<props>默认单向绑定，即父影响子，子不影响父

eg: <child v-bind : 子组件prop（当props中名字myName时，此时用“-”将两个单词分开，即my-name，不区分大小写）=“父组件数据属性”></child>

想用父组件的数据，必须在子组件中定义props属性。

b、.sync双向绑定

eg: <child v-bind : my-name.sync="name"></child>

c、.once单次绑定，即父不影响子，子不影响父