阴影中的曙光

[旧]Vue

2018.03.31 / 前端框架 / 点击 329 / 回复 0 / 旧站搬运, Vue

Vue,MVVM,Json,大前端时代

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函数