<body> <huitailang></huitailang> <script> var huitailanga = Vue.extend({ template: ‘<h2>我是{{age}}哈哈哈</h2>‘, data: function() { return { age: 12 } }, props: [‘a‘] }) new huitailanga({ propsData: { a: 1 } }).$mount(‘huitailang‘); </script> </body>
propsData 不是和属性有关，他用在全局扩展时进行传递数据。
扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。
我们用propsData三步解决传值：
1、在全局扩展里加入props进行接收。propsData:{a:1}
2、传递时用propsData进行传递。props:[‘a’]
3、用插值的形式写入模板。{{ a }}
<body> <div id="app">{{newAge}}{{newsList}}</div> <script> var app = new Vue({ el: ‘#app‘, data: { age: 22, list: [{ title: ‘香港或就“装甲车被扣”事件追责 起诉涉事运输公司‘, date: ‘2017/3/10‘ }, { title: ‘日本第二大准航母服役 外媒：针对中国潜艇‘, date: ‘2017/3/12‘ }, { title: ‘中国北方将有明显雨雪降温天气 南方阴雨持续‘, date: ‘2017/3/13‘ }, { title: ‘起底“最短命副市长”：不到40天落马，全家被查‘, date: ‘2017/3/23‘ }, ] }, computed: { newAge: function() { return this.age = "年龄" + this.age }, newsList: function() { return this.list.reverse(); } } }) </script> </body>
可以避免原始数据的污染。
<body> <div id="app">{{age}} <button v-on:click="add(2)">add</button> <but v-on:click.native="add(2)">自定义add</but> </div> <button onclick="app.add(3)">外部add</button> <script> var but = { template: ‘<button>我也加</button>‘ } var app = new Vue({ el: ‘#app‘, data: { age: 22 }, methods: { add: function(num) { return this.age += num } }, components: { "but": but } }) </script> </body>
<body> <div id="app">今日温度:{{wendu}} 适宜衣着：{{cloths}} <button @click="add">加</button> <button @click="daa">减</button> </div> <script> var app = new Vue({ el: ‘#app‘, data: { wendu: 20, cloths: "短袖" }, methods: { add: function() { return this.wendu += 5 }, daa: function() { return this.wendu -= 5 } }, watch: { // wendu: function(newValue, oldValue) { // if (newValue > 30) { // this.cloths = "背心" // } else if (newValue < 10) { // this.cloths = "毛衣" // } else { // this.cloths = "短袖" // } // } } }) app.$watch("wendu", function(newValue, oldValue) { if (newValue > 30) { this.cloths = "背心" } else if (newValue < 10) { this.cloths = "毛衣" } else { this.cloths = "短袖" } }) </script> </body>
两种监听方法，构造器的外部监听会更好，降低程序的耦合，使程序更加灵活。
Mixins一般有两种用途：
在已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
<body> <div id="app">{{age}} <button v-on:click="add(2)">add</button> </div> <script> var newadd = { updated: function() { console.log("数据发生变化") } } Vue.mixin({ updated: function() { console.log("全局混入") } }) var app = new Vue({ el: ‘#app‘, data: { age: 22 }, methods: { add: function(num) { return this.age += num } }, mixins: [newadd], updated: function() { console.log("原生updata") } }) </script> </body>
混入先执行，原生的后执行。
通过外部增加对象的形式，对构造器进行扩展
<body> <div id="app">{{age}} <button v-on:click="add">add</button> </div> <script> var asd = { updated: function() { console.log("我是扩展的updated"); }, methods: { add: function() { console.log("我也是扩展的"); } } } var app = new Vue({ el: ‘#app‘, data: { age: 22 }, methods: { add: function() { console.log("我是原生的"); } }, updated: function() { console.log(‘我是原生的updated‘); }, extends: asd, }) </script> ?
delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。
<body> <div id="app">#{message}</div> <script> var app = new Vue({ el: ‘#app‘, data: { message: ‘hello world‘ }, delimiters: [ ‘#{‘, ‘}‘ ] // 现在的插值形式就变成了#{} }) </script> </body>
原文：https://www.cnblogs.com/HuiTaiLang1216/p/vue3.html