master

分支 (1)

管理

管理

master

grow-vue
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grow-vue演示</title>
    <link rel="stylesheet" href="css/demo.css" />
</head>
<body>

<div id="mvvm-app">
	<h3>grow-vue演示</h3>

	<!-- s v-model示例 -->
	<div class="example">
		<div class="for-div-title">
			1) v-model示例：
		</div>
	    <input type="text" v-model="someStr">
	    <input type="text" v-model="child.someStr">
    </div>
    <!-- e v-model示例 -->

    <!-- s v-class示例，支持单个变量，多个布尔变量，未支持表达式，控制class样式的显隐 -->
    <div class="example">
		<div class="for-div-title">
			2) v-class示例，支持单个变量，多个布尔变量，未支持表达式，控制class样式的显隐：
		</div>
	    <span class="v-class" v-class='{"active": "isActive", "active2": "isActive"}'>v-class测试</span>
	    <span class="v-class" v-class="className">
	        {{someStr}}
	        <span v-text="child.someStr"></span>
	    </span>
	</div>
    <!-- e v-class示例，支持单个变量，多个布尔变量，以及表达式，控制class样式的显隐 -->

    <!-- s v-html 显示元素 -->
    <div class="example">
		<div class="for-div-title">
			3) v-html 显示元素：
		</div>
    	<p v-html="child.htmlStr"></p>
    </div>
    <!-- e v-html 显示元素 -->

    <!-- s v-for 循环元素 -->
    <div class="example">
    	<div class="for-div-title">
    		4) for循环数组内对象：
    	</div>
    	<div v-for="item" class="for-div" data-node='none'>
	    	<span class="ordinary-text">普通文本</span>{{item.msg}}
	    	<div v-for="item" class="for-div" data-node='none'>
	    		{{item.msg}}
	    	</div>
	    </div>
    </div>
    <!-- e v-for 循环元素 -->

    <!-- s v-click 事件监听 -->
    <div class="example">
		<div class="for-div-title">
			5) v-click 事件监听：
		</div>
    	<button v-on:click="clickBtn">change model</button><br />
    </div>
    <!-- e v-click 事件监听 -->

    <!-- s checkbox 测试 -->
    <div class="example">
		<div class="for-div-title">
			6) checkbox 测试：
		</div>
	  	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	  	<label for="jack">Jack</label>
	  	<input type="checkbox" id="john" value="John" v-model="checkedNames">
	  	<label for="john">John</label>
	  	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	  	<label for="mike">Mike</label>
	  	<div style="margin: 0 0 3px 0;"></div>
	    checkedNames: <span>{{checkedNames}}</span>
   	</div>
    <!-- e checkbox 测试 -->

    <!-- s radio 测试 -->
    <div class="example">
		<div class="for-div-title">
			7) radio 测试：
		</div>
	  	<input type="radio" id="one" value="One" name="picked" v-model="picked">
	  	<label for="one">One</label>
	  	<br>
	  	<input type="radio" id="two" value="Two" name="picked" v-model="picked">
	  	<label for="two">Two</label>
	  	<br>
	  	Picked: <span>{{picked}}</span>
  	</div>
  	<!-- e radio 测试 -->

</div>

<!--<script src="http://cdn.bootcss.com/vue/1.0.25/vue.js"></script>-->
<script src="./js/util.js"></script>
<script src="js/dependence.js" ></script>
<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compiler.js"></script>
<script src="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            someStr: 'hello ',
            className: 'active',
            isActive: true,
            checkedNames: [],
            picked: '',
            child: {
                someStr: 'World !',
                htmlStr: '<span style="color: #f00;">red</span>',
            },
            item: [
            	{'msg': 'foo'},
            	{'msg': 'bar'}
            ]
        },

        methods: {
            clickBtn: function(e) {
                var randomStrArr = ['childOne', 'childTwo', 'childThree'];
                this.child.someStr = randomStrArr[parseInt(Math.random() * 3)];
                this.isActive = false;
                this.item = [
	            	{'msg': 'foo'},
	            	{'msg': 'bar'},
	            	{'msg': 'cool'}
	            ]
                var self = this;
                setTimeout(function() {
                	self.isActive = true;
                }, 3000)
            }
        }
    });

    vm.$watch('child.someStr', function() {
        console.log(arguments);
    });
</script>

</body>
</html>