Vue总结

Vue不支持IE8 及以下版本

1、指令：

v-bind，

v-if="seen"，

v-for="todo in todos"，

v-on 指令添加一个事件监听器，

<button v-on:click="reverseMessage">逆转消息</button>

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、组件基础：

1。父组件像子组件传值：通过props数组

父组件：

<template>

<child :name="name"></child>

</template>

<script>

import child from "./child.vue"

export default {

components: {child},
 data(){
  return {name:"二哈"}
 }

}

</script>

子组件：

<template>

<div>{{name}}</div>

</template>

<script>

export default {

props:["name"]

}

</script>

2：子组件给父组件：

父组件：

<template>

<child @childToParent="reviceSondata"></child>

</template>

<script>

import child from "./child.vue"

export default {

components: {child},
methods:{
  reviceSondata(data){
    console.log(data);
  }
}

}

</script>

子组件：

<template>

<button @click="dataTofather">点击</button>

</template>

<script>

export default {

data () {
  return {
    message: '啦啦啦啦'
  }
},
methods:{
  dataTofather(){
    this.$emit("childToParent",this.message,true);
  }
}

}

</script>

8、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);
  })

9、学习使用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)
})

10、生命周期钩子

一：组件创建前后：

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）。

11、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 属性， 只有在它所依赖的数据发生变化时，

这就意味着，

只要 message 没有发生变化，

多次访问 computed 属性 reversedMessage，

将会立刻返回之前计算过的结果，

而不必每次都重新执行函数。

其次，计算属性具有缓存，相比Vue中的方法而言，性能更佳。但Vue中的计算属性都是同步的，如果需要异步我们得依赖于vue-async-computed插件

12、组建基础：