首页 > 其他 > 详细

VUE模板

时间:2021-01-14 20:26:12      阅读:1      评论:0      收藏:0      [点我收藏+]

单个vue文件

 父组件:

    template部分:

  <div class="main-cell">
     <div class="line-charts-cell">
      <!-- 组件 -->
      <!-- :topInfo="xxx" 父作用域将数据传到子组件 -->
      <!-- v-前缀作为一种视觉提示,用来识别模版中vue特定的特性,在某些指令中提供了简写,
        比如v-bind缩写 <a v-bind:href="url">...</a> , <a:href="url"> ... </a>,
        比如v-on缩写 <a v-on:click="doSomething">...</a> <a @click="doSomething">...</a>
       -->
      <TopItem @handleRadio="handleRadioLineCharts" :topInfo="lineChartsInfo"></TopItem>
      <BaseChartDraw :chartOptions="lineChartsInfoOpt"></BaseChartDraw>
    </div>
    <div class="charts-cell">
      <div class="charts-item">
        <TopItem @handleRadio="handleRadioSumCharts" :topInfo="sumChartsInfo"></TopItem>
        <BaseChartDraw :chartOptions="sumChartsInfoOpt"></BaseChartDraw>
      </div>
      <div class="charts-item">
        <TopItem @handleRadio="handleRadioSortCharts" :topInfo="sortChartsInfo"></TopItem>
        <BaseChartDraw :chartOptions="sortChartsInfoOpt"></BaseChartDraw>
      </div>
      <div class="charts-item">
        <TopItem @handleRadio="handleRadioSumCharts2" :topInfo="sumChartsInfo2"></TopItem>
        <BaseChartDraw :chartOptions="sumChartsInfoOpt2"></BaseChartDraw>
      </div>
    </div>
  </div>

 

  script部分:

 // 导入组件  组件的命名方式
 import TopItem from "./components/TopItem";
 import BaseChartDraw from "./components/BaseChartDraw";

// 导入工具js import { getMoney } from
"../../utils/priceUtil.js";
export
default { // 在vue里,一个组件的本质上一个拥有预定义选项的vue实例,在vue中注册组件 components: { TopItem, BaseChartDraw } ... };

 

 

 子组件1  TopItem.vue

   template部分:

<div class="item-cell">
    <!-- 模版语法声明式地渲染DON -->
    <!-- 数据绑定到DOM文本或特性 Mustache语法,戏称小胡子语法 -->
    <!-- 对于所有的数据绑定,Vue.js都提供了完全的JavaScript表达式支持 -->
    <div class="item-name">{{topInfo.name}}</div>
    <div class="item-radio-cell">
      <!-- v-model 指令 实现表单输入和应用状态之间的双向绑定 -->
      <!-- 指令是带有v-前缀的特殊特性 ,指令的职责是当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM -->
      <!-- 
        v-bind指令可以响应式的更新HTML特性:
        <a v-bind:href="url">...</a>
        在这里href是参数,v-bind指令将该元素的href特性与表达式url的值绑定
       
        v-on指令可以监听DOM事件:
        <a v-on:click="doSomething">...</a> 在这里参数是监听的事件名
       -->
        <!-- 这里同时还涉及了Element UI的知识点 -->
         <!--  change 绑定值变化时触发的事件-->
       <el-radio-group v-model="radioValue" size="mini" @change="radioChange">
          <!-- v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 -->
          <!-- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
               v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
               text 和 textarea 元素使用 value 属性和 input 事件;
               checkbox 和 radio 使用 checked 属性和 change 事件;
               select 字段将 value 作为 prop 并将 change 作为事件。
           -->
          <!-- :指令的意思是该元素节点lable特性和item.value保持一致 -->
          <!-- v-for指令可以绑定数组的数据来渲染一个项目列表 -->
          <!-- 建议尽可能在使用 v-for 时提供key属性,它是 Vue 识别节点的一个通用机制,key 并不仅与 v-for 特别关联。 -->
          <!-- 不推荐在同一元素上使用 v-if 和 v-for -->
          <el-radio-button :label="item.value" v-for="(item,index) in topInfo.radioList" :key="index">{{item.name}}</el-radio-button>
          <!--  label Radio的value-->
          <!--  -->
        </el-radio-group>
    </div>
  </div>

 

  script部分:

export default{
    // 子单元通过pro接口与父单元进行良好的解耦
    props:{
      topInfo:{
        type:Object,
      }
    },
    // 当一个vue实例创建时,它将data对象中的所有属性加入到vue的响应式系统中。当这些属性的值发生变化时, 视图将会产生响应,即匹配新的值
    data(){
      return{
        radioValue:‘1‘
      }
    },
    // 每个vue实例在被创建时都要经过一系列的初始化过程,例如需要设置数据监听、编译模版、将实例挂载到DOM并在数据变化时
    // 更新DOM,
    // 同时在这个过程中也会执行一些叫做生命周期的钩子函数,这给了用户在不同阶段添加自己代码的机会。
    // created 钩子可以用来在一个实例被创建之后执行代码
    created() {
      this.radioValue = this.topInfo.radioList[0].value;
      this.$emit(‘handleRadio‘,{
        value:this.radioValue
      })
    },
    //  计算属性 是以解决页面中复杂逻辑运算
    //  关于计算属性和方法的比较在于缓存
    computed: {

    },
    //  不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch(‘a‘, newValue => this.myMethod())。因为箭头函数并没有 this
    methods:{
      radioChange(){
        this.$emit(‘handleRadio‘,{
          // 回调参数 选中的radio label的值
          value:this.radioValue
        })
      }
    },
  }

 

 

  子组件2:BaseChartDraw.vue

    template部分:

<div class="pic-cell">
    <div class="pic-item" ref="chartCell"></div>
 </div>

 

  script部分:

 import echarts from ‘echarts‘;
  export default{
    props:{
      chartOptions:{
        type:Object,
      }
    },
// 自定义侦听器,vue通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化 // 时执行异步或开销较大的操作时,这个方式比较常用 watch:{ // 如果chartOptions发生变化,这个函数就会执行,使用 watch 选项允许我们执行异步操作 ,设置中间状态,等等。 chartOptions:{ deep:true, /**/ handler(nv,ov){ console.log(nv) this.drawChart(nv); } } }, methods:{ drawChart(options){ let temp = echarts.init(this.$refs.chartCell); temp.clear(); temp.setOption(options); } } }

 

VUE模板

原文:https://www.cnblogs.com/zhishiyv/p/14278593.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号