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单次绑定,即父不影响子,子不影响父