一, vue.directive 自定义指令
在构造器外部用 Vue 提供给我们的 API 函数来定义新的功能.
- <div id="app">
- <div v-dong="color">{{num}} </div>
- <p><button @click="add">Add</button></p>
<p><button onclick="unbind()"> 解绑 <{$130
}p>
- </div>
- <script type="text/javascript">
- function unbind(){
- app.$destroy(); //vue 提供的解绑方法
- }
- Vue.directive("dong",{
- bind:function(el,binding){// 被绑定
- console.log('1 - bind');
- el.style = "color:"+binding.value;
- },
- inserted:function(){// 绑定到节点
- console.log('2 - inserted');
- },
- update:function(){// 组件更新
- console.log('3 - update');
- },
- componentUpdated:function(){// 组件更新完成
- console.log('4 - componentUpdated');
- },
- unbind:function(){// 解绑
- console.log('5 - unbind');
- }
- })
- var app = new Vue({
- el: '#app',
- data:{
- num:10,
- color: 'red'
- },
- methods:{
- add:function(){
- return this.num++;
- }
- }
- })
- </script>
二, Vue.extend 自定义扩展构造器
Vue.extend 返回的是一个 "扩展实例构造器", 也就是预设了部分选项的 Vue 实例构造器. 经常服务于 Vue.component 用来生成组件, 可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时, 会自动调用 "扩展实例构造器" 来生产组件实例, 并挂载到自定义元素上.
- <author></author>
- <script type="text/javascript">
- var authorExtend = Vue.extend({
- template:"<p><a :href='authorURL'>{{authorName}}</a></p>",
- data:function(){
- return{
- authorName:'dong',
- authorURL:'http://baidu.com'
- }
- }
- })
- new authorExtend().$mount("author");
- </script>
三, Vue.set 全局操作
Vue.set 的作用就是在构造器外部操作构造器内部的数据, 属性或者方法
- <div id="app">
- <ul>
- <li v-for="aa in arr">{{aa}}</li>
- </ul>
- </div>
- <button onclick="add()"> 外部添加 </button>
- <script type="text/javascript">
- function add(){
- console.log("我已经执行了");
- app.arr[1]='ddd';
- //Vue.set(app.arr,1,'ddd');
- }
- var outData={
- arr:['aaa','bbb','ccc']
- };
- var app=new Vue({
- el:'#app',
- data:outData
- })
- </script>
四, Vue 的生命周期 (钩子函数)
- beforeCreate:function(){
- console.log('1-beforeCreate 初始化之后');
- },
- created:function(){
- console.log('2-created 创建完成');
- },
- beforeMount:function(){
- console.log('3-beforeMount 挂载之前');
- },
- mounted:function(){
- console.log('4-mounted 被创建');
- },
- beforeUpdate:function(){
- console.log('5-beforeUpdate 数据更新前');
- },
- updated:function(){
- console.log('6-updated 被更新后');
- },
- activated:function(){
- console.log('7-activated');
- },
- deactivated:function(){
- console.log('8-deactivated');
- },
- beforeDestroy:function(){
- console.log('9-beforeDestroy 销毁之前');
- },
- destroyed:function(){
- console.log('10-destroyed 销毁之后')
- }
五, template 模板
直接在构造器里的 template 选项后边编写. 这种写法比较直观, 但是如果模板 html 代码太多, 不建议这么写.
1, 写在 <template> 标签里的模板
- <template id="demo2">
- <h2 style="color:red"> 我是 template 标签模板 </h2>
- </template>
- <script type="text/javascript">
- var app=new Vue({
- el:'#app',
- data:{
- message:'hello Vue!'
- },
- template:'#demo2'
- })
- </script>
2, 直接写在选项里的模板
- var app=new Vue({
- el:'#app',
- data:{
- message:'hello Vue!'
- },
- template:`
- <h1 style="color:red"> 我是选项模板 </h1>
- `
- })
3, 写在 <script> 标签里的模板
- <script type="x-template" id="demo3">
- <h2 style="color:red"> 我是 script 标签模板 </h2>
- </script>
- <script type="text/javascript">
- var app=new Vue({
- el:'#app',
- data:{
- message:'hello Vue!'
- },
- template:'#demo3'
- })
- </script>
六, Component 组件
1,<component></component> 标签是 Vue 框架自定义的标签, 它的用途就是可以动态绑定我们的组件, 根据数据的不同更换不同的组件.
- <div id="app">
- <component v-bind:is="who"></component>
- <button @click="changeComponent">changeComponent</button>
- </div>
- <script type="text/javascript">
- var componentA={
- template:`<div style="color:red;">I'm componentA</div>`
- }
- var componentB={
- template:`<div style="color:green;">I'm componentB</div>`
- }
- var componentC={
- template:`<div style="color:pink;">I'm componentC</div>`
- }
- var app=new Vue({
- el:'#app',
- data:{
- who:'componentA'
- },
- components:{
- "componentA":componentA,
- "componentB":componentB,
- "componentC":componentC,
- },
- methods:{
- changeComponent:function(){
- if(this.who=='componentA'){
- this.who='componentB';
- }else if(this.who=='componentB'){
- this.who='componentC';
- }else{
- this.who='componentA';
- }
- }
- }
- })
- </script>
2, 父子组件的嵌套
- <div id="app">
- <jspang></jspang>
- </div>
- <script type="text/javascript">
- var city={
- template:`<div>Sichuan of China</div>`
- }
- var jspang = {
- template:`<div>
- <p> Panda from China!</p>
- <city></city>
- </div>`,
- components:{
- "city":city
- }
- }
- var app=new Vue({
- el:'#app',
- components:{
- "jspang":jspang
- }
- })
- </script>
3, 定义属性并获取属性值
- <div id="app">
- <panda here="China"></panda>
- </div>
- <script type="text/javascript">
- var app=new Vue({
- el:'#app',
- components:{
- "panda":{
- template:`<div style="color:red;">Panda from {{ here }}.</div>`,
- props:['here']
- }
- }
- })
- </script>
4, 局部及全局注册组件
- <div id="app">
- <panda></panda>
- </div>
- <script type="text/javascript">
- var app=new Vue({
- el:'#app',
- components:{
- "panda":{
- template:`<div style="color:red;"> 局部注册的 panda 标签 </div>`
- }
- }
- })
- </script>
- <div id="app">
- <jspang></jspang>
- </div>
- <script type="text/javascript">
- // 注册全局组件
- Vue.component('jspang',{
- template:`<div style="color:red;"> 全局化注册的 jspang 标签 </div>`
- })
- var app=new Vue({
- el:'#app',
- data:{
- }
- })
- </script>
来源: http://www.qdfuns.com/note/20768/13ada5aa1de1391be2953ed074ebb104.html