Vue快速入门第二天

webpack搭建的vue开发目录

• build.js 就是加载开发和生产环境的配置，然后构建生产版本，通过build.js 打生产的包
• package.json scripts:{ dev start build开发完成之后构建生产版本}配置脚本的命令
• webpack.base.conf.js 打包的核心的配置 config–>index.js 可以和上面base合并成一个
• dev:{}开发下面的环境

模板语法

{{msg}}
Html赋值：v-html=""
绑定属性：v-bind:id=""
使用表达式：{{ok ？“YES” :“NO”}}
文本赋值;v-text=""
指令：v-if=""
过滤器：{{ message | xxx}} v-bind:id=“rawId | formatid”

Vue基础语法介绍

Class 和 Style绑定
对象语法：

 v-bind:class="{active:isActive,"text-danger:"hasError""}"

数组语法：

<div v-bind:class="[activeClass,errorClass]">
data : {
	activeClass : 'active',
	errorClass:'text-danger'
}

style绑定-对象语法：v-bind:style="{color；activeColor,fontSize:fontSize+‘px’}"
条件渲染 ： v-if v-else v-else-if v-show v-clock

v-if和v-show的区别？
它们都是控制显示和隐藏的，v-show只是控制div片段显示自己的block或者none,div代码已经渲染出来了，只不过是用displayCSS来控制它的显示和隐藏
v-if如果是false，那么整个htmlDom就不会被渲染上去

vue事件处理器
v-on:click=“greet” 或者@click=“greet”
v-on:click.stop v-on:click.stop.prevent v-on:click.once
v-on:keyup.enter
Vue组件
全局组件和局部组件
父子组件通讯
Slot 内容分发（插槽）
路由基础介绍

什么是前端路由？路由根据不同的url地址展示不同的内容或者页面 前端路由就是把不同路由对应不同的内容或者页面的任务交给前端来做
以前是通过服务端根据url的不同返回不同夫人页面实现的 什么时候使用前端路由？在单页面应用，大部分人你页面结构不变，只改变部分内容的使用
前端路由有什么优点和缺点 优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：不利于SEO，使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

vue-router 用来构建SPA

<router-link>  this.$router.push({path:""})  相当于a连接  用来跳转
<router-view>  用来显示

动态路由的匹配
/user/:username /user/evan {username:‘evan’}
/user/:usrername/post/:post_id
嵌套路由
编程式路由:通过js实现页面跳转

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
$router.go(1)

命名路由和命名视图:根据name的值去映射到不同的组件

Vue-Resource

提供了7种请求API: 参数：
get(url,[option])拿数据
head(url,[option])
delete(url,[option])
jsonp(url,[option])
post(url,[option])提交数据
put(url,[option])
patch(url,[option])
全局拦截器interceptors

比如页面有10个请求，10个请求想做一个loading的处理，不可能每个请求加一下，这是用到了统一处理
Get请求

get: function (){
    this.$http.get("package.json",{
        params:{
            userId:"101"
        },
        headers:{
            token:"abcd"
        }
    }).then(res=>{
        this.msg = res.data;
    },error=>{
        this.msg = error;
    });

Post请求

post：function (){
    this.$http.post("package.json" ,{
        userId:"102"
    },{
        headers:{
            access_token:"abc"
        }
    }).then(function(res)) {
        this.msg = res.data;
    }
}

JSONP请求

jsonp:function(){
    this.$http.jsonp("http://xxx?id=123",{
        this.msg = res.data
    })
}

全局拦截器的使用
mounted初始化的时候调用

mounted: function () {
    Vue.http.interceptors.push(function(request,next){
        console.log("请求之前做的事情")
    next(function(response){
        console.log("请求拿到数据了")
        return response
    })
    })
}

做一些全局的配置

http : {
    root:"http://10.342.132.34/ipmsapi"
}

axios基础介绍

并没有挂载到vue实例里面。暴露了一个axios变量，基本API

function getUserAccount() {
    return axios.get('/user/123')//
}

function getUserPermissions() {
    return axios.get('/user/12345/permissions')
}
axios.all([getUserAccount(), getUserPermissions()]])
 .then(axios.spread(function (acct,perms){
     //展开；同时获取这两个接口  分别拿到它的对象
 }));

Get请求

get:function (){
    axios.get("package.json",{
        params:{
            userId:"999"
        },
        headers:{
            token:"jack"
        }
    }).then(res=>{
        this.msg=res.data
    }).catch(function(err) {
        console.log('请求失败')
    });
}

Post请求

post: function (){
    axios.post("../package.json",{
        userId:"123"
    },{
        headers:{
            token:"jkljl"
        }
    }).then(res=>{
        this.msg = res.data
    })
}