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
cd  
npm install
npm run dev
参考文档:https://zh.nuxtjs.org/guide/installation#新手模板
 二.把整个项目clone下来,使用git clone 地址
 三.vue 常用知识
    1. 样式绑定:
       基础:
active--class  isActive条件判断
       常用:三元运算符  {{seller.bulletin}} show ,not-info都属于class
       router-link样式切换:About,只需要为添加.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 | 函数}}   
  注意:函数第一个参数总是表达式的值
       例子:

{{ msg | formatMoney}}

  金额保留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:使用的一种情况乱,获取文本框的值





你可能感兴趣的:(vue)