vue基本总结

一.环境搭建
   （1）vue vue-cli环境
        安装过程：
# 全局安装 vue-cli
      $ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
        参考菜鸟驿站：http://www.runoob.com/vue2/vue-install.html
  （2）nuxt 服务端坏境搭建
nuxt 相关的脚手架已经集成到了 vue-cli，同时提供 starter、express、koa、adonuxt
npm install -g vue-cli
vue init nuxt/starter <project-name>
cd <project-name> 
npm install
npm run dev
参考文档：https://zh.nuxtjs.org/guide/installation#新手模板
 二.把整个项目clone下来，使用git clone 地址
 三.vue 常用知识
    1. 样式绑定：
       基础： <div v-bind:class="{ active: isActive }"></div> active--class  isActive条件判断
       常用：三元运算符  <span @click="showcon" :class="isActive ? 'show': 'not-info'">{{seller.bulletin}}</span> show ,not-info都属于class
       router-link样式切换：<router-link to="/about">About</router-link>，只需要为添加.router-link-active 指定样式即可
       注意事项：需要使用{}花括号，条件判断一般通过事件
    2. 列表渲染 v-for
       https://cn.vuejs.org/v2/guide/list.html
       注意：列表渲染中的  显示过滤/排序结果 computed 和methods 的使用情况
   3. 条件渲染 v-if v-show 注意二者的区别
       用法：https://cn.vuejs.org/v2/guide/conditional.html
   4. 过滤器：全局过滤和局部过滤器
       应用场景：文本格式化，在vue中主要应用在{{}}和v-bind 表达式中
       语法：{{ msg | 函数}}   <div v-bind:id="rawId | formatId"></div>  注意：函数第一个参数总是表达式的值
       例子： <p>{{ msg | formatMoney}}</p>  金额保留2位小数
      data:function(){
return{
msg:123
}
       },
              filters: {
formatMoney: function(value){
return  value.toFixed(2);
}
      }
              输出：123.00
         具体查看官网：https://cn.vuejs.org/v2/guide/filters.html#ad   
     5. 组件：
        （1）创建组件
             nuxt环境中创建组件很简单，只需要在components中创建.vue文件即可，语法和pages里的.vue文件一样，引入时只需要在pages 里的.vue文件中import，components中注册即可。
             具体：components:{mychild:child}
             vue 单页面环境中，基本和nuxt的方法一样，只是import 路径稍有不同
             nuxt     import child from '~/components/child.vue'
             vue      import child from './components/child.vue'
         (2)组件的传递使用prop
         (3）ref
             ref=""一个引用id 注册引用信息
  第一：在普通的DOM元素上使用，引用指向的就是DOM元素。访问方式this.$refs.引用ID。
        eg:使用的一种情况乱，获取文本框的值
<div id="app">
<input type="text" value=""  ref="msg" v-model="message"/>
<button @click="saveMsg">提交</button>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:''
},
methods:{
saveMsg:function(){
const text = this.$refs.msg.value+"成功";
console.log(text)
}
}
})
    第二：被用来给子组件注册引用信息，直接访问子组件，访问方式this.$refs.引用ID.具体访问内容
     6.过渡&动画<transition></transition >
     7.深入响应式原理 主要讲set
          Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

        Vue.set(vm.someObject, key, value) or this.$set(this.someObject,key,value)

          注意：nuxt 服务端渲染建议不使用Vue.set,使用this.$set.

         个人理解：就是给对象中添加需要用到的属性但对象中木有。

     8.axios 的使用