如下所示：
demo.html
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Index Page</title>
</head>
<body>
<form action="" id="demo">
<input type="text" value="调试 vuejs 2.0" ref="input1">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test1">测试</a>
<br>
<span>{{ result1 }}</span>
<br>
<input type="text" v-model="input2">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test2">测试</a>
<br>
<span>{{ result2 }}</span>
</form>
<script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
demo.js
new Vue({
el: "#demo", data: {
result1: null,
result2: null,
input2: ""
},
methods: {
test1: function () {
this.result1 = this.$refs.input1.value + " 成功!";
},
test2: function () {
this.result2 = this.input2 + " 成功!";
}
}
})
demo.html
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Index Page</title>
</head>
<body>
<form action="" id="demo">
<input type="text" value="调试 vuejs 2.0" ref="input1">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test1">测试</a>
<br>
<span>{{ result1 }}</span>
<br>
<input type="text" v-model="input2">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test2">测试</a>
<br>
<span>{{ result2 }}</span>
</form>
<script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
拓展知识：初试Vue之元素、属性赋值方法
我们在vue中数据赋值时，会很自然而然的想到用“Mustache” 双大括号插值法来赋值
在一个小案例中，比如给一个img标签附上链接 会很自然的想到
