Vue总结（三）

Posted on 2019-02-26 In Vue

computed

<div id="app">
    <input type="text" v-model="firstName">+
    <input type="text" v-model="lastName">=
    <input type="text" v-model="fullName">
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: "",
  },
  computed: {
    // 使用计算属性不需要()
    // 只要此function中使用的任何数据发生变化，就会重新计算值
    fullName: function () {
      return this.firstName + "-" + this.lastName
    },
  },
})
</script>

watch

<div id="app">
    <input type="text" v-model="firstName" @keyup="getFullName">+
    <input type="text" v-model="lastName" @keyup="getFullName">=
    <input type="text" v-model="fullName">
    <br>
    <input type="text" v-model="firstName">+
    <input type="text" v-model="lastName">=
    <input type="text" v-model="fullName">
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: "",
    fullName: "",
  },
  methods: {
    getFullName() {
      this.fullName = this.firstName + "-" + this.lastName
    },
  },
  watch: {
    firstName: function (newValue, oldValue) {
      this.fullName = newValue + "-" + this.lastName
      console.log(oldValue)
    },
    lastName: function (newValue) {
      this.fullName = this.firstName + "-" + newValue
    },
  },
})
</script>

全局组件

<div id="app">
    <my-component></my-component>
    <my-component2></my-component2>
</div>
<template id="tmp1">
  <h1>template 1</h1>
</template>
<script>
var com1 = Vue.extend({
  template: `<h3>Vue.extend</h3>`,
})
Vue.component("my-component2", {
  template: "#tmp1",
})
Vue.component("my-component", com1)
var vm = new Vue({
  el: "#app",
})
</script>

私有组件

<div id="app">
    <login></login>
    <test-component></test-component>
</div>
<template id="tmp1">
  <div>Message</div>
</template>
<script>
var vm = new Vue({
  el: "#app",
  components: {
    login: {
      template: "<h1>private component</h1>",
    },
    testComponent: {
      template: "#tmp1",
    },
  },
})
</script>

组件传值

<div id="app">
    <com1 v-bind:parent-msg="msg"></com1>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    msg: "parent message",
  },
  components: {
    com1: {
      props: ["parentMsg"], // 父组件的数据 readonly
      template: '<h1 @click="change">fff --- { { parentMsg } }</h1>',
      data() {
        // 组件私有的，ajax请求的数据可以放在组件的data上 readwrite
        return {
          title: "abd",
        }
      },
      methods: {
        change() {
          this.parentMsg = "changed"
        },
      },
    },
  },
})
</script>

组件传递 method

<div id="app">
    <com2 v-on:func="show"></com2>
</div>
<template id="tmpl">
  <div>
    <h1>child template</h1>
    <input type="button" value="child button" v-on:click="myClick" />
  </div>
</template>
<script>
var com2 = {
  template: "#tmpl",
  data() {
    return {
      childMsg: {
        name: "Edward",
        age: 3,
      },
    }
  },
  methods: {
    myClick() {
      console.log("myClick called")
      this.$emit("func", this.childMsg)
    },
  },
}
var vm = new Vue({
  el: "#app",
  data: {
    dataFromChild: null,
  },
  components: {
    com2,
  },
  methods: {
    show(data) {
      this.dataFromChild = data // 子组件向父组件传值
    },
  },
})
</script>

组件切换

<div id="app">
    <a href="" v-on:click.prevent="flag = true">Login in</a>
    <a href="" v-on:click.prevent="flag = false">Sign in</a>

    <login v-if="flag"></login>
    <register v-else></register>


    <a href="" v-on:click.prevent="comName = 'login'">Login in</a>
    <a href="" v-on:click.prevent="comName = 'register'">Sign in</a>
    <component :is="comName"></component>

</div>
<script>
Vue.component("login", {
  template: "<h3>Login</h3>",
})
Vue.component("register", {
  template: "<h3>Register</h3>",
})

var vm = new Vue({
  el: "#app",
  data: {
    flag: true,
    comName: "login",
  },
})
</script>

vue-router

<div id="app">
    <!-- tag改变展示元素 -->
    <router-link to="/login" tag="span">Login</router-link>
    <router-link to="/register">Register</router-link>
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>
<script>
var login = {
  template: "<h1>login</h1>",
}
var register = {
  template: "<h1>register</h1>",
}
const routerObj = new VueRouter({
  routes: [
    // 路由匹配规则 path, component必须参数
    {
      path: "/",
      redirect: "/login",
    }, // redirect 重定向
    {
      path: "/login",
      component: login,
    },
    {
      path: "/register",
      component: register,
    },
  ],
  linkActiveClass: "myactive",
})
var vm = new Vue({
  el: "#app",
  methods: {},
  router: routerObj,
})
</script>

路由传参

<div id="app">
    <router-link to="/login?id=10&name=zhangsan">Login</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
</div>
<script>
var login = {
  template:
    "<h1>Login --- { { $route.query.id } } --- { { $route.query.name } }</h1>",
  data() {
    return {
      msg: "123",
    }
  },
  created() {
    // 组件的生命周期
    console.log(this.$route.query.id)
  },
}
var register = {
  template: "<h1>Register</h1>",
}
const router = new VueRouter({
  routes: [
    {
      path: "/login",
      component: login,
    },
    {
      path: "/register",
      component: register,
    },
  ],
})
var vm = new Vue({
  el: "#app",
  router,
})
</script>

路由嵌套

<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>
<template id="tmpl">
  <div>
    <h1>Account component</h1>
    <router-link to="/account/login">Login</router-link>
    <router-link to="/account/register">Register</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
var account = {
  template: "#tmpl",
}
var login = {
  template: "<h1>Login</h1>",
}
var register = {
  template: "<h1>Register</h1>",
}
const router = new VueRouter({
  routes: [
    {
      path: "/account",
      component: account,
      children: [
        // 子路由path不带 '/' 否则以根目录还是匹配
        {
          path: "login",
          component: login,
        },
        {
          path: "register",
          component: register,
        },
      ],
    },
  ],
})
var vm = new Vue({
  el: "#app",
  router,
})
</script>

render 渲染组件

<div id="app">
</div>
<script>
var login = {
  template: "<h1>Login</h1>",
}

var vm = new Vue({
  el: "#app",
  data: {},
  methods: {},
  render: function (createElements) {
    // 将指定的模板渲染成 html
    return createElements(login) // return 的结果会替换 el 指定的容器
  },
})
</script>