（12）打鸡儿教你Vue.js

组件

语法格式如下：

Vue.component(tagName, options)<tagName></tagName>

<div id="app">    <da></da></div> <script>// 注册Vue.component('da', {  template: '<h1>自己设置组件!</h1>'})// 创立根实例new Vue({  el: '#app'})</script>

局部组件

<div id="app">    <da></da></div> <script>var Child = {  template: '<h1>自己设置组件!</h1>'} // 创立根实例new Vue({  el: '#app',  components: {    // <da> 将只在父模板可用    'da': Child  }})</script>

父组件的数据需要通过 props 把数据传给子组件

<div id="app">    <child message="hello!"></child></div> <script>Vue.component('child', {  // 公告 props  props: ['message'],  template: '<span>{{ message }}</span>'})new Vue({  el: '#app'})</script>

<div id="app">    <child message="hello!"></child></div>动态 Propv-bind 动态绑定 props 的值到父组件的数据中

div id="app">    <div>      <input v-model="parentMsg">      <br>      <child v-bind:message="parentMsg"></child>    </div></div> <script>// 注册Vue.component('child', {  // 公告 props  props: ['message'],  // 同样也可以在 vm 实例中像 "this.message" 这样使用  template: '<span>{{ message }}</span>'})// 创立根实例new Vue({  el: '#app',  data: {    parentMsg: '父组件内容'  }})</script>

<div id="app">    <ol>    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>      </ol></div> <script>Vue.component('todo-item', {  props: ['todo'],  template: '<li>{{ todo.text }}</li>'})new Vue({  el: '#app',  data: {    sites: [      { text: 'Runoob' },      { text: 'Google' },      { text: 'Taobao' }    ]  }})</script>

使用 $on(eventName)监听事件
使用 $emit(eventName) 触发事件

自己设置指令

image.png

<div id="app">    <p>页面载入时，input 元素自动获取焦点：</p>    <input v-focus></div> <script>// 注册一个全局自己设置指令 v-focusVue.directive('focus', {  // 当绑定元素插入到 DOM 中。  inserted: function (el) {    // 聚焦元素    el.focus()  }})// 创立根实例new Vue({  el: '#app'})</script>

image.pngimage.png

路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

Vue.js + vue-router 可以很简单的实现单页应用。

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

混入 (mixins)定义了一部分可复用的方法或者者计算属性。

var vm = new Vue({    el: '#databinding',    data: {    },    methods : {    },});// 定义一个混入对象var myMixin = {    created: function () {        this.startmixin()    },    methods: {        startmixin: function () {            document.write("欢迎来到混入实例");        }    }};var Component = Vue.extend({    mixins: [myMixin]})var component = new Component();

选项合并

var mixin = {    created: function () {        document.write('混入调用' + '<br>')    }}new Vue({    mixins: [mixin],        created: function () {        document.write('组件调用' + '<br>')    }});混入调用组件调用

Vue 实例优先级会较高

var mixin = {    methods: {        hellworld: function () {            document.write('HelloWorld 方法' + '<br>');        },        samemethod: function () {            document.write('Mixin：相同方法名' + '<br>');        }    }};var vm = new Vue({    mixins: [mixin],    methods: {        start: function () {            document.write('start 方法' + '<br>');        },        samemethod: function () {            document.write('Main：相同方法名' + '<br>');        }    }});vm.hellworld();vm.start();vm.samemethod();输出结果为：HelloWorld 方法start 方法Main：相同方法名

Vue 可以增加数据动态响应接口。

<div id = "app">    <p style = "font-size:25px;">计数器: {{ counter }}</p>    <button @click = "counter++" style = "font-size:25px;">点我</button></div><script type = "text/javascript">var vm = new Vue({    el: '#app',    data: {        counter: 1    }});vm.$watch('counter', function(nval, oval) {    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');});setTimeout(    function(){        vm.counter += 20;    },10000);</script>

Vue.set( target, key, value )

请点赞！由于你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群