手把手教你用Vue搭建一个商品页面

vue的一些零散知识

大体目录如下

1. 实例创建
2. 属性绑定
3. 条件渲染
4. 列表渲染
5. 事件触发
6. class绑定
7. 计算属性
8. 组件化开发（父子相互传递数据）
9. 表单实现
10. Tabs

开源源码

一.VUE对象和vue实例

• 如何使用Vue实例开始编写Vue应用程序，以及如何将基本数据加载到网页上。 Vue实例是每个Vue应用程序的根

• Vue实例插入到DOM中的一个元素中

• Vue实例的数据可以使用称为表达式的类似于mustache的语法{{}}来显示。（放data然后再处理）

• Vue是响应式的，原例改变
  后面跟着变

二.VUE属性绑定

比如 data我放了product的text和一个image和link，在html页面时候 我就直接{{}}框出文字。

• target的用法

_self相同框架
_top整页
_blank新建一个窗口
_parent父窗口 其它的就是自定义了，可以指向已有的窗口名称

• data可以绑定到html的属性上面去
• v-bind：和：是一样的，：后面放属性

三.条件渲染

• v-if-else和v-show
• 可以在if这些的引号内随意使用表达式
• v-show不会去删改dom的节点属性只是显示和隐藏

我在项目中用以上知识解决了一个条件渲染文字的效果

提出问题———>>如何让文字有条件渲染
VUE的解决方案十分粗暴
data塞入一个Boolean值判断

举一反三

有没有比if-else更粗暴的呢，肯定是有的，比如v-show

由于if -else能够处理我们的业务逻辑了 所以够了

四.列表的渲染

其实就是个循环遍历键值对的问题

• What’d we learn
• The v-for directive allows us to iterate over an array to display data.
• We use an alias for the element in the array being iterated on, and specify the name of the array we are - looping through. Ex:
  v-for=“item in items”
• We can loop over an array of objects and use dot notation to display values from the objects.
• When using v-for it is recommended to give each rendered element its own unique key.

1. data塞入数组

1. 循环渲染
   
   

2. 如果一个这个产品有不同的version该怎么处理呢
   
   

3. 最后的代码

五.事件处理

1. 如下是一个简单的事件绑定——表达式绑定
   
   
2. 表达式绑定改造成一个函数方法绑定，
   
3. 悬浮鼠标显示图片的实现
   

六.Class & Style Binding

1. 色块对应图片
2. 如果条件绑定，前面是class后面的是条件 class： condition
   
   
3. class绑定时候 你甚至可以绑定一个数据或者对象进去

六.computed property

computed property的意思就是本身并不直接存储值，但是可以通过get和set方法来间接获取或者改变其他property的值。

1. 字符串合并

2. 如果要操作悬浮的图片，不是通过图片对象，而是下标，先访问键值对
   
   那个selectedvariant传入坐标给它
   
   弄完后 image得换给它的绑定

3. 根据true或false控制色块变化
   

八.组件开发

1. 大体的组件内容

2. 如果要给用户列入一个会员的权限，那就是要父向子传递数据
   
   
   

九.Communicating Events（子向父传递数据）

• 组件可以让它的父组件知道使用$emit发生了一个事件
• 组件可以使用带有v-on指令(简称@)的事件处理程序侦听事件发射，这可以触发父组件上的方法
• 组件可以在事件发生时发出数据
• 父节点可以使用子节点发出的数据

前面的会触发后面的方法事件

2. 如果要传入多个参呢

传入数字其实意义不大 如果要传入ID要怎么操作

十.表单

其实就是要做一个写评论功能

• 我们可以使用v-model指令在表单元素上创建双向绑定
• 我们可以使用.number修饰符来告诉Vue将该值转换为一个数字，但是 它有一个BUG，当value为空时候 自动变为字符串
• 当表单提交时，我们可以使用.prevent事件修饰符来阻止页面重新加载
• 我们可以使用Vue完成相当简单的自定义表单验证

1. 注册组件

  Vue.component('product-review', {
      template: `
        <input>
      `,
      data() {
        return {
          name: null
        }
      }
    })

2. 动态变化的数据 相当于嵌入一个变量（模子）
   
   预留一个填充字符
   

.prevent是要防止表单提交后刷新页面

十一.Tabs / 评论模块

1. 先渲染出来

   Vue.component('product-tabs', {
      template: `
        <div>
          <span class="tab" v-for="(tab, index) in tabs" :key="index">{{ tab }}</span>
        </div>
      `,
      data() {
        return {
          tabs: ['Reviews', 'Make a Review']      
        }
      }
    })

渲染的效果如下

如果要点击时候进行跳转tab

2. 如果要点击的时候 颜色变亮呢