VUE 关于父组件与子组件与路由与watch监听属性与computed计算属性笔记

#Vue.js - Day4父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件递过来的数据&amp;lt;script&amp;gt;//创建 Vue 实例，得到ViewModelvar vm = new Vue({el: '#app',data: {msg: '这是父组件中的消息'},components: {son: {...

爱萧萧

4496人浏览 · 2019-03-01 01:07:28

爱萧萧 · 2019-03-01 01:07:28 发布

Vue.js - Day4

父组件向子组件传值

组件实例定义方式，注意：一定要使用props属性来定义父组件递过来的数据

<script>
//创建 Vue 实例， 得到ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    msg: '这是父组件中的消息'
  },
  components: {
    son: {
      template: '<h1>这是子组件 -----{{finfo}}',
      props: ['finfo]
    }
  }
});
</script>

使用v-bind或简化指令，将数据传递到子组件中：

<div id="app">
  <son :finfo="msg"></son>
</div>

子组件向父组件传值

1.原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的放大，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
2.父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

<son @func="getMsg"></son>

3.子组件内部通过this.Semit('方法名', 要传递的数据) 方式，来调用父组件的方法，同时把数据传递给父组件使用

<div id="app">
  <!-- 引用父组件 -->
  <son @func="getMsg"></son>

  <!-- 组件模版定义 -->
  <script type="x-template" id="son">
    <div>
      <input type="button" val="向父组件传值" @click="sendMsg" />
    </div>
  </script>
</div>

<script>
//子组件的定义方式
Vue.component('son', {//组件模版id
  template: '#son',
  methods: {
    sendMsg() {//按钮的点击事件
      this.$emit('func', 'OK');//调用父组件传递过来的方法，同时把数据传递出去
    }
  }
});

//创建 Vue 实例， 得到ViewModel
var vm = new Vue({
  el: 'app',
  data: {},
  methods: {
    getMsg(val){ //子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
      alert(val);
    }
  }
});
</script>

评论列表案例

目标：主要练习父子组件之间传值

使用 `this.$refs` 来获取元素和组件

<div id="app">
  <div>
    <input type="button" value="获取元素内容" @click="getElement" />
    <!-- 使用refs获取元素 -->
    <h1 ref="myh1">这是一个大大的H1</h1>

    <hr>

    <!-- 使用 ref 获取子组件 -->
    <my-com ref="mycom"></my-com>
  </div>
</div>

<script>

Vue.component('my-com', {
  template: '<h5>这是一个子组件</h5>'
  data() {
    return {
      name: '子组件'
    }
  }
})；

//创建 Vue 实例， 得到ViewModel
var vm = new Vue({
  el: 'app',
  data: {},
  methods: {
    getElement(){
      //通过this.$refs 来获取元素
      console.log(this.$refs.myh1.innerText);
      //通过 this.$refs 来获取组件
      console.log(this.$refs.mycom.name);
    }
  }
});

</script>

什么是路由

后端路由： 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
**前端路由：**对于单页面应用程序来说，主要通过URL的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP 请求中不会包含hash相关内容；所以，单页面程序中的页面跳转主要用hash实现；

3.在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在vue 中使用 vue-router

导入 vue-router 组件类库：

<!-- 1. 导入 vue-router 组件类库 -->
<script src="./lib/vue-router-2.7.0.3.js"></script>

2.使用 router-link 组件来导航

<!-- 2.使用 router-link 组件来导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

3.使用 router-view 组件来显示匹配的组件

<!-- 3.使用 router-view 组件来显示匹配的组件 -->
<router-view></router-view>

4.创建使用 Vue.extend 创建组件

//4.1 使用Vue.extend 来创建登录组件
var login = Vue.extend({
  template: '<h1>登录组件</h1>'
});

//4.2 使用Vue.extend 来创建注册组件
var register = Vue.extend({
  template: '<h1>注册组件</h1>'
});

创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

//5.创建一个路由 router  实例，  通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
  routers: {
    {path: '/login', component: login },
    {path: '/register', component: register },
  }
});

使用 router 属性来使用路由规则

  //6. 创建 Vue 实例， 得到ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    router: router// 使用 router 属性来使用路由规则
  })

使用 tag 属性指定 router-link 渲染的标签类型

设置路由重定向

设置路由高亮

设置路由切换动画效果

在路由规则中定义参数

在规则中定义参数：

{ path: '/register/:id', component: register }

通过 this.$route.params来获取路由中的参数：

 var register = Vue.extend({
  template: '<h1> 注册组件 ----  {{ this.$route.params.id }}</h1>'
 });

使用 `children` 属性实现路由嵌套

<div id="app">
  <router-link to="/account">Account</router-link>

  <router-view></router-view>

</div>

<script>
//父路由中的组件
const account = Vue.extend({
  template: `<div>
    这是 account 组件
    <router-link to="/account/login">login</router-link>
    <router-link to="/account/login">login</router-link>
    <router-view></router-view>
  </div>`
});

