Vue最核心的思想,数据跟界面的绑定和动态更新,通过new Vue对象的创建实现Dom节点和JavaScript间的密切绑定.
项目启动
创建项目文件夹
vue init webpack Objname
Project name //项目名
? Project description A Vue.js project
? Author //作者
? Vue build standalone
? Install vue-router? //安装
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
目录结构:
build//webpack配置相关文件
config//webpack配置相关文件
node_modules//node依赖代码库
src//项目源码
static//第三方静态资源(.gitkeep文件是为了保证文件夹为空也可以提交到Github上)
.babelrc//baber转化器配置
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
.index.html
.package.js
组件
狭义上来讲就是实现了跟JavaScript交互的动态Dom节点,两种构建方式:
/***根据domID设定的组件****/
new Vue({
el: '#some-element',
// 选项
})
还有:
/******直接建立的Dom组件
在HTML里声明my-componet标签使用*******/
Vue.component('my-component', {
// 选项
})
- Vue.extend:创建一个组件的”子类”,可用于绑定在其他组件上
:
var DID = Vue.extend({
template: '<div> 我是一个dom节点</div><child></child>',
components:{
child:DID
}
})
Vue.component('zpy',DID);//为自定义元素绑定
new DID().$mount('#zpy')//为组件绑定
new Vue({
el:'#example',
components: {
'zpy':Parent//为自定义的元素绑定,并且可以嵌套绑定即在DID的tempate中再创建一个自定义元素.
}
})
计算属性
<body>
<div id="zpy">
<input type="text" v-model="height1">
<input type="text" v-model="width1">
<input type="text" v-model="area"> height = {{height1}},width={{width1}},area={{area}}
</div>
</body>
<script>
var vm = new Vue({
el: '#zpy',
data: {
height1: '10',
width1: '9'
},
computed: {
area: {
get: function() {
console.log("get!!! ");
return this.height1 * this.width1;
},
set: function(newVal) {
console.log("set!!! ");
var elem = newVal.split('');
this.height1 = elem[0];
this.width1 = elem[1];
}
}
}
})
</script>
在Vue对象里设置computed,再为要设置的变量配置get方法和set函数