vue 六

<a href='javascript:;'>组织a标签的跳转
transparent 透明
父级往子级传值用props验证
子级往父级传值用 this.$emit*()

cnpm install vue --save 安装vue

cnpm install vue-cli -g 安装vue-cli脚手架，加-g来全局安装
vue init webpack-simple demo5 初始化webpack项目
Project name demo 项目的名字必须是小写的
Project description A vue is project 默认
Author lianggege
Use sass ? No
install vue-router? Y

cnpm install 打生产包，安装依赖，要在项目下面运行这句话
cnpm run dev 打开发包，要在项目下面运行这句话
更新prettier
npm install --save-dev prettier@1.12.0


打包上线
自己的项目文件都需要放到 src 文件夹下，
项目开发完成之后，可以输入 npm run build 来进行打包工作
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist 文件夹放到服务器就行了。

webpack 比 webpack-simple稍微复杂点

bulid 打包的配置文件所在的文件夹
config 打包的配置，如webpack对应的配置
src 是项目的源码
app.vue 是入口的组件，.vue结尾的都是组件
main.js 是项目的入口文件
static 主要放静态资源
.babelrc 是ES6解析的配置
editorconfig 是subline编译器的配置
.gitignore 忽略git提交的一些配置
.postcssrc.js 是HTML添加前缀的一些配置
index.html 是单页面入口
package.json 辅助开发

Mustance语法：{{ msg }} msg需要在data中来定义
Html赋值： v-html='' 会把标签当作标签来输出，而不是文本值
表达式：{{ ok? 'YES':'NO '}}
文本赋值：v-text='' 类似textarea
过滤器：{{ message|capitalize }} 和 v-bind:id='rawld | formatld'
v-cloak 刷新太快没加载出来的处理
vue事件处理器v-on:click='' 或者 @click
    事件的修饰符v-on:click.stop 阻止冒泡
        v-on:click.stop.prevent 阻止默认事件，即阻止按钮默认事件
        v-on:click.self 给绑定事件本身的对象绑定，如果对象里有子元素，那么子元素是没有作用的e
        v-on:click.once 绑定一次

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 调用组件 -->
    <Counter :num='num' v-on:incre='increment' v-on:decre='decrement'></Counter> 
    <p>parent:{{ num }}</p>
  </div>
</template>

<script>
  import Counter from './Counter'
export default {
  name: 'HelloWorld',
  data () {
    return {
      num: 10,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  // 加载组件
  components:{
    Counter
  },
  methods:{
    increment(){
      this.num++;
    },
    decrement(){
      this.num--;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<template>
    <div>
        <button @click='increment'>+</button>
        <button @click='decrement'>-</button>
        <p><span>{{ num }}</span></p>
    </div>
</template>
<script>
    export default{
        props:['num'],
        data(){
            return{
                num: 0,
            }
        },

        methods:{
            increment(){
                this.$emit('incre');

            },
            decrement(){
                this.$emit('decre');

            },
        }
    }
</script>
<style></style>

 

vue事件处理器
    v-on:keyup.enter 修饰符还有
    .tab .delete .esc .space .up .dowm .left .right
vue的核心思想有两个：一个是数据驱动，一个是组件化
vue的组件
    1.全局组件和局部组件
    2.父子组件通讯-数据传递 父-->子(prop)  子-->父(emit)
    3.Slotc 是一个插槽
前端的路由？
    路由是根据不同的url地址展示不同的内容或页面
    前端的路由就是把不同路由对应不同的内容或者页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的
vue-router用来构建SPA
    <router-link></router-link>或者this.$router.push({path:''}) 跳转标签被后就是一个a标签
    <router-view></router-view> 组件的渲染
动态路由匹配
嵌套路由 
@ 是一个别名，输入@就相当于输入的是src地址
编程式路由
    通过js来实现页面的跳转
        $router.push('name')
        $router.push({path:'name'})
        $router.push({path:'name?a=123'}) 或 $router.push({path:'name',query:{a:123}})
        $router.go(1)
命名路由和命名视图
    给路由定义不同的名字，根据名字进行匹配
    给不同的router-view定义名字，通过名字进行对应组件的渲染
Vue-Resource的引用
    方式一<script src='http://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js'></script>
    方式二npm install vue-ressource --save
axios 引入方式
    方式一<script src='https://unpkg.com/axios/dist/axios.min.js'></script>
    方式二npm install axis --save
node.js的特点---异步编程，高效与性能
异步的实现方式
    回调函数
    事件监听
    订阅/发布