//子路由中的login 组件
const login = Vue.extend({
  template: '<div>登录组件</div>'
})；

//子路由中的register 组件
const register = Vue({
  template: '<div>注册组件</div>'
});

//路由实例
var router = new VueRouter({
  routes: [
    { path: '/', redirect: '/account/login' }, //使用 redirect 实现路由重定向
    {
      path: '/account',
      component: account,

      children: [ // 通过 children 数组 属性，来实现路由的嵌套
        { path: 'login', component: login }, //注意， 子路由的开头位置， 不要加 / 路径符
        { path: 'register', component: register }
      ]
    }
  ]
})；

//创建 Vue 实例， 得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  components: {
    account
  },
  router: router
})
</script>

命名视图实现经典布局

1.标签代码结构

<div id="app">
  <router-view></router-view>
  <div class="content">
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>
</div>

2.JS 代码


<script>

var header = Vue.component('header', {
  template: '<div class="header"> header </div>'
});

var sidebar = Vue.component('sidebar', {
  template: '<div class="sidebar"> sidebar </div>'
});

var minbox = Vue.component('minbox', {
  template: '<div class="minbox"> minbox </div>'
});

//创建路由对象
var router = new VueRouter({
  routes: [
    {
      path: '/', component: {
        default: header,
        a: sidebar,
        b: mainbox
      }
    }
  ]
});

//创建 Vue  实例 ， 得到ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  router
});

</script>

3.CSS 样式：

<style>

.header {
  border: 1px soild red;
}

.content {
  display: flex;
}

.sidebar {
  flex: 2;
  border: 2px solid green;
  height: 500px;
}

.mainbox {
  flex: 8;
  border: 1px solid blue;
  height: 500px;
}
</style>

‘watch’ 属性的使用

考虑一个问题：想要实现 名和姓两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

监听 data 中属性的改变：

<div id="app">
  <input type="text" v-model="firstName"> +
  <input type="text" v-model="lastName"> =
  <span>{{fullName}}</span>
</div>

<script>

// 创建 Vue 实例 得到ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'jack',
    lastName: 'chen',
    fullName: 'jack - chen'
  },
  methods: {},
  watch: {
    'firstName': function(newVal, oldVal){ //第一个参数是新数据， 第二个参数是旧的数据
      this.fullName = newVal + '-' + this.lastName;
    },
    'lastName': function(newVal, oldVal){
      this.fullName = this.firstName + '-' + oldVal;
    }
  }
});
</script>

2.监听路由对象的改变：

<div id="app">
  <router-link to="/login">登录</router-link>
  <router-link to="/register">注册</router-link>

  <router-view></router-view>
</div>

<script>
var login = Vue.extend({
  template: '<h1>登录组件</h1>'
});

var register = Vue.extend({
  template: '<h1>注册组件</h1>'
});

var router = new VueRouter({
  routes: [
    { path: '/login', component: login },
    { path: '/register', component: register}
  ]
});

// 创建 Vue 实例， 得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  router: router,
  watch: {
    '$route': function(newVal, oldVal){
      if(newVal.path === '/login'){
        console.log('这是登录组件');
      }
    }
  }
});

</script>

`computed` 计算属性的使用

默认只有 getter 的计算属性：

<div id="app">
  <input type="text" v-model="firstName"> +
  <input type="text" v-model="lastName"> =
  <span>{{ fullName }}</span>
</div>

<script>

//创建Vue 实例。 得到 ViewModel 
var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'jack',
    lastName: 'chen'
  },
  methods: {},
  computed: {
    funllName(){
      return: this.firstName + '-' + this.lastName;
    }
  }
});

</script>

定义有getter 和 setter 的计算属性：

<div id="app">

  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
  <input type="button" value="修改fullName" @click="changeName">
  
  <span>{{ fullName }}</span>
</div>

<script>
//创建 Vue 实例， 得到ViewModel 
var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'jack',
    lastName: 'chen'
  },
  methods: {
    changeName(){
      this.fullName = 'TOM - cheen2';
    }
  },
  computed: {
    fullName: {
      get: function(){
        return this.firstName + ' - ' + this.lastName;
      },
      set: function(newVal){
        var parts = newVal.split(' - ');
        this.firstName = parts[0];
        this.lastName = parts[1];
      }
    }
  }
});
</script>

`watch`、 `computed` 和 `methods` 之间的对比

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
2.methods 方法表示一个具体的操作，主要书写业务逻辑；
watch 一个对象，键是需要观察的表达式，值是对应的回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；

`nrm` 的安装使用

作用：提供了一些常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；
声明是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；
1.运行 npm i nrm -g 全局安装 nrm 包；
2.使用nrm ls 查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
3.使用nrm use npm 或 nrm use taobao 切换不同的镜像源地址；