本文不是 vue.js 的教程,只是一边看官网 vue 的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记。
而在 Angular 里是可以支持的,因为 angular 采用脏检查的方式实现双向绑定,vue 和 avalon 都是采用 setter 和 getter 实现双向绑定
例,如下代码在一秒后不会显示出 "xxcanghai" 的字样
- <div id="app">
- <h1>
- {{obj.text}}
- </h1>
- </div>
- <script>
- var v = new Vue({
- el: '#app',
- data: {
- obj: {}
- }
- });
- setTimeout(function() {
- v.obj.text = "xxcanghai"; //无效
- },
- 1000);
- </script>
若给定初始值,则可生效,如下:
- <div id="app">
- <h1>
- {{obj.text}}
- </h1>
- </div>
- <script>
- var v = new Vue({
- el: '#app',
- data: {
- obj: {
- text: "default Text" //给定初始值
- }
- }
- });
- setTimeout(function() {
- v.obj.text = "xxcanghai"; //有效
- },
- 1000);
- </script>
不过 Vue 其中比 avalon 好的一点是,Vue 在只是对初始化时不存在的属性赋值无效,但显示是不会报错的。而 avalon 则根本无法显示,对于上述第一段代码运行都会报错(不知道最新的 avalon 是否修改此问题)
好在 vue 中提供了 $set 方法来解决这种赋值失败的问题,如下:
- <div i<div id="app">
- <h1>
- {{obj.text}}
- </h1>
- </div>
- <script>
- var v = new Vue({
- el: '#app',
- data: {
- obj: {}
- }
- });
- setTimeout(function() {
- v.$set("obj.text", "xxcanghai"); //有效
- },
- 1000);
- </script>
虽然这种采用字符串来表示变量名的方式会导致无法使用强类型的预编译检查(TypeScript),但也至少算能解决问题吧。
如下代码:当文本框中的 value 属性与 v-model 冲突时会以 input 的 value 属性为优先,并覆盖 v-model 的属性
最终 console.log 输出的也是 "inputText"
- <div id="app">
- <input type="text" v-model="a" value="inputText">
- </div>
- <script>
- var v = new Vue({
- el: '#app',
- data: {
- a: "vueText"
- }
- });
- console.log(v.a); //inputText
- </script>
对于复选框类型的 input 上述结论也同样适用,如下:
- <div id="app">
- <input type="checkbox" v-model="isCheck" checked>
- </div>
- <script>
- var v = new Vue({
- el: '#app',
- data: {
- isCheck: false
- }
- });
- console.log(v.isCheck); //true
- </script>
复选框的 v-model 设定为 false 不选中,同时设定 checked 属性选中,最终效果为以 checked 属性优先,复选框被选中,同时 v.isCheck 属性被改写为 true。
- <div id="app">
- <button @click="dataFn">
- 1.dataFn
- </button>
- <!--输出:<button>,[MouseEvent]-->
- <button @click="dataFn()">
- 2.dataFn()
- </button>
- <!--输出:Vue,[]-->
- <button @click="methodsFn">
- 3.methodsFn
- </button>
- <!--输出:Vue,[MouseEvent]-->
- <button @click="methodsFn()">
- 4.methodsFn()
- </button>
- <!--输出:Vue,[]-->
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- dataFn: function() {
- console.log(this, arguments);
- }
- },
- methods: {
- methodsFn: function() {
- console.log(this, arguments);
- }
- }
- });
- //xxcanghai@博客园
- </script>
通过上述代码对比可以得到以下结论:
PS:当然你也可以使用 vue 内置的
来显示的传递 event 对象,以保证函数写在任何位置都可以正常使用 this 和 event。
- $event
- <div id="app">
- <button @click="dataFn($event)">
- 5.dataFn($event)
- </button>
- <!--输出:Vue,[MouseEvent]-->
- <button @click="methodsFn($event)">
- 6.methodsFn($event)
- </button>
- <!--输出:Vue,[MouseEvent]-->
- </div>
来源: http://www.cnblogs.com/xxcanghai/p/5849038.html