1. 搭建vue的开发环境:
    https://cn.vuejs.org/v2/guide/installation.html
    1、必须要安装nodejs
    2、搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具
    npm install --global vue-cli  /   cnpm install --global vue-cli         (此命令只需要执行一次)
    
    3、创建项目 必须cd到对应的一个项目里面
    vue init webpack vue-demo01
    cd  vue-demo01     
    cnpm install   /  npm install          如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install    
    npm run dev
    
    4、另一种创建项目的方式 (推荐) *
    vue init webpack-simple vuedemo02
    cd  vuedemo02    
    cnpm install   /  npm install            
    npm run dev
    
  2. 目录结构
  3. 绑定数据

    简写使用
  4. v-for指令循环数据






  5. 绑定属性
    v-bing:attrName 绑定属性 v-bind:title=”title”
    简写 :title=”title”
  6. 绑定html
  7. 绑定class :class

    这个是一个div
    


    #script

    #style
    .red{

    color:red;
    

    }

  8. 绑定样式v-style :style

    这个是一个div
    


    #script

    #style
    .red{

    color:red;
    

    }
    .box{

    height:100px;
    width:100px;
    background:red;
    

    }

  9. 双向数据绑定 MVVM model改变会影响视图,视图改变返回来影响model
    双向数据绑定必须在表单中使用
    v-model
    <h2>{{msg}}</div>
    <input type="text" v-model="msg" />
    <button v-on:click="getMsg()">获取表单数据</button>
    <button v-on:click="setMsg()">获取表单数据</button>
    <br><br><hr><br><br>
    <input type="text" ref="userInfo">
    <button v-on:click="getUserInfo()">获取表单数据userInfo</button>
    

    #script
  10. vue事件
    v-on:click=”clickFunc()” 点击触发脚本中methods中的clickFunc方法 简单写法就是 v-on:click == @click //script
  11. 条件渲染
    v-if div

    如果数据中的ok是true 这渲染div,否则不显示
  12. todoList demo独立完成
  13. Vue组件
    所有的组件都要被一个根节点包含:
    Home.vue

    <!-- 组件的根节点,必须 -->
    <div>
        <h2>{{msg}}</h2>
    </div>
    

    App.vue
  14. 生命周期函数
    组件创建,挂载,更新销毁时触发的方法
    beforeCreate() //实例创建前
    created() //实例创建完成
    beforeMounted() //模板编译前
    mounted() //模板编译后 一般请求数据,操作dom放在这个周期里,页面加载时候执行
    beforeUpdate() //数更新前
    updated() //数据更新完成
    beforeDestory() // 页面销毁时候要保存一些数据,可以监听这个生命周期函数
    destory() //页面销毁完成 当父组件移除子组件的时候子组件销毁调用destory方法
  15. vue请求数据 vue-resource
    1. 安装vue-resource模块
      npm install vue-resource –save
    2. 在main.js中引入vue-resouce
      import VueReource from ‘vue-resource’
    3. 调用Vue.use注册
      Vue.use(VueReource);
    4. 在页面逻辑中可以请求方法
      this.$http.get(api).then(response=> {
      this.someData = response.body;
      },err=>{});
      例如:
      change(){
      let api = “http://c.visualpavilion.com/offer/pulltest?id="+this.offerId;
      this.$http.get(api).then(response => {
      this.link = (response.body.offers[0].url);
      }, response => {
      });
      let finalUrl = this.link;
      finalUrl = finalUrl.replace(“{click_id}”,guid());
      if(this.idfa){
      finalUrl = finalUrl.replace(“{device_id}”,this.idfaValue);
      } else if(this.gaid){
      finalUrl = finalUrl.replace(“{device_id}”,this.gaidValue);
      } else {
      finalUrl = finalUrl.replace(“{device_id}”,””);
      }
      finalUrl = finalUrl.replace(“{custom}”,this.custom);
      finalUrl = finalUrl.replace(“https”,”http”);
      this.result = finalUrl;
      }
    5. 进入页面就直接加载数据,可以在生命周期函数mounted中调用
      this.change();
  16. axios , fetch-jsonp 获取数据

    • axios
    1. npm install axios –save
    2. 在哪里用就在对应的地方引入

    • fetch-jsonp
      axios 不能获取jsonp
  17. 父组件传值给子组件
    不同的页面加载同一个子组件的时候显示的属性不同
    1. 父组件调用子组件的时候,绑定动态属性
    2. 在子组件中通过props来接收父组件传递过来的数据
    3. 父组件给子组件传值出了传递数据,还可以传递方法,或者传递整个父组件,这个时候获取的父组件实例
    4. 子组件接收数据验证数据的有效性
      props:{
      “title”:String,
      “run”:Function,
      “home”:Object
      }
  18. 父子组件主动获取的数据和方法
    1. 父组件主动获取子组件的数据和方法
      1. 调用子组件的时候定义一个ref
      2. 在父组件里面通过
        this.$refs.header.属性
        this.$refs.header.方法
    2. 子组件主动获取父组件的数据和方法
      this.$parent.数据
      this.$parent.方法
  19. 非父子组件传值
    事件广播的机制

    1. 新建一个js文件 然后导入vue 实例化vue然后暴露这个实例VueEmit
    2. 在要广播的地方引入刚才定义的实例VueEmit
    3. 通过VueEmit.$emit(‘事件名称’,’数据’) 进行广播数据
    4. 在要监听的组件中的mounted方法中通过VueEmit.$on(‘事件名称’,function(data){}) 来接收广播
      在model中创建vueEvent.js
      import Vue from ‘vue’
      var Event = new Vue()

    export default Event;

    在Home.vue 中添加方法


    import Event import ‘../model/vueEvent.js’;
    export default {
    name: ‘app’,
    data () {
    return {
    }
    },
    methods:{
    emit(){
    Event.$emit(‘news’,this.msg)
    }
    }
    }

    在News.vue 中添加方法
    在Home.vue 中添加方法


    import Event import ‘../model/vueEvent.js’;
    export default {
    name: ‘app’,
    data () {
    return {
    ‘msg’:””
    }
    },
    mounted:{
    Event.$on(‘news’,data => {
    this.msg=data;
    })
    }
    }
  20. vue路由 vue-router
    1. 安装和引用
      npm install vue-router –save
      #main.js
      import VueRouter from ‘vue-router’
      Vue.use(VueRouter)
    2. 配置路由
      1. 创建组件引入组件
      2. 定义路由
        const routes = [
        { path: ‘/foo’, component: Foo },
        { path: ‘/bar’, component: Bar }
        ]
      3. 实例化VueRouter
        const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
        })
      4. 在main.js中挂载路由实例
        new Vue({
        el: ‘#app’,
        router,
        render: h => h(App)
        })
      5. 在根组件中添加

        Hello App!






        Go to Foo
        Go to Bar





      6. 页面返回
        methods: {
        goBack () {
        window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
        
        }
        }
  21. 动态路由
    1. 路由规则 {path:’content/:aid’}
    2. 拼接路由
    3. 在对应的页面中添加 this.$router.parmas获取路由的参数map // {key:123}
  22. 路由get传值
    1. 路由规则 {path:’product’ compent:Product}
    2. 拼接路由/product?id=
    3. 通过this.$router.query 获取参数map
  23. 编程式导航
    例如登录功能

  24. 路由嵌套
    1. 配置路由
      {
      path:’/user’,
      component:User,
      children:{
      { path:'/useradd',component:UserAdd },
      { path:'/userlist',component:UserList },
      
      }
      }
    2. 在父页面中(User.vue),配置子路由显示的地方
  25. MintUI 移动端UI框架
    1. 安装
      npm install mint-ui -S # -S表示 –save
    2. 引入mintUI的css 和插件
      import ‘mint-ui/lib/style.css’;
      import Mint from ‘mint-ui’;
      Vue.use(Mint)
    3. 开始使用
    4. 在组件上面执行事件
      @click.native
  26. ElementUI
    1. 安装 npm install elemnet-ui -S
    2. 引入element UI的css 和插件
      import ElementUI from ‘element-ui’;
      import ‘element-ui/lib/theme-chalk/index.css’;
      Vue.use(ElementUI);
    3. 配置file_loader
      {
      test: /.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
      loader: ‘file-loader’
      }
      按需引入
    4. npm install babel-plugin-component -D
    5. 修改.babelrc配置文件
      {
      “presets”: [
      ["env", { "modules": false }],
      "stage-3"
      ]
      
      }
      改为(与官方文档有一点出入):
      {
      “presets”: [[“env”, { “modules”: false }]],
      “plugins”: [
      [
          "component",
          {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
          }
      ]
      
      ]
      }
    6. 引入
      import { Button, Select } from ‘element-ui’;
      Vue.use(Button)
      Vue.use(Select)
      按需引入2:
    7. 引入组件
      import { Button, Select } from ‘element-ui’;
      Vue.use(Button)
      Vue.use(Select)
    8. 引入对应的css
      import ‘element-ui/lib/theme-chalk/index.css’;
    9. 如果出错: webpack.config.js 配置file_loader
      {
      test: /.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
      loader: ‘file-loader’
      }
  27. Vuex
    Vuex是一个专为vue.js应用开发的状态管理模式
    1. vuex 解决了组件之间同一状态的共享问题
    2. 组件里面数据的持久化
      使用
    3. 安装vuex, npm i install vuex -S
    4. 在src下创建vuex
    5. 在vuex下创建store.js
    6. 在store.js引入vue,引入vuex,并使用
      import Vue from ‘vue’;
      import Vuex from ‘vuex’;
      Vue.use(Vuex);
    7. 定义state,用于存储数据
      var state={
      count:1
      }
    8. 定义mutations,主要保存修改数据的操作
      var mutations={
      incCount(){
      ++state.count;
      
      }
      }
    9. 暴露对象
      export default new Vuex.Store{
      state,
      mutations
      }
    10. 使用定义个store,引入store
    11. 在模板中使用
    12. Getter 类似计算属性,改变state里面的数据的时候会触发getters里面的方法获取新的值
      var getters = {
      computedCount : (state) =>{
      return state.count*2
      
      }
      }
      要暴露到外部中
      export default new Vuex.Store{
      state,
      mutations,
      getters
      }
    13. 使用在模板中
    14. actions 异步操作,作用比较小
      var actions = {
      incMutationsCount(context) =>{
      context.commit('incCount')
      
      }
      }
      要暴露到外部中
      export default new Vuex.Store{
      state,
      mutations,
      getters,
      action
      }
      触发actions
      this.$store.dispatch(‘incMutationsCount’)
    15. vuex持久化数据
      请求数据之后存储到store中,并且页面在加载的时候从store中读取,如果store包含数据
      则直接使用,否则直接读取远程数据