Vue总结

Vue不支持IE8 及以下版本
1、指令：

---

v-bind，
v-if="seen"，
v-for="todo in todos"，
v-on 指令添加一个事件监听器，
<button v-on:click="reverseMessage">逆转消息</button>

v-if：
1、v-if 是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，
完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。
2、v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，它不会执行任何操作 - 在条件第一次变为 true 时，才开始渲染条件块。
相比之下，v-show 要简单得多 - 不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。

v-if和v-show的区别? v-if 在切换时有更高的性能开销， 而 v-show 在初始渲染时有更高的性能开销。
因此，如果需要频繁切换，推荐使用 v-show， 如果条件在运行时改变的可能性较少，推荐使用 v-if。

2、常用指令有哪些？

---

v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on v-on:click="doThis(item)"
v-bind 动态地绑定一个或多个特性，或一个组件 prop 到表达式
v-bind:href="myurl"

      v-bind:id="myid"
      v-bind可以缩写为 :属性 ,例如 :href="myurl"
      示例 :id  :class  :href  :title :src :style :key :value

v-bind:class="{ active: isActive }" ： 当isActive变量为true时，动态添加active 类class
v-model
v-for的使用 i 是索引
<ul>

  <li v-for="(item, i) in msg">
    <a href="#javascript:">{{i}}  {{item.hotWord}}</a>
  </li>
</ul>

msg:[

    {hotWord: "zz1"},
    {hotWord: "zz2"},
    {hotWord: "zz3"},
    {hotWord: "zz4"}
  ],

3、表单

---

<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">

{{ option.text }}

</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {

selected: 'A',
options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
]

}
})
默认选中A的下拉框。

4、组件基础：
组件是可复用的vue实例，
5、条件渲染：

---

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
6、事件处理：

---

在表单<input> <textarea> 及<select>元素上创建双向数据绑定
它会根据控件类型自动选取正确的方法来更新元素。
7、组件基础：
一、通过prop向子组件传递数据：
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

例子：
在一个典型的应用中，你可能在 data 里有一个博文的数组，
并想要为每篇博文渲染一个组件。
8、父组件给子组件：

这种传值的方式很容易理解。
首先： 在父组件中，通过 v-bind （缩写为 “:”）命令，绑定一个属性（即 prop，语义化比较容易理解），并传入一定的值（也可以是对象）关于如何传入，上面的代码已经给出了。
然后： 在子组件中通过 props 来接收，

总结一下：

1、子组件在props中创建一个属性，用以接收父组件传过来的值
2、父组件中注册子组件
3、在子组件标签中添加子组件props中创建的属性
4、把需要传给子组件的值赋给该属性

父组件：

    <div class="parent">
      <h2> 这里是父组件</h2>
      <cn-children v-for="post in posts" v-bind:key1="post.id"  v-bind:title="post.title">
      </cn-children>
    </div>
   <script>
    import cnChildren from './children'
    export default {
        name: "parent",
        components: {
          cnChildren
        },
        data () {
          return {

            posts: [
              { id: 1, title: 'My journey with Vue' },
              { id: 2, title: 'Blogging with Vue' },
              { id: 3, title: 'Why Vue is so fun' }
            ]

          }
        },
    }
</script>

子组件接收：

<div class="children">
  <p>{{key1}}</p>
  <p>这里是子组件  {{title}}</p>
</div>
<script>
export default {
    name: "children",
    props: ['key1','title'],
}
</script> 

效果图：

9：子组件给父组件：

父组件：
<template>
<child v-on:spot="spot"></child>
</template>
<script>
import child from "./child.vue"
export default {

components: {child},
methods:{
  spot:function(data){
      console.log('data',data)
   }
}

}
</script>
子组件：
<template>
<button v-on:click="spot">点一下就传</button>
</template>
<script>
export default {

data () {
  return {
    message: '啦啦啦啦'
  }
},
methods:{
   spot: function() {
        // 与父组件通信一定要加上这句话
        this.$emit("spot", '我是子组件传给父组件的内容就我。。')
   }
}

}
</script>
总结一下
1，子组件需要以某种方式例如点击事件的方法来触发一个自定义事件。
2，将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法。
3，在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

10：监听子组件事件（参考官网）
https://cn.vuejs.org/v2/guide...
父组件中：

v-on:enlarge-text="postFontSize += 0.1"

子组件：

<button v-on:click="$emit('enlarge-text')">点击我让文字变大</button>

11、axios 简介

---

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

引入方式：

