Start: 6月 2017

2017年6月30日星期五

(vue)另一種切換模版內容的方式(模版 data 不變)

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../js_lib/vue-2.3.0.js"></script>
    <script>
Vue.component('child', {
    template: `<div>
            <h1 v-if="level === 1">
                1
            </h1>
            <h1 v-if="level === 2">
                2
            </h1>
            <h1 v-if="level === 3">
                3
            </h1>
        </div>`,
    props: {
        level: {
            type: Number
        }
    }
});

</script>
</head>

<body>
    <div id="app">
        <span v-for="i in 3">
            {{i}}:
            <input type="radio" v-model="level" :value="i">
        </span>
        <child ref="child" :level="level"></child>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                level: 1
            }
        });
    </script>
</body>

</html>

(倚靠vue，是你自己不會架構，別人都幫你寫好好，屌吹個屁)........父子數據連動

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../js_lib/vue-2.3.0.js"></script>
    
    <script>
        Vue.component('child_1', {
            template: '<div>\
            <p><input type="text" v-model="namex"></p>\
          </div>',
            props: ['name'],
            data:function(){
                return {
                    namex: this.name
                };
            },
            watch: {
                // 當本身 name 有變動
                // 通知 parent 更新自身數據
                namex: function(){
                   this.$emit('update:name', this.namex);
                }
            }
        });
    </script>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="name">
        </div>
        <hr>
        <child_1 :name="name" @update:name="getName"></child_1>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name: 'a.......'
            },
            methods: {
                getName: function (value) {
                    // debugger;
                    this.name = value;
                }
            }
        });
    </script>
</body>

</html>

(倚靠vue，是你自己不會架構，別人都幫你寫好好，屌吹個屁).....切換子模版

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../js_script/vue-2.3.0.js"></script>
    <script>
        var Home = Vue.component('Home', {
            template: `<div>
                <div>Home</div>
                <div>{{age}}</div>
            </div>`,
            props: ['age'],
            data: function() {
                return {
                    name: 'home'
                }
            }
        });

        var Xman = Vue.component('Home', {
            template: `<div>
                <div>Xman</div>
                <div>{{age}}</div>
            </div>`,
            props: ['age'],
            data: function() {
                return {
                    name: 'xMan'
                }
            }
        });
    </script>
</head>

<body>
    <div id="app">
        <p>
            <input type="radio" v-model="current" value="home" />
            <input type="radio" v-model="current" value="xman" />
        </p>
        <component :is="current" :age="age"></component>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                current: 'home',
                age: 15
            },
            components: {
                home: Home,
                xman: Xman
            }
        });
    </script>
</body>

</html>

(倚靠vue，是你自己不會架構，別人都幫你寫好好，屌吹個屁)........取得子組件的資料

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<script src="../../js_lib/vue-2.3.0.js"></script>
<script>
    Vue.component('child', {
      template: '<div>\
          <p>{{mouth}}</p>\
          <button @click="changeName">changeName</button>\
          </div>',
      data: function () {
        return {
          mouth: '1.......',
          stomach: {
            name: '2.............'
          }
        }
      },
      methods: {
        changeName: function () {
          debugger;
          this.stomach.name = '3......';
        }
      }
    });
</script>
</head>

<body>
<div id="app">
    <child ref="child_1"></child>
    <hr />
    <p>
      Truth: {{childstomach.name}}
    </p>
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        childstomach: {
          name: 'oh'
        }
      },
      mounted: function () {
        // this.$refs.child_1
        // 子組件
        // this.$refs.child_1.stomach => {}
        // this.childstomach 會隨 this.$refs.child_1.stomach 改變
        this.childstomach = this.$refs.child_1.stomach;
      }
    });
</script>
</body>

</html>

2017年6月23日星期五

vue.js directive

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script></script>
    <script src="../../js_script/vue-2.3.0.js"></script>
    <script>
        Vue.directive('test', {

            bind: function() {

            },
            inserted: function(el, binding, vnode) {
                var data = binding.value;

                el.innerHTML = data.age + '............';
            },
            update: function(el, binding, vnode) {
                // 監聽的值有變動，會進來這

                var data = binding.value;

                el.innerHTML = data.age + '............';

            },
            componentUpdated: function() {
                debugger;
            },
            unbind: function() {
                debugger;
            }
        });
    </script>
</head>

<body>
    <div id="div_1">
        <div>
            <input type="text" v-model="age" />
        </div>
        <div v-test="{age: age, list: ageList}">

        </div>
    </div>
    <script>
        var view_div_1 = new Vue({
            el: '#div_1',
            data: {
                age: 15,
                ageList: [5, 10, 15]
            }
        });
    </script>
</body>

</html>

2017年6月20日星期二

angularJS 控制器，數據注入

var myApp = angular.module('myApp', []);

// 注入 appMsg

myApp.value('appMsg', 'Hello from My App');

var controller = function ($scope, msg) {

$scope.message = msg;

};

controller['$inject'] = ['$scope', 'appMsg'];

myApp.controller('controllerA', controller);

/////////////////////////////////////////////////////////

var myApp = angular.module('myApp', []);

// 注入 y

myApp.value('y', 'gy');

myApp.config(function($provide){

// 注入 x

$provide.value('x', 'xman....');

});

myApp.controller('ct_1', ['$scope', 'x','y',function($scope, x, y){

$scope.name = x;

}]);

2017年6月9日星期五

Backbone.View.el 問題

若想在 Backbone.View.setElement 後才有 render 的動作

可以在一開始的設定如下
就不會事先產生一個<div>

Backbone.View.extend({
el: function(){
return undefined;
},

render: function(){
if(!this.el){
return;
}
}

})

訂閱：文章 (Atom)

2017年6月30日 星期五

2017年6月23日 星期五

2017年6月20日 星期二

2017年6月9日 星期五

2017年6月30日星期五

2017年6月23日星期五

2017年6月20日星期二

2017年6月9日星期五