1.tempele

template不仅是模板最外面的标签，同时，它也可以作为一个普通的标签使用，为了保证ul-li结构下能够使子组件与li同级，写法如下：

可以使用 v-if 来控制部分区域的显示与隐藏时:

*template不能与v-show一起使用

2.子组件索引

可以使用 ref 为子组件指定一个索引 ID，被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象。如果在普通的DOM上使用，引用指向的就是DOM元素；如果用在子组件上，引用指向组件实例：

(1)在普通页面使用时

在子组件上使用时：


在父组件中使用子组件的方法，首先引用对象是this，其次由于页面使用v-for来渲染子组件，ref便是一个数组，通过被点击的index值来确定执行哪一个子组件的open方法。

3.传值

(1)$emit传值
子组件给父组件传值,this.$emit(fun,pram)第一个参数为事件名，第二个参数为传入的数据，可以为对象，如下：

1
2
3

submit () {
  this.$emit('inp', {value: this.msg. imgs: ['img1', 'img2'])
}

1

<child ref="in" v-model="li.state" :str="str" @inp="inp"></child>

在父组件引用子组件时添加一个函数，v-on:function = “function1”,其中function是在子组件使用的函数，function1是在父组件使用函数，相当于在子组件间触发方法inp时，父组件也将执行自身的inp方法。

(2)props传值
父组件给子组件传值，在子组件页面，在props属性中定义一个变量，声明变量的类型，访问时如同data属性中生命的变量一样，this.propA。

1

props:['propA']

又或者写成

1
2
3
4
5
6
7
8
9
10

props:{
  propA: {
    type: String,
    required: true
  }, 
  propB: {
    type: Number,
    default: 100
  }
}

props可为数组亦可为对象，其实在props定义的变量就等于像在data函数中定义的变量，若是在props对象中定义的变量可以添加该变量的规定类型、默认值等一些校验。当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

4.v-model

(1)场景一：v-model在input元素中的使用

能够让p标签中的文字为输入框中实时输入的文字，首先在实例中声明变量，可以给一个默认值，也可为空；在模板中将p标签的文本内容用{{ }}进行数据绑定，在输入框中用v-model绑定实例中声明的变量，实现数据的双向绑定，如下图:



事实上，在input标签中为如下图的缩写：

1

<input v-bind:value="message" v-on:input="message = $event.target.value">

要想能够使v-model生效，接受一个 value 属性，在有新的值时触发 input 事件，input事件是html5新添加事件，每当输入框（input或textarea）的内容发生改变时，就会触发并将值传给message。

(1)场景二：v-model在组件上的使用

更改子组件的值能实时更新父组件的值，在子组件中将值传给父组件，利用emit事件传值，用input作为触发事件的事件名，因为在子组件中的textarea的内容发生改变时，触发该事件。

1

this.$emit('input', {value: this.msg, imgs:['image1', 'image2']})

在子组件中添加v-model属性时，默认会把value作为子组件的属性。

1

<child v-model="li.state"></child>

——————————–分割线——————————–

对input事件以及父子组件之间传值的理解

(1)父子组件传值
若在子组件，emit写法如下：

1
2
3
4
5
6
7
8
9
10

this.$emit('inp', {value: this.msg, imgs:['image1', 'image2']})

// 在父组件引用子组件如下：
<child v-model="li.state" @inp="inp"></child>

// 父组件中inp事件如下：
inp (data) {
  console.log(data)
}
data便是emit事件的参数，并且将会把值传给li.state结果是：{value: '111', imgs: Array(2)}

(2)对input事件的思考
若子组件，emit写法如下：

1
2
3

this.$emit('input', {value: this.msg, imgs:['image1', 'image2']})
// 父组件下写法如下
<child v-model="li.state" @input="inp"></child>

当子组件为input或textarea元素时，用v-model绑定在父组件中子组件时，emit事件以input为触发事件名，将返回的结果添加到input元素或textarea元素的value属性上，页面中声明的inp事件与本身子组件的内容发生改变所触发的input事件叠加，那么这个时候打印的date便是子组件中的value值，打印结果如下：

5.父子组件之间的双向绑定

1
2
3
4
5
6
7
8
9
10

 <child v-model="li.state" @inp="inp" :str="str"></child>
 // 在子组件中的props属性定义一个变量，变量的名字随意，类型需要确定，如下：
 props: {
   str: String,
   value: Object
 }
在子组件mounted方法时将值对页面中需要绑定的变量进行绑定，当父组件中的value有值时，将值赋值给子组件的变量，如下：
mounted () {
  if (this.value) this.msg = this.value.value
}

6.watch监听

当父组件中的值动态改变时，子组件需要监听才能进行实时改变，例如在父组件中设定一个延迟器，延迟改变值，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

  mounted () {
  setTimeout (() => {
    this.list[0].status.value  = '异步'
  }, 2000)
}
// 在子组件中就需要利用监听事件，写法如下：
watch: {
  'value.value' (val) {
    if (val) this.msg = val.value
  }
}
// 由于数组结构如下，为了监听value值的变化，所以是value对象中的value属性，如果有值将值渲染到页面中
list: [{name:'任务', status: {value: '222', imgs: []}}]

上边是watch监听一个属性，也可以监听一个对象，写法如下：
`
watch: {
value: {
handler: function (val) {
if (val) this.msg = val.value
},
deep: true
}
}

7.当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

———————美丽的分割线———————
ps：以上都是开始学习vue的时候做的笔记，最近整理到博客上，也发现了其中的一些不足，慢慢完善

1. get、post概述

get，post为两种请求方式，直观上的区别是，get的请求将请求的数据显示在url上，比如我在百度搜索’get’一词的时候，浏览器的URL地址变成：https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=get&rsv_pq=afdd00d5000058f7&rsv_t=94c5xvQi9LazQd58Y%2FTkD6Md5CXhxCNUEbxaryQAzTEGpOJ1J730WnTJboo&rqlang=cn&rsv_enter=1&rsv_sug3=4&rsv_sug1=3&rsv_sug7=100&rsv_sug2=0&inputT=1659&rsv_sug4=2475，以?分割URL和传输数据，参数之间以&相连；
post请求提交的数据则放置在是HTTP包的包体中。从而体现了get与post安全性的问题，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1登录页面有可能被浏览器缓存或者其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了。

2.get请求限制

由于GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了，而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。理论来说，POST是没有大小限制的，HTTP协议规范也没有进行大小限制，起限制作用的是服务器的处理程序的处理能力。

3.get、post请求传递参数不同

get传递参数的方式，能够看到首先定义一个对象，存放需要传递的参数，在进行get请求的时候，第一个参数为url地址，第二个参数为参数列表，以对象key:value的方式进行传递，post请求传递URl地址以及参数对象就可以了。

post请求

1

$http.post(API_HOST+'/scenery/adminInsertId', params).then(function (res) {})

get请求

1
2
3

$http.post(API_HOST+'/scenery/adminInsertId', {params:params}).then(function (res) {})
或者,若get请求只有一个参数的时候，也可以拼接在的url后边，参数为code：
$http.get(API_HOST+'/session/getUserInfoByCode?code=' + code).then(function (res) {})