Vue.js - Day4

父组件向子组件传值

1. 组件实例定义方式，注意：一定要使用

   props

   属性来定义父组件递过来的数据

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

1. 使用

   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>

什么是路由

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

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

在vue 中使用 vue-router

1. 导入 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>'
});

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

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

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

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

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

设置路由重定向

设置路由高亮

设置路由切换动画效果

在路由规则中定义参数

1. 在规则中定义参数：

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

1. 通过

   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’ 属性的使用

考虑一个问题： 想要实现

名

和

姓

两个文本框的内容改变，则全名的文本框中的值也跟着改变； （用以前的知识如何实现？？？）

1. 监听

   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

计算属性的使用

1. 默认只有

   getter

   的计算属性：

<div id="app">
<input type="text" v-model="firstName"> +
<input
20000
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>

1. 定义有

   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

之间的对比

1. computed

   属性的结果会被缓存， 除非依赖的响应式属性变化才会重新计算。 主要当作属性来使用；
   2.

   methods

   方法表示一个具体的操作， 主要书写业务逻辑；

2. watch

   一个对象， 键 是需要观察的表达式，值 是对应的回调函数。 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作； 可以看作是

   computed

   和

   methods

   的结合体；

nrm

的安装使用

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

npm i nrm -g

全局安装

nrm

包；
2.使用

nrm ls

查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
3.使用

nrm use npm

或

nrm use taobao

切换不同的镜像源地址；

相关文件

1.【URL 中的 hash (井号)】(http://www.cnblogs.com/joyho/articles/4430148.html)