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-htmlv-showv-ifv-elsev-else-ifv-forv-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-modelv-for的使用 i 是索引<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 里有一个博文的数组，并想要为每篇博文渲染一个组件。父组件：这里是父组件
子组件接收：
效果图：{
{key1}}这里是子组件 {
{title}}
二：监听子组件事件（参考官网）
父组件中：v-on:enlarge-text="postFontSize += 0.1"
子组件：
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 axios2、在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
有没有一种方法可以让写法像同步，而本质是异步化呢？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.beforeCreate2.created例子：data（）{return { a:1},beforeCreate(){ console.log(this.a)//undefined},created(){ console.log(this.a)//1} }
二. vue启动前后3.beforeMount4.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.beforeUpdate6.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.beforeDestroy8.destroyed一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？ 答案是会的 所以这时候就会用到了destroyed,在组件被销毁后，我们把定时器给清除就好了。所以这两个钩子函数一般用于做性能的优化。六. 当捕获一个来自子孙组件的错误时被调用11.errorCapture当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数， 第一个参数是 错误对象 第二个参数是 报错的子孙组件 第三个参数是 报错的子孙组件的具体哪个地方报错。（如，假如我没有定义b这个变量，但是我去console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了created这个钩子函数里，那第三个参数会返回就是：created hook）。11、computed属性和watch属性：
computed计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。例子：<div v-for="subject in results">
Marks for { { subject.name }}: { { subject.marks }} <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插件12、路由跳转以及传参：
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后面就是搭配路由的名称就能获取到参数的值
最终效果图：