1、安装： npm install axios
2、在main.js文件中 引入
import axios from 'axios'
Vue.prototype.$http = axios
在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http命令
methods: {
  postData () {
    this.$http({
      method: 'post',
      url: '/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}
执行 GET 请求：
// 也可以通过 params 对象传递参数
$http.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
执行 POST 请求
$http.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

12、学习使用Promise

---

https://blog.csdn.net/heshuai...
有没有一种方法可以让写法像同步，而本质是异步化呢？
Promise 就出来了。
一： 优点和缺点
可以将异步操作以同步操作流程的方式表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
如何使用？：
function promiseAjax(url){

  let p = new Promise((resolve,reject)=>{
    //第一个参数成功的回调函数
    //第二个参数失败的回调函数

    let xhr = new XMLHttpRequest();
    xhr.open('get',url,true);
    xhr.send();
    xhr.onreadystatechange=function(){
      if(this.readyState===4){
        if(this.status >= 200 && this.status <300 || this.status === 304){
          let res = JSON.parse(this.responseText)
          resolve(res);//成功回调函数的传参；
        }else{
          reject(this.status)//失败回调函数的传参；
        }
      }
    }
  })
  return p
}
//然后调用
let oData = promiseAjax('http://localhost:8080/yxw/MenuController_GeneralMenuList.do');
let oData2 = promiseAjax('http://localhost:8080/yxw/DomesticProfitController_getOperatIdList.do');

Promise.all([oData,oData2]).then(function(res){
  console.log('3333',res)
},function(err){
  console.log(err)
})

13、生命周期钩子

---

一：组件创建前后：
1.beforeCreate
2.created
例子：
data（）{

return {
    a:1
},
beforeCreate(){
    console.log(this.a)//undefined
},
created(){
    console.log(this.a)//1
}

}
二. vue启动前后
3.beforeMount
4.mounted
这两个的意思就是，
vue在beforeMount时，还不管事，也就是说，还没有渲染数据到<div id="app"><div/>里面，此时的这个组件还是空的

当mounted时，才会往<div id="app"><div/> 添加东西，也就是vue正式
接管<div id="app"><div/>

可以获取#app的innerHTML查看差异；
beforeMount(){

console.log(document.getElementById('app').innerHTML)//空的

},
mounted(){

console.log(document.getElementById('app').innerHTML)//#app里的内容

}
三. 组件更新前后
5.beforeUpdate
6.updated
当子组件里面的 视图改变 的时候触发。
如，做一个按钮，让data里面的a++，假如 一开始a是1
beforeUpdate返回1
updated返回2
例子：点击一次之后返回值分别是1，2
<button id="button1" @click ="handleClick">{{a}}</button>
data () {
return {

a:1,

}
},
beforeUpdate(){
console.log('beforeUpdate',document.getElementById('button1').innerHTML) //1
},
updated(){
console.log('updated',document.getElementById('button1').innerHTML) //2
},
methods: {
handleClick(){

this.a = this.a + 1;
console.log('嘿嘿', this.a)

}
}
四. 组件销毁前后
7.beforeDestroy
8.destroyed
一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？
答案是会的
所以这时候就会用到了destroyed,在组件被销毁后，我们把定时器给清除就好了。
所以这两个钩子函数一般用于做性能的优化。
六. 当捕获一个来自子孙组件的错误时被调用
11.errorCapture
当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数，
第一个参数是 错误对象
第二个参数是 报错的子孙组件
第三个参数是 报错的子孙组件的具体哪个地方报错。（如，假如我没有定义b这个变量，但是我去console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了created这个钩子函数里，那第三个参数会返回就是：created hook）。

14、computed属性和watch属性：

---

https://blog.csdn.net/joseydo...
https://www.w3cplus.com/vue/v...
computed计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。
我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。
例子：
<div v-for="subject in results">

  <input v-model="subject.marks">
  <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
</div>

<div> 学科总分Total marks are: {{ totalMarks }} </div>
results: [

    { name: 'English', marks: 70 }, 
    { name: 'Math', marks: 80 }, 
    { name: 'History', marks: 90 } 
  ]

computed: {

totalMarks: function () {
  let total = 0;
  let me = this;
  for (let i = 0; i < me.results.length; i++)
  {
    total += parseInt(me.results[i].marks);
  }
  return total;
}

},

我们可以使用Vue中的method计算出学科的总分，最终得到的总数结果是相同的
我们把computed区块中的totalMarks函数整体移到methods中。
同时在模板中将{{ totalMarks }} 替换成 {{ totalMarks() }}。
你最终看到的结果是一样的。

computed 属性，和在 methods 中定义一个相同的函数都可以实现这个功能，那么区别是？

computed 属性会基于它所依赖的数据进行缓存。 每个 computed 属性， 只有在它所依赖的数据发生变化时，
才会重新取值(re-evaluate)。

这就意味着，
只要 message 没有发生变化，
多次访问 computed 属性 reversedMessage，
将会立刻返回之前计算过的结果，
而不必每次都重新执行函数。
其次，计算属性具有缓存，相比Vue中的方法而言，性能更佳。但Vue中的计算属性都是同步的，如果需要异步我们得依赖于vue-async-computed插件

15、路由跳转以及传参：

1、在index.js中配置路由：

const router = new VueRouter({
  routes:[
    {
      path: '/home', component: require('../components/Home.vue')
    },
    {
      path: '/details', component: require('../components/Details.vue')
    },
    {
        path: '/about', component: require('../components/About.vue')
  },{
      path:'*',redirect:'/home'
  }]

})

2、查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，

传递参数使用query而且必须配合path来传递参数而不能用name，

目标页面接收传递的参数使用query。

使用方法如下：

 this.$router.push({
            path: '/details',
            query: {
              id: article.id
            }
          })

3、接收参数如下：

this.$route.query.id

4、最后总结为以下两点：

1.命名路由搭配params，刷新页面参数会丢失

2.查询参数搭配query，刷新页面数据不会丢失

3.接受参数使用this.$route后面就是搭配路由的名称就能获取到参数的值

最终效果图：