shawndxl/vue&webpack.md

## vue&webpack.md

      
    Raw
  

              vue&webpack.md
            
          
    Vue + Webpack Demo


入门教程

Vue


最简单的

<div id='app'>
<p>{{name}}</p>
<p>{{age}}</p>
</div>
<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
new Vue({
  el: '#app',
  data: {
    name: 'Jim',
    age: 22
  }
})
</script>

使用组件

<div id='app'>
<my-component></my-component>
</div>
<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
var myCom = Vue.extend({
  template: '<span>Hello World!</span>'
});
Vue.component('my-component', myCom);
new Vue({
  el: '#app',
})
</script>

使用多层组件

<div id='app'>
<my-component></my-component>
</div>
<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
var Child = Vue.extend({
  template: '<span>Hello World!</span>'
});
var Parent = Vue.extend({
  template: '<div><p>focus on the next element</p><my></my></div>',
  components: {
    'my': Child
  }
});
Vue.component('my-component', Parent);
new Vue({
  el: '#app',
})
</script>

优化多层组件

<div id='app'>
<div is='my-component'></div>
</div>
<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
var Child = Vue.extend({
  template: '<span>Hello World!</span>'
});
var Parent = Vue.extend({
  template: '<div><p>focus on the next ele</p><my-a></my-a></div>',
  components: {
    'my-a': Child
  }
});
Vue.component('my-component', Parent);
new Vue({
  el: '#app',
})
</script>

再优化多层组件

<div id='app'>
<div is='a'></div>
</div>
<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
var Child = Vue.extend({
  template: '<span>Hello World!</span>'
});
var Parent = Vue.extend({
  template: '<div><p>focus on the next ele</p><my-a></my-a></div>',
  components: {
    'my-a': Child
  }
});
new Vue({
  el: '#app',
  components: {
    a: Parent
  }
})
</script>

再优化 + 父模板传递参数到子模板

<div id='app'>
<div is='a'></div>
</div>

<script type='text/template' id='temp'>
  <div>
    <p>focus on the next ele</p>
    <child1 msg="hello" name="Jim Gorden"></child1>
  </div>
</script>

<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
var parentDom = document.querySelector('#temp').innerHTML;

var Parent = Vue.extend({
  template: parentDom,
  components: {
    'child1': Vue.extend({
      props: ['msg','name'],
      template: '<span>{{msg}}</span><span>{{name}}</span>'
    })
  }
});
new Vue({
  el: '#app',
  components: {
    a: Parent
  }
})
</script>

多个Vue + 动态模板

<html>
<head></head>
<body>
<div class='page'>
  <p>{{name}}</p>
</div>
<script type='text/template' id='temp'>
  <h1>I m H 1</h1>
  <div id='newElement'>
    <p>focus on the next ele</p>
    <child1 msg-name="hello" name="Jim Gorden"></child1>
  </div>
</script>
</body>
<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
var div = document.createElement('div');
div.innerHTML = '<div is="a"></div>';
document.body.appendChild(div);

var parentDom = document.querySelector('#temp').innerHTML;
var Parent = Vue.extend({
  template: parentDom,
  components: {
    'child1': Vue.extend({
      props: ['msgName','name'], /*传递参数中驼峰写法(msgName)需要在使用时转换为横杠写法(msg-name)*/
      template: '<span>{{msgName}}</span><span>{{name}}</span>'
    })
  }
});
var aaa = new Vue({
  el: div, /* 不要定义自己的范围是body等，会导致该范围内的其他vue定义无效 */
  components: {
    a: Parent
  }
})

var vm = new Vue({
  el: '.page',
  data: {
    name: 'shawn'
  }
})
</script>
</html>

动态数据 + 子组件中的计算

<div id='app'>
  <input v-model='num'>
  <child is='child' msg='+1=' :num='num'></child>
  <!-- msg是静态数据，:msg是动态数据 -->
</div>

<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    num: 0
  },
  components: {
    child: Vue.extend({
      props: ['msg', 'num'],
      template: '<span>{{msg}}{{num1}}</span>',
      computed: {
        num1: function() {
          return parseInt(this.num) + 1; /* 注意这里的this */
        }
      }
    })
  }
})
</script>

子元素向父元素传递事件 + v-ref

<html>
<head></head>
<body>
<div id='events-example'>
  <p>Message:{{messages | json}}</p>
  <!-- |json default use JSON.stringify(text) -->
  <child is='a' v-ref:profile></child>
  <br><button v-on:click='notify'>test v-ref</button>
</div>
</body>

<template id='child-template'>
  <!-- template天生隐藏、位置随意、headbody都可以,在引用之前即可 -->
  <input v-model='msg'>
  <button v-on:click='notify'>Dispatch Event</button>
</template>

<script src='bower_components/vue/dist/vue.min.js'></script>
<script>
/* 声明 */
/* 并没有使用extend扩展也可以 */
var child = Vue.extend({
  template: '#child-template',
  data: function() { /* 不使用function 的话在内部能够访问到，在外部访问不到 */
    return {
      msg: 'hello',
      name: 'Jim'
    }
  },
  methods: {
    notify: function () {
      if (this.msg.trim()) {
        this.$dispatch('child-msg', this.msg);
        this.msg = '';
      }
    }
  }
})
/* 全局注册 */
//Vue.component('child', child);

new Vue({
  el: '#events-example',
  data: {
    messages: []
  },
  // 在创建实例时 `events` 选项简单地调用 `$on`
  events: {
    'child-msg': function (msg) {
      this.messages.push(msg)
    }
  },
  methods: {
    notify: function() {
      var a = this.$refs.profile.name;
      console.log(a)
    }
  },
  components: {
    a: child /* 在这里直接使用需要child 进行Vue.extend扩展，如果是component()则不用 */
  }
})
</script>
</html>
No results found