vue2.5+ 之基础入门

简单的记录一下最近重学vue的过程

起步

1. 安装vue-cli3

   npm install - g @vue/cli 
   npm install - g @vue/cli-service-global 
   

2. 新建项目

   vue create vue-buy   vue-buy是项目名称
   

3. 启动服务

   npm run serve  
   

编写

1. vue单文件组件 .vue文件

   • <template>
     	<div id="app">   <!--模板里边只能有一个root 也就是一个根-->
         </div>
     </template>
     export default {
     	name:"app"  //这个是组件的名字
     	data() {
             return {
             }
         },
     }
     

组件化

1. 开始使用

   • 引入组件

     import Cart from './components/Cart'
     

   • 注册组件 ，使用components进行注册

     components:{
           Cart
         },
     

   • 使用

     <Cart> </Cart>  使用Cart来引用组件
     

2. 组件数据传递

   • 父子关系的组件的数据传递

     • 父组件: 使用:name这种形式进行数据的传递

       <Cart :name="name" :cart="cart"></Cart> <!--使用:name这种形式进行数据的-->
       <script>
       import Cart from './components/Cart'
       export default {
           name:'app', //组件的名字
           components:{
             Cart
           },
           data(){
               return{
                   name:'开课吧',
                   cart:[]
               }
           },
       }
       </script>
       

     • 子组件：使用props进行接收

       <script>
           export default {  // 可以使用props进行数据验证
               props:{
                   name:{   
                       type:String,  //类型是string类型
                       required:true //数据必须传递
                   },
                   cart:{
                       type: Array  //数组类型
                   }
               },
       </script>
       

   • 任意两个组件，使用总线机制进行传递

     vue每个实例都有订阅/发布模式的实现，使用$on和￥emit来传递数据

     • 父组件进行广播数据

       <template>
       	 <li class="cart-list" v-for="(item, index) in goods" :key="item.text">
               <span>{{item.text}}</span>
               <span>￥{{item.price}}</span>
               <button @click="addCart(index)" >添加购物车</button>
             </li>
       </template>
       <script>
           export default {  // 可以使用props进行数据验证
           	methods: {
                   addCart(i){
                       const good = this.goods[i];
                       // 触发一个事件  发送
                       this.$bus.$emit('addCart', good) 
                   },
               }
           },
       </script>
       

     • 子组件监听时间进行接收

       <script>
           export default {  // 可以使用props进行数据验证
           	 data() {
                   return {
                       cart:[]
                   }
               },
               created(){
                   this.$bus.$on('addCart', good=>{ //接收到数据
                       const ret = this.cart.find(v=>v.text===good.text);
                   })
               },
           }
       </script>
       

样式和class

1. 样式 ：内联样式 v-bind:style ,可以简写为:style

   <tr v-for="(c,i) in cart" :key="c.text" :style="{color:c.active?'red':'black'}">
   	{{i}}
   </tr>
   

2. class

   <tr v-for="(c,i) in cart" :key="c.text" :class="{yellow_active:c.active}"></tr>
   <style scoped>
       tr.yellow_active{
           font-weight: bold;
           color: orange;
       }
   </style>
   

计算属性

1. 使用computed字段，可以进行富足逻辑的计算

   <td colspan="2">{{activeCount}}/{{count}}</td>
       <td colspan="2">{{total}}</td>  <!-- 直接用 不用写total（）-->
   <script>
       export default {    //虽然 也可以使用methods的方法实现 ，但是毕竟computed有它的价值，且再使用时不用写方法之后的括号（）
       	data() {
               return {
                   cart:[]
               }
           },
          computed: {
               total() {
                   return this.cart.reduce((sum,v)=>{
                       if (v.active){
                           return sum+v.price*v.count;
                       }
                       return sum
                   },0)
                   // let num= 0;
                   // this.cart.forEach(v=>{
                   //     if (v.active){
                   //         num += v.price * v.count
                   //     }
                   // });
                   // return num
               },
               count() {  //购物车的所有商品条数
                   return this.cart.length;
               },
               activeCount(){  //选中的商品条数
                   return this.cart.filter(v=>v.active).length;
               }
           },
   </script>